@extends('layouts.userdashboard')
@section('content')

    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class=" pb-2">
                            <div class="inner-bg table-responsive">
                                <div class="element-title mb-2 d-flex justify-content-between align-items-center">
                                    <h4 class="mb-4">Saved Addresses</h4>
                                    <button type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                                            data-target="#addNewAddress">Add New Address</button>
                                </div>
                                <table class="cart-table table table-striped table-hover table-bordered" width="100%" id="example">
                                    <thead class="table-dark">
                                    <tr>
                                        <th>S.No.</th>
                                        <th>Name</th>
                                        <th>Phone</th>
                                        <th>Address</th>
                                        <th>City</th>
                                        <th>State</th>
                                        <th>Locality</th>
                                        <th>Pin code</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($addressess as $address)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ ($address->firstname) . '' . !empty($address->lastname)?($address->lastname):"" }}</a></td>
                                            <td>{{ $address->phone }}</td>
                                            <td>{{ $address->address }}</td>
                                            <td>{{ $address->city }}</td>
                                            <td>{{ $address->state }}</td>
                                            <td>{{ $address->locality }}</td>
                                            <td>{{ $address->pincode }}</td>
                                            <td>
                                                <div class="d-flex gap-2 align-items-center">
                                                    <button type="button" data-toggle="modal"
                                                            data-target="#editAddressModal-{{ $address->id }}"
                                                            class="btn btn-sm btn-primary">Edit</button>
                                                    <form class="mb-0" method="POST" action="{{ route('address.destroy', $address) }}" class="d-inline" onsubmit="return confirm('Are you sure?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" name="shipaddress_id" value="{{ $address->id }}" />
                                                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center">No Address Found</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    <!-- Area -->

                </div>
            </div>

        </div>

        <!-- Content Row -->
    </div>

@endsection

@if($addressess->count())
    @foreach($addressess as $address)
        <div class="modal fade" id="editAddressModal-{{ $address->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <form method="POST" action="{{ route('address.store') }}">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Edit
                                Address</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="p-2">
                                <input type="hidden" name="address_id" value="{{ $address->id }}"/>
                                <div class="row">
                                    <h5>Contact information</h5>
                                    <div class="col-md-12 col-lg-12 form-outline p-2">
                                        <label>Mobile No.<span style="color:red;">*</span></label>
                                        <input type="tel" name="phone" id="phone" placeholder="Mobile No." class="form-control2" value="{{ $address->phone }}" required>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <h5>Shipping address</h5>
                                    <div class="col-md-12 col-lg-6 form-outline p-2">
                                        <label>First Name<span style="color:red;">*</span></label>
                                        <input type="text" name="first_name" id="first_name" placeholder="First Name" class="form-control2" autocomplete="first-name" value="{{ $address->firstname }}" required>
                                    </div>

                                    <div class="col-md-12 col-lg-6 form-outline p-2">
                                        <label>Last Name<span style="color:red;">*</span></label>
                                        <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="form-control2" autocomplete="last-name" value="{{ $address->lastname }}" required>
                                    </div>

                                    <div class="col-md-12 col-lg-12 form-outline p-2">
                                        <label>Address<span style="color:red;">*</span></label>
                                        <input type="text" name="address" id="address" placeholder="Address" autocomplete="street-address" class="form-control2" value="{{ $address->address }}" required>
                                    </div>

                                    <div class="col-md-12 col-lg-4 form-outline p-2">
                                        <label>Zip<span style="color:red;">*</span></label>
                                        <input type="text" name="pincode" id="address_pincode" placeholder="Zip"
                                               class="form-control2 pincode-input" value="{{ $address->pincode }}" required>
                                        <p id="pin_code_error" style="color:red;"></p>
                                    </div>

                                    <div class="col-md-12 col-lg-8 form-outline p-2">
                                        <label>Locality</label>
                                        <input type="text" name="locality" id="address_locality" placeholder="Apartment, suite, etc. (optional)" class="form-control2" value="{{ $address->locality }}" required>
                                    </div>

                                    <div class="col-md-12 col-lg-4 form-outline p-2">
                                        <label>City<span style="color:red;">*</span></label>
                                        <input type="text" name="city" id="address_city" placeholder="City" class="form-control2" value="{{ $address->city }}" required>
                                    </div>

                                    <div class="col-md-12 col-lg-4 form-outline p-2">
                                        <label>State<span style="color:red;">*</span></label>
                                        <input type="text" name="state" id="address_state" placeholder="State" class="form-control2" value="{{ $address->state }}" required>
                                    </div>

                                    <div class="col-md-12 col-lg-4 form-outline p-2">
                                        <label>Country<span style="color:red;">*</span></label>
                                        <input type="text" name="country" id="address_country" placeholder="Country" class="form-control2" value="{{ $address->country }}" required>
                                    </div>

                                </div>
                                {{-- <div class="form-check col-12 mt-3">
                                                  <input class="form-check-input" type="checkbox" value="1" name="same" id="flexCheckChecked" checked>
                                                  <label class="form-check-label" for="flexCheckChecked"> Billing Address Same as Shipping Address</label>
                                                </div> --}}


                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-pink" style="background: #a9788e;" data-dismiss="modal">
                                Close
                            </button>
                            <button class="btn-pink">Update Address</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endif

