@extends('frontend.layouts.app', ['title' => 'My Address'])

@section('content')
    {{-- Address Create Modal --}}
    <div class="header-cate-model main-gambo-model modal fade" id="address_model" tabindex="-1" role="dialog">
        <div class="modal-dialog category-area" role="document">
            <div class="category-area-inner">
                <div class=" model-header cate-header">
                            <h4 class="">Add New Address</h4>
                    
                        <button type="button" class="btn-close close-modal-edit-address" data-bs-dismiss="modal" aria-label="Close">
                            <i class="uil uil-multiply"></i>
                        </button>
                 </div>
                <div class="category-model-content modal-content">
                    
                    <div class="add-address-form">
                        <div class="checout-address-step">
                            <div class="row">
                                <div class="col-lg-12">
                                    <form id="address-store-form" method="POST"
                                        action="{{ route('customer.address.store') }}" class="address_model_form">
                                        @csrf
                                        <!-- Multiple Radios (inline) -->
                                        <div class="form-group">
                                            <div class="product-radio">
                                                <ul class="product-now">
                                                    <li>
                                                        <input type="radio" id="ad1" name="type" checked
                                                            value="Home">
                                                        <label for="ad1" class="hover-btn">Home</label>
                                                    </li>
                                                    <li>
                                                        <input type="radio" id="ad2" name="type" value="Office">
                                                        <label for="ad2" class="hover-btn">Office</label>
                                                    </li>
                                                    <li>
                                                        <input type="radio" id="ad3" name="type" value="Other">
                                                        <label for="ad3" class="hover-btn">Other</label>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="address-fieldset">
                                            <div class="row">
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Name*</label>
                                                        <input id="receiver_name" name="receiver_name" type="text"
                                                            placeholder="Name" class="form-control input-md" required />
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Phone Number*</label>
                                                        <input id="receiver_phone" name="receiver_phone" type="text"
                                                            placeholder="Contact" class="form-control input-md" required />
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Email*</label>
                                                        <input id="receiver_email" name="receiver_email" type="text"
                                                            placeholder="Email" class="form-control input-md" required />
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Flat / House / Office No.*</label>
                                                        <input id="house_no" name="house_no" type="text"
                                                            placeholder="Address" class="form-control input-md" required=>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Street / Society / Office Name*</label>
                                                        <input id="street" name="society" type="text"
                                                            placeholder="Street Address" class="form-control input-md">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">City*</label>
                                                        <input id="city" name="city" type="text"
                                                            placeholder="City" class="form-control input-md" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">State*</label>
                                                        <input id="state" name="state" type="text"
                                                            placeholder="State" class="form-control input-md" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Pincode*</label>
                                                        <input id="pincode" name="pincode" type="text"
                                                            placeholder="Pincode" class="form-control input-md"
                                                            required />
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-30">
                                                        <div class="address-btns">
                                                            <button class="w-100 hover-btn">Save</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- End Address Create Modal --}}

    {{-- Address Edit Modal --}}
    <div class="header-cate-model main-gambo-model modal fade" id="edit_address_model" tabindex="-1" role="dialog">
        <div class="modal-dialog category-area" role="document">
            <div class="category-area-inner">
                <div class="modal-header cate-header">
                    <h4 class="">Update Address</h4>
                    <button type="button" class="btn-close close-modal-edit-address" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="uil uil-multiply"></i>
                    </button>
                </div>
                <div class="category-model-content modal-content">
                   
                    <div class="add-address-form">
                        <div class="checout-address-step">
                            <div class="row">
                                <div class="col-lg-12">
                                    <form id="address-edit-form" method="POST"
                                        action="{{ route('customer.address.update') }}" class="address_model_form">
                                        @csrf
                                        <!-- Multiple Radios (inline) -->
                                        <div class="form-group">
                                            <input type="hidden" name="address_id" />
                                            <div class="product-radio">
                                                <ul class="product-now">
                                                    <li>
                                                        <input type="radio" id="addd1" name="type"
                                                            value="Home">
                                                        <label for="addd1" class="hover-btn">Home</label>
                                                    </li>
                                                    <li>
                                                        <input type="radio" id="addd2" name="type"
                                                            value="Office">
                                                        <label for="addd2" class="hover-btn">Office</label>
                                                    </li>
                                                    <li>
                                                        <input type="radio" id="addd3" name="type"
                                                            value="Other">
                                                        <label for="addd3" class="hover-btn">Other</label>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="address-fieldset">
                                            <div class="row">
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Name*</label>
                                                        <input id="receiver_name" name="receiver_name" type="text"
                                                            placeholder="Name" class="form-control input-md" required />
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Phone Number*</label>
                                                        <input id="receiver_phone" name="receiver_phone" type="text"
                                                            placeholder="Contact" class="form-control input-md"
                                                            required />
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Email*</label>
                                                        <input id="receiver_email" name="receiver_email" type="text"
                                                            placeholder="Email" class="form-control input-md" required />
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Flat / House / Office No.*</label>
                                                        <input id="house_no" name="house_no" type="text"
                                                            placeholder="Address" class="form-control input-md"
                                                            required />
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Street / Society / Office
                                                            Name*</label>
                                                        <input id="street" name="society" type="text"
                                                            placeholder="Street Address" class="form-control input-md">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">City*</label>
                                                        <input id="city" name="city" type="text"
                                                            placeholder="City" class="form-control input-md" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">State*</label>
                                                        <input id="state" name="state" type="text"
                                                            placeholder="State" class="form-control input-md" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-12">
                                                    <div class="form-group mt-4">
                                                        <label class="control-label">Pincode*</label>
                                                        <input id="pincode" name="pincode" type="text"
                                                            placeholder="Pincode" class="form-control input-md"
                                                            required="">
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group mt-30">
                                                        <div class="address-btns">
                                                            <button class="w-100 hover-btn">Save</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- End Address Edit Modal --}}

    <div class="wrapper">
        @include('frontend.layouts.sidebar', ['title' => 'Address'])
        <div class="my_order_page">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-4 col-md-12">
                        <x-left-side-tabs />
                    </div>
                    <div class="col-xl-9 col-lg-8 col-md-12">
                        <div class="">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="main-title-tab main-title-tab_mobile">
                                        <h4><i class="uil uil-location-point"></i>My Address</h4>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="pdpt-bg">
                                        <!-- <div class="pdpt-title">
                                                                    <h4>My Address</h4>
                                                                </div> -->
                                        <div class="address-body">
                                            <a href='#' class="" data-bs-toggle="modal"
                                                data-bs-target="#address_model"><button class="hover-btn">Add New
                                                    Address</button></a>
                                            @if ($addresses->isNotEmpty())
                                                @foreach ($addresses as $address)
                                                    <div class="address-item address_page">
                                                        <div class="address-icon1">
                                                            <i class="uil uil-map-marker"></i>
                                                        </div>
                                                        <div class="address-dt-all">
                                                            <h4>{{ $address->type }}</h4>
                                                            <p>{{ $address->house_no }},{{ $address->society }},
                                                                {{ $address->state }},
                                                                {{ $address->city }},{{ $address->pincode }}</p>
                                                            <ul class="action-btns">
                                                                <li>
                                                                    <a href='#' class="action-btn edit-address"
                                                                        data-address-id="{{ $address->uuid }}"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#edit_address_model"><i
                                                                            class="uil uil-edit"></i></a>
                                                                </li>
                                                                <li>
                                                                    <a href="{{ route('customer.address.delete', $address->uuid) }}"
                                                                        class="action-btn"><i
                                                                            class="uil uil-trash-alt"></i></a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <h2 class="mt-2">No Addresses Found</h2>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
        <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
        {!! JsValidator::formRequest('App\Http\Requests\Frontend\Address\AddressStoreRequest', '#address-store-form') !!}
        {!! JsValidator::formRequest('App\Http\Requests\Frontend\Address\AddressUpdateRequest', '#address-edit-form') !!}
        <script>
            $(document).on('click', '.edit-address', function() {
                var address_id = $(this).data('address-id');
                $.ajax({
                    url: '{{ route('customer.address.edit') }}',
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    data: {
                        address_id: address_id
                    },
                    success: function(response) {
                        var address = response.address;
                        console.log(address);
                        $('#address-edit-form input[name="receiver_name"]').val(address.receiver_name);
                        $('#address-edit-form input[name="receiver_phone"]').val(address.receiver_phone);
                        $('#address-edit-form input[name="receiver_email"]').val(address.receiver_email);
                        $('#address-edit-form input[name="email"]').val(address.receiver_email);
                        $('#address-edit-form input[name="house_no"]').val(address.house_no);
                        $('#address-edit-form input[name="society"]').val(address.society);
                        $('#address-edit-form input[name="city"]').val(address.city);
                        $('#address-edit-form input[name="state"]').val(address.state);
                        $('#address-edit-form input[name="pincode"]').val(address.pincode);
                        $('#address-edit-form input[name="address_id"]').val(address.uuid);
                        $('#address-edit-form input[name="type"][value="' + address.type + '"]').prop(
                            'checked', true);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });
        </script>
    @endpush
@endsection