<div class="checkout-card">
    <div class="card-header-custom">
        <i class="fas fa-shipping-fast"></i>
        <h3>Shipping Information</h3>
    </div>

    <!-- Hidden Fields -->
    <?php if(isset($productid)): ?>
        <input type="hidden" name="product_id" value="<?php echo e($productid); ?>">
        <input type="hidden" name="size" value="<?php echo e($size); ?>">
        <input type="hidden" name="color" value="<?php echo e($setcolor); ?>">
        <input type="hidden" name="quantity" value="<?php echo e($quantity); ?>">
        <input type="hidden" name="price" value="<?php echo e($productprice); ?>">
    <?php endif; ?>

    <?php if(Auth::check()): ?>
        <?php
            $user = Auth::user();
        ?>
        <input name="firstname" value="<?php echo e($user->name ?? ($userdata->first_name ?? '')); ?>" id="input-firstname" type="hidden">
        <input name="lastname" value="null" id="input-lastname" type="hidden">
        <input type="hidden" id="totalamount">
        <input type="hidden" id="shipping_amount_hidden">
        <input type="hidden" id="tax_amount_hidden">
    <?php else: ?>
        <input name="firstname" value="" id="input-firstname" type="hidden">
        <input name="lastname" value="" id="input-lastname" type="hidden">
        <input type="hidden" id="totalamount">
        <input type="hidden" id="shipping_amount_hidden">
        <input type="hidden" id="tax_amount_hidden">
    <?php endif; ?>

    <!-- Form Row 1: Email & Full Name -->
    <div class="modern-form-row">
        <?php if(Auth::check()): ?>
            <div class="modern-input-group" style="display: none;">
                <label for="input-email">E-Mail <span class="required">*</span></label>
                <input name="email" value="<?php echo e(auth()->user()->email); ?>" id="input-email" type="email" readonly class="modern-field readonly-input">
            </div>
            <!-- Dummy element for layout if email is hidden -->
            <div class="modern-input-group">
                <label for="input-fullname">Full Name <span class="required">*</span></label>
                <input id="input-fullname" name="fullname" type="text" placeholder="John Doe" class="modern-field" required>
            </div>
        <?php else: ?>
            <div class="modern-input-group">
                <label for="input-email">E-Mail Address <span class="required">*</span></label>
                <input name="email" id="input-email" type="email" placeholder="example@email.com" class="modern-field" required>
            </div>
            <div class="modern-input-group">
                <label for="input-fullname">Full Name <span class="required">*</span></label>
                <input id="input-fullname" name="fullname" type="text" placeholder="John Doe" class="modern-field" required>
            </div>
        <?php endif; ?>
        
        <!-- Telephone -->
        <div class="modern-input-group">
            <label for="input-telephone">Telephone <span class="required">*</span></label>
            <input id="input-telephone" name="telephone" type="tel" maxlength="10" class="modern-field" required>
        </div>
    </div>

    <!-- Form Row 2: Company & Address 1 -->
    <div class="modern-form-row">
        <div class="modern-input-group">
            <label for="input-company">Company (Optional)</label>
            <input name="company" value="" id="input-company" type="text" placeholder="Company Name" class="modern-field">
        </div>
        <div class="modern-input-group">
            <label for="input-address-1">Address Line 1 <span class="required">*</span></label>
            <input name="address_1" value="<?php echo e($userdataset ?? ($userdata->address ?? '')); ?>" id="input-address-1" type="text" placeholder="Street Address, P.O. Box" class="modern-field" required>
        </div>
    </div>

    <!-- Form Row 3: Address 2 & Postal Code -->
    <div class="modern-form-row">
        <div class="modern-input-group">
            <label for="input-address-2">Address Line 2 (Optional)</label>
            <input name="address_2" value="<?php echo e($userdataset ?? ($userData->address_two ?? '')); ?>" id="input-address-2" type="text" placeholder="Apartment, suite, unit, building, floor, etc." class="modern-field">
        </div>
        <div class="modern-input-group">
            <label for="input-postcode">Postal Code</label>
            <input name="postcode" value="<?php echo e($userdataset ?? ($userdata->zipcode ?? '')); ?>" id="input-postcode" type="text" placeholder="Postal Code" class="modern-field" required>
        </div>
    </div>

    <!-- Form Row 4: District & City -->
    <div class="modern-form-row">
        <div class="modern-input-group">
            <label for="inputdistrict">District <span class="required">*</span></label>
            <?php
                $savedDistrict = $userdataset ?? ($userdata->district ?? '');
                $savedCity = $userdataset ?? ($userdata->city ?? '');
            ?>
            <select id="inputdistrict" name="district" class="modern-field select-field" required>
                <option value="">-- Select District --</option>
                <?php $__currentLoopData = ['Ampara', 'Anuradhapura', 'Badulla', 'Batticaloa', 'Colombo', 'Galle', 'Gampaha', 'Hambantota', 'Jaffna', 'Kalutara', 'Kandy', 'Kegalle', 'Kilinochchi', 'Kurunegala', 'Mannar', 'Matale', 'Matara', 'Moneragala', 'Mullaitivu', 'Nuwara Eliya', 'Polonnaruwa', 'Puttalam', 'Ratnapura', 'Trincomalee', 'Vavuniya']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dist): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($dist); ?>" <?php echo e($savedDistrict == $dist ? 'selected' : ''); ?>><?php echo e($dist); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </div>
        <div class="modern-input-group">
            <label for="inputCity">City <span class="required">*</span></label>
            <select name="city" id="inputCity" class="modern-field select-field" required>
                <option value="">-- Select City --</option>
            </select>
            <span id="area-error" class="error-message"></span>
        </div>
    </div>

    <!-- Form Row 5: Notes -->
    <div class="modern-form-row full-width-row">
        <div class="modern-input-group">
            <label for="ordernte">Order Notes (Optional)</label>
            <textarea class="modern-field textarea-field" rows="3" name="ordernote" id="ordernte" placeholder="Notes about your order, e.g. special notes for delivery."></textarea>
        </div>
    </div>
