@extends('LandingPage.Layouts.master')
@section('content')

    <div class="checkout-block md:py-20 py-10">
        <div class="container">
            <div class="content-main flex max-lg:flex-col-reverse gap-y-10 justify-between">
                <div class="left lg:w-1/2">

                    <div class="information mt-5">
                        <div class="heading5">Information</div>
                        <div class="form-checkout mt-5">
                            <form action="{{ route('landing.addresses.store') }}" method="POST"   enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ auth()->id() }}">

                                <div class="grid sm:grid-cols-2 gap-4 gap-y-5 flex-wrap">
                                    <div class="">
                                        <input
                                            class="border-line px-4 py-3 w-full rounded-lg"
                                            id="firstName"
                                            name="first_name"
                                            type="text"
                                            placeholder="First Name *"
                                            value="{{ Auth::user()->name ?? '' }}"
                                            required
                                        />
                                    </div>

                                    <div class="">
                                        <input
                                            class="border-line px-4 py-3 w-full rounded-lg"
                                            id="lastName"
                                            name="last_name"
                                            type="text"
                                            placeholder="Last Name *"
                                            value="{{ Auth::user()->last_name ?? '' }}"
                                            required
                                        />
                                    </div>

                                    <div class="">
                                        <input
                                            class="border-line px-4 py-3 w-full rounded-lg"
                                            id="email"
                                            name="email"
                                            type="email"
                                            placeholder="Email Address *"
                                            value="{{ Auth::user()->email ?? '' }}"
                                            required
                                        />
                                    </div>

                                    <div class="">
                                        <input
                                            class="border-line px-4 py-3 w-full rounded-lg"
                                            id="phoneNumber"
                                            name="phone"
                                            type="text"
                                        placeholder="Phone Number *"
                                        value="{{ Auth::user()->phone ?? '' }}"
                                        required
                                        />
                                    </div>



                                @if(count($addresses) >0)
                                        <div class="col-span-full">
                                            <div class="heading5">Choose Your Address</div>
                                        </div>
                                        <div class="list-address mt-5">
                                            <div class="grid sm:grid-cols-2 gap-4 gap-y-5 flex-wrap">
                                                @foreach($addresses as $address)
                                                    <div class="type bg-surface p-5 border border-line rounded-lg">
                                                        <input class="cursor-pointer" @if($loop->first) checked @endif type="radio" id="{{$address->id}}"
                                                               value="{{$address->id}}" name="address_id"/>
                                                        <label class="text-button pl-2 cursor-pointer"
                                                               for="{{$address->id}}">{{$address->address_name}}</label>
                                                    </div>
                                                @endforeach

                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-span-full">
                                        <div class="heading5">Add New Address</div>
                                    </div>


                                        <div class="col-span-full select-block">
                                            <select class="border border-line px-4 py-3 w-full rounded-lg" id="country" name="country_id">
                                                <option value="default">Choose Country/Region</option>
                                                @foreach($countries as $country)
                                                    <option value="{{$country->id}}">{{$country->name}}</option>
                                                @endforeach
                                            </select>
                                            <i class="ph ph-caret-down arrow-down"></i>
                                        </div>

                                        <div id="state-section" >
                                            <select class="border border-line px-4 py-3 w-full rounded-lg" id="state" name="state_id">
                                                <option value="default">Choose State/Region</option>
                                                <!-- States will be populated dynamically -->
                                            </select>
                                        </div>

                                        <div id="city-section" >
                                            <select class="border border-line px-4 py-3 w-full rounded-lg" id="city" name="city_id">
                                                <option value="default">Choose City/Town</option>
                                                <!-- Cities will be populated dynamically -->
                                            </select>
                                        </div>

                                        <div class="">
                                            <input class="border-line px-4 py-3 w-full rounded-lg" id="postal" type="text" name="address_name"
                                                   placeholder="Address name *" required/>
                                        </div>

                                        <div class="col-span-full">
                                            <input class="border-line px-4 py-3 w-full rounded-lg" id="postal" type="text" name="address"
                                                   placeholder="Address *" required/>
                                        </div>

                                        <div class="">
                                            <input class="border-line px-4 py-3 w-full rounded-lg" id="postal" type="text" name="postal_code"
                                                   placeholder="Postal Code *" required/>
                                        </div>

                                        <div class="col-span-full">
                                        <textarea class="border border-line px-4 py-3 w-full rounded-lg" id="note"
                                                  name="note" placeholder="Write note..."></textarea>
                                        </div>

                                        <div class="block-button md:mt-10 mt-6">
                                            <button class="button-main w-full">Add New Address</button>
                                        </div>

                                </div>
                                <div class="payment-block md:mt-10 mt-6">
                                    <div class="heading5">Choose payment Option:</div>
                                    <div class="list-payment mt-5">
                                        <div class="type bg-surface p-5 border border-line rounded-lg">
                                            <input class="cursor-pointer" type="radio" id="credit" name="payment"/>
                                            <label class="text-button pl-2 cursor-pointer" for="credit">Credit
                                                Card</label>
                                            <div class="infor">
                                                <div class="text-on-surface-variant1 pt-4">Make your payment directly
                                                    into our bank account. Your order will not be shipped until the
                                                    funds have cleared in our account.
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 mt-3">
                                                        <label for="cardNumberCredit">Card Numbers</label>
                                                        <input
                                                            class="cursor-pointer border-line px-4 py-3 w-full rounded mt-2"
                                                            type="text" id="cardNumberCredit"
                                                            placeholder="ex.1234567290"/>
                                                    </div>
                                                    <div class="mt-3">
                                                        <label for="dateCredit">Date</label>
                                                        <input class="border-line px-4 py-3 w-full rounded mt-2"
                                                               type="date" id="dateCredit" name="date"/>
                                                    </div>
                                                    <div class="mt-3">
                                                        <label for="ccvCredit">CCV</label>
                                                        <input
                                                            class="cursor-pointer border-line px-4 py-3 w-full rounded mt-2"
                                                            type="text" id="ccvCredit" placeholder="****"/>
                                                    </div>
                                                </div>
                                                <div class="flex items-center gap-2 mt-3">
                                                    <input type="checkbox" id="saveCredit" name="save"/>
                                                    <label class="text-button" for="saveCredit">Save Card
                                                        Details</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="type bg-surface p-5 border border-line rounded-lg mt-5">
                                            <input class="cursor-pointer" type="radio" id="delivery" name="payment"/>
                                            <label class="text-button pl-2 cursor-pointer" for="delivery">Cash on
                                                delivery</label>
                                            <div class="infor">
                                                <div class="text-on-surface-variant1 pt-4">Make your payment directly
                                                    into our bank account. Your order will not be shipped until the
                                                    funds have cleared in our account.
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 mt-3">
                                                        <label for="cardNumberDelivery">Card Numbers</label>
                                                        <input
                                                            class="cursor-pointer border-line px-4 py-3 w-full rounded mt-2"
                                                            type="text" id="cardNumberDelivery"
                                                            placeholder="ex.1234567290"/>
                                                    </div>
                                                    <div class="mt-3">
                                                        <label for="dateDelivery">Date</label>
                                                        <input class="border-line px-4 py-3 w-full rounded mt-2"
                                                               type="date" id="dateDelivery" name="date"/>
                                                    </div>
                                                    <div class="mt-3">
                                                        <label for="ccvDelivery">CCV</label>
                                                        <input
                                                            class="cursor-pointer border-line px-4 py-3 w-full rounded mt-2"
                                                            type="text" id="ccvDelivery" placeholder="****"/>
                                                    </div>
                                                </div>
                                                <div class="flex items-center gap-2 mt-3">
                                                    <input type="checkbox" id="saveDelivery" name="save"/>
                                                    <label class="text-button" for="saveDelivery">Save Card
                                                        Details</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="type bg-surface p-5 border border-line rounded-lg mt-5">
                                            <input class="cursor-pointer" type="radio" id="apple" name="payment"/>
                                            <label class="text-button pl-2 cursor-pointer" for="apple">Apple Pay</label>
                                            <div class="infor">
                                                <div class="text-on-surface-variant1 pt-4">Make your payment directly
                                                    into our bank account. Your order will not be shipped until the
                                                    funds have cleared in our account.
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 mt-3">
                                                        <label for="cardNumberApple">Card Numbers</label>
                                                        <input
                                                            class="cursor-pointer border-line px-4 py-3 w-full rounded mt-2"
                                                            type="text" id="cardNumberApple"
                                                            placeholder="ex.1234567290"/>
                                                    </div>
                                                    <div class="mt-3">
                                                        <label for="dateApple">Date</label>
                                                        <input class="border-line px-4 py-3 w-full rounded mt-2"
                                                               type="date" id="dateApple" name="date"/>
                                                    </div>
                                                    <div class="mt-3">
                                                        <label for="ccvApple">CCV</label>
                                                        <input
                                                            class="cursor-pointer border-line px-4 py-3 w-full rounded mt-2"
                                                            type="text" id="ccvApple" placeholder="****"/>
                                                    </div>
                                                </div>
                                                <div class="flex items-center gap-2 mt-3">
                                                    <input type="checkbox" id="saveApple" name="save"/>
                                                    <label class="text-button" for="saveApple">Save Card Details</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="type bg-surface p-5 border border-line rounded-lg mt-5">
                                            <input class="cursor-pointer" type="radio" id="paypal" name="payment"/>
                                            <label class="text-button pl-2 cursor-pointer" for="paypal">PayPal</label>
                                            <div class="infor">
                                                <div class="text-on-surface-variant1 pt-4">Make your payment directly
                                                    into our bank account. Your order will not be shipped until the
                                                    funds have cleared in our account.
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 mt-3">
                                                        <label for="cardNumberPaypal">Card Numbers</label>
                                                        <input
                                                            class="cursor-pointer border-line px-4 py-3 w-full rounded mt-2"
                                                            type="text" id="cardNumberPaypal"
                                                            placeholder="ex.1234567290"/>
                                                    </div>
                                                    <div class="mt-3">
                                                        <label for="datePaypal">Date</label>
                                                        <input class="border-line px-4 py-3 w-full rounded mt-2"
                                                               type="date" id="datePaypal" name="date"/>
                                                    </div>
                                                    <div class="mt-3">
                                                        <label for="ccvPaypal">CCV</label>
                                                        <input
                                                            class="cursor-pointer border-line px-4 py-3 w-full rounded mt-2"
                                                            type="text" id="ccvPaypal" placeholder="****"/>
                                                    </div>
                                                </div>
                                                <div class="flex items-center gap-2 mt-3">
                                                    <input type="checkbox" id="savePaypal" name="save"/>
                                                    <label class="text-button" for="savePaypal">Save Card
                                                        Details</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block-button md:mt-10 mt-6">
                                    <button class="button-main w-full">Payment</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="right lg:w-5/12">
                    <div class="checkout-block">
                        <div class="heading5 pb-3">Your Order</div>
                        <div class="list-product-checkout"></div>
                        <div class="discount-block py-5 flex justify-between border-b border-line">
                            <div class="text-title">Discounts</div>
                            <div class="text-title">-$<span class="discount">0</span><span>.00</span></div>
                        </div>
                        <div class="ship-block py-5 flex justify-between border-b border-line">
                            <div class="text-title">Shipping</div>
                            <div class="text-title">Free</div>
                        </div>
                        <div class="total-cart-block pt-5 flex justify-between">
                            <div class="heading5">Total</div>
                            <div class="heading5 total-cart">$0.00</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script>
        // Initialize country selection
        document.getElementById('country').addEventListener('change', function() {
            const countryId = this.value;

            // Show the state dropdown only if a valid country is selected
            if (countryId !== 'default') {
                fetchStatesByCountry(countryId);
            } else {
                document.getElementById('state-section').classList.add('hidden');
                document.getElementById('city-section').classList.add('hidden');
                document.getElementById('state').innerHTML = ''; // Clear states
                document.getElementById('city').innerHTML = ''; // Clear cities
            }
        });

        // Fetch states based on the selected country (AJAX)
        function fetchStatesByCountry(countryId) {
            fetch(`/get-states/${countryId}`)  // Make an AJAX request to the server
                .then(response => response.json())  // Parse the JSON response
                .then(data => {
                    const stateSelect = document.getElementById('state');
                    stateSelect.innerHTML = '<option value="default">{{translate('Choose State/Region')}}</option>'; // Reset state options

                    // Populate the state dropdown
                    data.states.forEach(state => {
                        const option = document.createElement('option');
                        option.value = state.id;
                        option.textContent = state.name;
                        stateSelect.appendChild(option);
                    });

                    // Show the state dropdown and hide city dropdown
                    document.getElementById('state-section').classList.remove('hidden');
                    document.getElementById('city-section').classList.add('hidden');
                })
                .catch(error => console.error('Error fetching states:', error));
        }

        // Triggered when a state is selected
        document.getElementById('state').addEventListener('change', function() {
            const stateId = this.value;

            // Show the city dropdown only if a valid state is selected
            if (stateId !== 'default') {
                fetchCitiesByState(stateId);
            } else {
                document.getElementById('city-section').classList.add('hidden');
                document.getElementById('city').innerHTML = ''; // Clear cities
            }
        });

        // Fetch cities based on the selected state (AJAX)
        function fetchCitiesByState(stateId) {
            fetch(`/get-cities/${stateId}`)  // Make an AJAX request to the server
                .then(response => response.json())  // Parse the JSON response
                .then(data => {
                    const citySelect = document.getElementById('city');
                    citySelect.innerHTML = '<option value="default">Choose City/Town</option>'; // Reset city options

                    // Populate the city dropdown
                    data.cities.forEach(city => {
                        const option = document.createElement('option');
                        option.value = city.id;
                        option.textContent = city.name;
                        citySelect.appendChild(option);
                    });

                    // Show the city dropdown section
                    document.getElementById('city-section').classList.remove('hidden');
                })
                .catch(error => console.error('Error fetching cities:', error));
        }


        document.addEventListener('DOMContentLoaded', function() {
            const countrySelect = document.getElementById('country');
            const addressRadios = document.querySelectorAll('input[name="address_id"]');

            function updateCountryRequirement() {
                const addressSelected = Array.from(addressRadios).some(radio => radio.checked);

                if (addressSelected) {
                    countrySelect.removeAttribute('required');
                } else {
                    countrySelect.setAttribute('required', 'required');
                }
            }

            // Check when user clicks on any address
            addressRadios.forEach(radio => {
                radio.addEventListener('change', updateCountryRequirement);
            });
            updateCountryRequirement();
        });

    </script>
@endsection