<div class="modal fade" id="addNewAddress" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" action="{{ route('address.store') }}">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Address</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="p-2">
                        <div class="row">
                            <h5>Contact information</h5>
                            <div class="col-md-12 col-lg-12 form-outline p-2">
                                <label>Mobile No.<span style="color:red;">*</span></label>
                                <input type="tel" name="phone" id="phone" placeholder="Mobile No." class="form-control2" required>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <h5>Shipping address</h5>
                            <div class="col-md-12 col-lg-6 form-outline p-2">
                                <label>First Name<span style="color:red;">*</span></label>
                                <input type="text" name="first_name" id="first_name" placeholder="First Name"
                                       class="form-control2" autocomplete="first-name" required>
                            </div>

                            <div class="col-md-12 col-lg-6 form-outline p-2">
                                <label>Last Name<span style="color:red;">*</span></label>
                                <input type="text" name="last_name" id="last_name" placeholder="Last Name"
                                       class="form-control2" autocomplete="last-name" required>
                            </div>

                            <div class="col-md-12 col-lg-12 form-outline p-2">
                                <label>Address<span style="color:red;">*</span></label>
                                <input type="text" name="address" id="address" placeholder="Address"
                                       autocomplete="street-address" class="form-control2" required>
                            </div>

                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                <label>Zip<span style="color:red;">*</span></label>
                                <input type="text" name="pincode" id="address_pincode" placeholder="Zip"
                                       class="form-control2 pincode-input" required>
                                <p id="pin_code_error" style="color:red;"></p>
                            </div>

                            <div class="col-md-12 col-lg-8 form-outline p-2">
                                <label>Locality</label>
                                <input type="text" name="locality" id="address_locality"
                                       placeholder="Apartment, suite, etc. (optional)" class="form-control2"
                                       required>
                            </div>

                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                <label>City<span style="color:red;">*</span></label>
                                <input type="text" name="city" id="address_city" placeholder="City"
                                       class="form-control2" required>
                            </div>

                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                <label>State<span style="color:red;">*</span></label>
                                <input type="text" name="state" id="address_state" placeholder="State"
                                       class="form-control2" required>
                            </div>

                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                <label>Country<span style="color:red;">*</span></label>
                                <input type="text" name="country" id="address_country" placeholder="Country"
                                       class="form-control2" required>
                            </div>

                        </div>
                        {{-- <div class="form-check col-12 mt-3">
                                          <input class="form-check-input" type="checkbox" value="1" name="same" id="flexCheckChecked" checked>
                                          <label class="form-check-label" for="flexCheckChecked"> Billing Address Same as Shipping Address</label>
                                        </div> --}}


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-pink" style="background: #a9788e;" data-dismiss="modal">
                        Close
                    </button>
                    <button class="btn-pink">Add Address</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js" defer></script>

<script>

    $(document).ready(function() {
        $('#example').DataTable( {
            dom: 'Bfrtip',
            "order": [[ 1, "desc" ]], //or asc
       "columnDefs" : [{"targets":3, "type":"date-eu"}],
            buttons: [
                'excel',
            ]
        } );
    });

    document.addEventListener('DOMContentLoaded', (event) => {
        console.log("DOM Loaded");
        let pincodeInput = document.querySelectorAll('.pincode-input');
        pincodeInput.forEach((input) => {
            input.addEventListener('change', updateAddressByPinCode);
        });

        async function updateAddressByPinCode(event) {
            const pinCodeElement = event.target;
            const PINCode = pinCodeElement.value;

            const formElement = pinCodeElement.closest('form');

            const pinErrorElement = formElement.querySelector('#pin_code_error');
            pinErrorElement.innerText = '';

            if (PINCode === '') {
                pinErrorElement.innerText = 'Please enter a valid PIN Code.';
            }

            if (PINCode.length < 6) {
                pinErrorElement.innerText = 'Please enter a valid PIN Code.';
            }

            // Find the submit button and disable it
            let submitBtn = formElement.querySelector('button[type="submit"]');
            if (!submitBtn) {
                submitBtn = formElement.querySelector('input[type="submit"]');
            }
            if (!submitBtn) {
                submitBtn = formElement.querySelector('button:not([type])');
            }

            if (submitBtn) {
                submitBtn.setAttribute('disabled', 'disabled');
            }

            try {
                const response = await fetch('https://api.postalpincode.in/pincode/' + PINCode);
                const data = await response.json();

                const result = data[0];

                if (result.Status === 'Success') {
                    const {
                        State
                        , Division
                        , Name
                        , District
                        , Country
                        , } = result.PostOffice[0];

                    formElement.querySelector('input[name="city"]').value = District;
                    formElement.querySelector('input[name="state"]').value = State;
                    formElement.querySelector('input[name="country"]').value = Country;
                    formElement.querySelector('input[name="locality"]').value = `${Name}, ${Division}`;

                    pinErrorElement.innerText = '';
                    if(submitBtn) {
                        submitBtn.removeAttribute('disabled');
                    }
                } else {
                    pinErrorElement.innerText = result.Message;
                    formElement.querySelector('input[name="city"]').value = '';
                    formElement.querySelector('input[name="state"]').value = '';
                    formElement.querySelector('input[name="locality"]').value = '';
                    formElement.querySelector('input[name="country"]').value = '';
                }

            } catch (error) {
                throw error;
                pinErrorElement.innerText = 'Something went wrong, Please try again';
            }
        }
    })
</script>