</div>

<script>
    // Initialize Phone input
    const input = document.querySelector("#input-telephone");
    const iti = window.intlTelInput(input, {
        initialCountry: "auto",
        separateDialCode: true,
        nationalMode: false,
        geoIpLookup: function (callback) {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("lk")); // Default to Sri Lanka if geolocation fails
        },
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    $(document).ready(function () {
        var savedCity = "<?php echo e($savedCity); ?>";

        function loadCities(district, selectedCity = null) {
            var citySelect = $('#inputCity');
            if (!district) {
                citySelect.empty().append('<option value="">-- Select City --</option>');
                return;
            }

            citySelect.empty().append('<option value="">-- Loading Cities --</option>');

            $.ajax({
                url: "<?php echo e(route('get.koombiyo.cities')); ?>",
                type: "POST",
                data: {
                    _token: "<?php echo e(csrf_token()); ?>",
                    district: district
                },
                success: function (response) {
                    citySelect.empty().append('<option value="">-- Select City --</option>');
                    if (response && response.length > 0) {
                        response.forEach(function (city) {
                            var isSelected = (selectedCity && city.city_name === selectedCity) ? 'selected' : '';
                            citySelect.append('<option value="' + city.city_name + '" ' + isSelected + '>' + city.city_name + '</option>');
                        });

                        // If we had a selected city, trigger shipping calculation
                        if (selectedCity) {
                            if (typeof cal === 'function') { cal(); }
                        }
                    }
                },
                error: function () {
                    citySelect.empty().append('<option value="">-- Select City --</option>');
                }
            });
        }

        $('#inputdistrict').on('change', function () {
            loadCities($(this).val());
        });

        // Handle initial load
        var initialDistrict = $('#inputdistrict').val();
        if (initialDistrict) {
            loadCities(initialDistrict, savedCity);
        }

        $('#inputCity').on('change', function () {
            if (typeof cal === 'function') {
                cal();
            }
        });
    });
</script>
<?php /**PATH /home/amerbofz/test.americanplastics.lk/resources/views/web/home/checkout/partials/shipping_fields.blade.php ENDPATH**/ ?>