@extends('layouts.app_rest')
@section('content')
    <link rel="stylesheet" href="{{ asset('AdminLTE/plugins/DataTables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('bootstrap/css/boot.min.css') }}">
    <style>
        #facility_table_filter label {
            font-size: 0
        }

        #facility_table_filter label input::after::placeholder {
            content: "Enter your number" !important;
        }

        .button::before {
            content: "New Button Title";
        }

        /* Assuming the input has a fixed width */
        div.dt-container .dt-search input {
            background-image: url('https://cdn3.iconfinder.com/data/icons/feather-5/24/search-512.png');
            background-size: 18px;
            background-repeat: no-repeat;
            background-position: left 10px center;
            /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); */
            padding: 10px 10px 3px 30px !important;
            border-radius: 20px !important;
            height: 80%;
        }

        div.dt-container .dt-paging .dt-paging-button.current {
            color: white !important;
        }

        .dt-buttons .buttons-html5,
        .buttons-collection,
        .buttons-print {
            border-radius: 5px !important;
            background-color: transparent !important;
            border: 1px solid skyblue !important;
            background: none !important;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }

        .dt-buttons button:hover {
            background-color: skyblue !important;
            color: white !important;
        }

        button.dt-paging-button.current {
            border-radius: 30px !important;
            background-color: skyblue !important;
            border: none !important;
            color: white !important;
        }

        span.dt-paging-button {
            border-radius: 30px !important;
            background-color: skyblue !important;
            border: none !important;
            color: white !important;
        }

        a.dt-paging-button {
            border-radius: 30px !important;
            background-color: transparent !important;
            border: none !important;
            color: black !important;
        }

        .custom-table thead tr {
            /* background-color: rgb(235, 235, 235); */
            /* border: 1px solid lightgray; */
            font-family: Arial, Helvetica, sans-serif;

        }

        .custom-table>tbody>tr:nth-of-type(odd) {
            background-color: #f9f9f9
        }

        .custom-table>tbody>tr:hover {
            background-color: #f5f5f5
        }

        #example_wrapper table.dataTable tbody td {
            border: none !important;
            /* background-color:white  !important; */
        }

        .custom-table tbody tr {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }

        .dt-info {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .total-details .bottom {
            display: flex;
            align-items: center !important;
            margin: auto;
            gap: 10px;
            height: 40px;
            font-weight: bold;
        }

        .total-details .bottom h2 {
            margin: 0;
            font-size: 40px;
        }

        .total-details p {
            font-size: 12px;
        }

        div.dt-container .dt-paging .dt-paging-button.last {
            font-size: 24px;
            font-weight: bold;
        }

        div.dt-container .dt-paging .dt-paging-button.next {
            font-size: 24px;
            font-weight: bold;
        }

        div.dt-container .dt-paging .dt-paging-button.previous {
            font-size: 24px;
            font-weight: bold;
        }

        div.dt-container .dt-paging .dt-paging-button.first {
            font-size: 24px;
            font-weight: bold;
        }

        table.dataTable tbody tr:hover {
            background-color: #87ceeb !important;
            color: white;
        }

        .pagination {
            font-size: 12px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 15px !important;
        }

        .pagination .paginate_button a {
            border-radius: 50%;
        }

        .pagination .paginate_button .previous {
            border: none;
            background-color: red;
        }

        .pagination>li:first-child>a,
        .pagination>li:first-child>span,
        .pagination>li:last-child>a,
        .pagination>li:last-child>span {
            border: none !important;
            background-color: transparent;
        }

        .dt-buttons .btn-info {
            color: black;
        }

        .center {
            text-align: center !important;
        }

        i.delete-button.disabled-color {
            color: #a9a9a9;
            cursor: not-allowed;
        }

        i.delete-button.active-color {
            color: #E7515A;
        }
    </style>
    <div class="animate__animated p-6" :class="[$store.app.animation]">
        <div>
            <ul class="flex space-x-2 rtl:space-x-reverse">
                <li>
                    <a href="{{ action('Auth\LoginController@dashboard') }}"
                        class="text-primary hover:underline">Dashboard</a>
                </li>
                <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
                    <span>Customers</span>
                </li>
            </ul>
            <div class="grid grid-cols-1 gap-4 pt-5">
                <div x-data="categoryList">
                    <div class="panel border-[#e0e6ed] px-0 dark:border-[#1b2e4b]">
                        <div class="px-5" x:data="categoryList">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="mb-5 flex items-center gap-2">

                                    @can('contact.create')
                                        <button class="btn btn-success gap-2" @click="openModal = true">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                            </svg>
                                            Add New
                                        </button>
                                    @endcan
                                    {{-- @can('contact.update')
                                        <button class="btn btn-primary gap-2 edit-btn" style="display: none;"
                                            @click="editItem()">
                                            <i class="fa fa-edit"></i>
                                            Edit
                                        </button>
                                    @endcan
                                    @can('contact.view')
                                        <button class="btn btn-info gap-2 view-btn" style="display:none;color:#fff;"
                                            @click="viewItem()">
                                            <i class="fa fa-eye"></i>
                                            View
                                        </button>
                                    @endcan --}}

                                    <div x-show="openModal"
                                        class="fixed inset-0 z-[999] hidden overflow-y-auto bg-[black]/60"
                                        :class="openModal && '!block'">
                                        <div class="flex min-h-screen items-center justify-center"
                                            @click.self="openModal = false">
                                            <div x-transition x-transition.duration.300
                                                class="panel my-8 w-[90%] max-w-lg overflow-hidden rounded-lg border-0 p-0 md:w-full shadow-lg">
                                                <button type="button"
                                                    class="absolute top-4 text-white-dark hover:text-dark ltr:right-4 rtl:left-4"
                                                    @click="openModal = false">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                                                        class="h-6 w-6">
                                                        <line x1="18" y1="6" x2="6" y2="18">
                                                        </line>
                                                        <line x1="6" y1="6" x2="18" y2="18">
                                                        </line>
                                                    </svg>
                                                </button>
                                                <h3
                                                    class="bg-[#fbfbfb] py-2 text-lg font-medium ltr:pl-5 ltr:pr-[50px] rtl:pr-5 rtl:pl-[50px] dark:bg-[#121c2c]">
                                                    Add Customer
                                                </h3>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="customer_add_form"
                                                        class="needs-validation" method="POST"
                                                        action="{{ route('contact.store') }}">
                                                        @csrf

                                                        <div class="flex items-center w-full py-5">
                                                            <div class="flex items-center justify-center w-1/3">
                                                                <label for="dropzone-file-left"
                                                                    class="flex flex-col items-center justify-center w-full h-full border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                                                                    <div
                                                                        class="flex flex-col items-center justify-center pt-5 pb-6 mb-4 mt-4">
                                                                        <svg id="default-icon"
                                                                            class="w-5 h-5 text-gray-500 dark:text-white"
                                                                            aria-hidden="true"
                                                                            xmlns="http://www.w3.org/2000/svg"
                                                                            width="24" height="24" fill="none"
                                                                            viewBox="0 0 24 24">
                                                                            <path stroke="currentColor"
                                                                                stroke-linecap="round"
                                                                                stroke-linejoin="round" stroke-width="2"
                                                                                d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />

                                                                        </svg>
                                                                        <img id="selected-image" src=""
                                                                            alt="Selected Image"
                                                                            class="hidden w-full h-full object-cover rounded-lg" />
                                                                        <p id="default-text"
                                                                            class="mb-3 py-1 text-sm text-gray-500 dark:text-gray-400">
                                                                            <span class="font-semibold">Profile
                                                                                Photo</span>
                                                                        </p>
                                                                    </div>
                                                                </label>
                                                            </div>

                                                            <div class="ml-4">
                                                                <label for="image"
                                                                    class="btn btn-primary inline-flex items-center px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer ltr:ml-4 rtl:mr-4">
                                                                    Add Image
                                                                </label>
                                                                <input type="file" id="image" name="image"
                                                                    class="hidden" style="display: none;" />
                                                            </div>
                                                        </div>


                                                        {{-- <div
                                                            class="customer-types flex flex-col sm:flex-row sm:items-center gap-2 mb-5">
                                                            <div>
                                                                <label>
                                                                    <input type="radio" name="cusType" value="default"
                                                                        x-model="selectedCusType" checked
                                                                        @click="change()">
                                                                    Default
                                                                </label>
                                                            </div>
                                                            <div>
                                                                <label>
                                                                    <input type="radio" name="cusType" value="hotel"
                                                                        x-model="selectedCusType" @click="change()">
                                                                    Hotel
                                                                </label>
                                                            </div>
                                                        </div> --}}


                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                                            <div class="mb-5">
                                                                <label for="code">Short Code</label>
                                                                <input id="create_code" type="text"
                                                                    class="form-input w-full" name="create_code"
                                                                    value="{{ isset($contact) ? $contact->code : '' }}" />
                                                            </div>
                                                            <div class="mb-5">
                                                                <label for="firstName">First Name *</label>
                                                                <input id="firstName" type="text"
                                                                    class="form-input w-full" name="first_name"
                                                                    required />
                                                            </div>
                                                            <div class="mb-5">
                                                                <label for="lastName">Last Name</label>
                                                                <input id="lastName" type="text"
                                                                    class="form-input w-full" name="last_name" />
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                                            <div>
                                                                <label for="mobileNo">Mobile Number *</label>
                                                                <input type="text" id="mobileNo"
                                                                    class="form-input w-full" maxlength="10"
                                                                    pattern="\d{10}" name="mobile_no" required />
                                                            </div>
                                                            <div>
                                                                <label for="email">Email *</label>
                                                                <input id="email" type="email"
                                                                    class="form-input w-full" name="email" required />
                                                            </div>
                                                            <div>
                                                                <label for="telephoneNo">Telephone Number</label>
                                                                <input type="text" id="telephoneNo"
                                                                    class="form-input w-full" maxlength="10"
                                                                    pattern="\d{10}" name="telephone_no"
                                                                    title="Please enter exactly 10 digits" />
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-1">
                                                            <div class="mt-3">
                                                                <label for="address1">Address 1</label>
                                                                <input id="address1" type="text"
                                                                    class="form-input w-full" name="address_one" />
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="address2">Address 2</label>
                                                                <input id="address2" type="text"
                                                                    class="form-input w-full" name="address_two" />
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                                            <div>
                                                                <label for="city">City</label>
                                                                <input id="city" type="text"
                                                                    class="form-input w-full" name="city" />
                                                            </div>
                                                            <div>
                                                                <label for="state">State</label>
                                                                <input id="state" type="text"
                                                                    class="form-input w-full" name="state" />
                                                            </div>
                                                            <div>
                                                                <label for="zipcode">Zip Code</label>
                                                                <input id="zipcode" type="text"
                                                                    class="form-input w-full" name="zip_code" />
                                                            </div>
                                                            <div>
                                                                <label for="country">Country</label>
                                                                <input id="country" type="text"
                                                                    class="form-input w-full" name="country" />
                                                            </div>

                                                            <div class="mt-3" x-show="selectedCusType === 'hotel'">
                                                                <label>Hotel Options:</label>
                                                                <div
                                                                    class="hotel-options flex flex-col sm:flex-row sm:items-center gap-2 mb-5">
                                                                    <div>
                                                                        <label>
                                                                            <input type="radio" name="nationality_type"
                                                                                value="native"
                                                                                x-model="selectedHotelOption">
                                                                            Native
                                                                        </label>
                                                                    </div>
                                                                    <div>
                                                                        <label>
                                                                            <input type="radio" name="nationality_type"
                                                                                value="foreigner"
                                                                                x-model="selectedHotelOption">
                                                                            Foreigner
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'native'">
                                                                <div>
                                                                    <label for="professional">Professional</label>
                                                                    <input id="professional" type="text"
                                                                        name="professional" class="form-input w-full" />
                                                                </div>
                                                            </div>

                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'native'">
                                                                <div>
                                                                    <label for="nationalId">National ID</label>
                                                                    <input id="nationalId" type="text"
                                                                        class="form-input w-full" name="national_id" />
                                                                </div>
                                                            </div>

                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'native'">
                                                                <div>
                                                                    <label for="policeInfo">Police Info</label>
                                                                    <input id="policeInfo" type="text"
                                                                        class="form-input w-full" name="police_info" />
                                                                </div>
                                                            </div>

                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'foreigner'">
                                                                <div>
                                                                    <label for="nationality">Nationality</label>
                                                                    <input id="nationality" type="text"
                                                                        name="nationality" class="form-input w-full" />
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'foreigner'">
                                                                <div>
                                                                    <label for="passportNo">Passport Number</label>
                                                                    <input id="passportNo" type="text"
                                                                        class="form-input w-full" name="passport_no" />
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'foreigner'">
                                                                <div>
                                                                    <label for="purposeVisit">Purpose of Visit</label>
                                                                    <input id="purposeVisit" type="text"
                                                                        name="purpose_of_visit"
                                                                        class="form-input w-full" />
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'foreigner'">
                                                                <div>
                                                                    <label for="visaRegNo">Visa/Registration Number</label>
                                                                    <input id="visaRegNo" type="text"
                                                                        class="form-input w-full" name="visa_no" />
                                                                </div>
                                                            </div>

                                                            <div>
                                                                <label for="eventType">Event Type</label>
                                                                <select class="form-select text-white-dark w-full"
                                                                    name="event_type" x-model="itemToEdit.name"
                                                                    id="eventType">
                                                                    <option value="" disabled selected>Select Type
                                                                    </option>
                                                                    @foreach ($eventType as $et)
                                                                        <option name="event_type" class="pro-type"
                                                                            value="{{ $et->id }}"
                                                                            {{ $et->id == old('event_type') ? 'selected' : '' }}>
                                                                            {{ $et->name }}
                                                                        </option>
                                                                    @endforeach
                                                                    <span class="text-danger">
                                                                        @error('event_type')
                                                                            {{ $message }}
                                                                        @enderror
                                                                    </span>
                                                                </select>
                                                            </div>
                                                            <div>
                                                                <label for="eventDate">Event Date</label>
                                                                <input id="eventDate" type="date"
                                                                    class="form-input w-full" name="event_date" />
                                                            </div>



                                                            <div>
                                                                <label for="taxNo">Tax Number</label>
                                                                <input id="taxNo" type="text"
                                                                    class="form-input w-full" name="tax_no" />
                                                            </div>
                                                            <div>
                                                                <label for="customerGroup">Customer Group</label>
                                                                <input id="customerGroup" type="text"
                                                                    class="form-input w-full" name="customer_group" />
                                                            </div>
                                                            <div>
                                                                <label for="creditPayment">Credit Payment</label>
                                                                <input id="creditPayment" type="text"
                                                                    class="form-input w-full" name="credit_payment" />
                                                            </div>

                                                            <div class="mb-5">
                                                                <label for="status" class="block mb-2">Status *</label>
                                                                <div class="flex items-center">
                                                                    <input id="status" type="checkbox"
                                                                        class="form-checkbox" checked name="status" />
                                                                    <span class="ml-2">Active</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mt-6 flex items-center justify-end">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="openModal = false">Cancel</button>
                                                            <button type="submit"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4"
                                                                id="add_customer" @click="generateCode()">Add
                                                                Customer</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div x-show="editModal"
                                        class="fixed inset-0 z-[999] hidden overflow-y-auto bg-[black]/60"
                                        :class="editModal && '!block'">
                                        <div class="flex min-h-screen items-center justify-center"
                                            @click.self="editModal = false">
                                            <div x-transition x-transition.duration.300
                                                class="panel my-8 w-[90%] max-w-lg overflow-hidden rounded-lg border-0 p-0 md:w-full shadow-lg">
                                                <button type="button"
                                                    class="absolute top-4 text-white-dark hover:text-dark ltr:right-4 rtl:left-4"
                                                    @click="editModal = false">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                                                        class="h-6 w-6">
                                                        <line x1="18" y1="6" x2="6"
                                                            y2="18">
                                                        </line>
                                                        <line x1="6" y1="6" x2="18"
                                                            y2="18">
                                                        </line>
                                                    </svg>
                                                </button>
                                                <h3
                                                    class="bg-[#fbfbfb] py-2 text-lg font-medium ltr:pl-5 ltr:pr-[50px] rtl:pr-5 rtl:pl-[50px] dark:bg-[#121c2c]">
                                                    Edit Customer
                                                </h3>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="customer_edit_form"
                                                        class="needs-validation" method="POST"
                                                        action="{{ route('contact.store') }}">
                                                        @csrf
                                                        <input name="id" type="hidden" value="">


                                                        <div class="flex items-center w-full py-5">
                                                            <div class="flex items-center justify-center w-1/3">
                                                                <label for="dropzone-file-left"
                                                                    class="flex flex-col items-center justify-center w-full h-full border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                                                                    <div
                                                                        class="flex flex-col items-center justify-center pt-5 pb-6 mb-4 mt-4">
                                                                        <svg id="default-icon-edit"
                                                                            class="w-5 h-5 text-gray-500 dark:text-white"
                                                                            aria-hidden="true"
                                                                            xmlns="http://www.w3.org/2000/svg"
                                                                            width="24" height="24" fill="none"
                                                                            viewBox="0 0 24 24">
                                                                            <path stroke="currentColor"
                                                                                stroke-linecap="round"
                                                                                stroke-linejoin="round" stroke-width="2"
                                                                                d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                                                        </svg>
                                                                        <img id="selected-image-edit" src=""
                                                                            alt="Selected Image"
                                                                            class="hidden w-full h-full object-cover rounded-lg" />
                                                                        <p id="default-text-edit"
                                                                            class="mb-3 py-1 text-sm text-gray-500 dark:text-gray-400">
                                                                            <span class="font-semibold">Profile
                                                                                Photo</span>
                                                                        </p>
                                                                    </div>
                                                                </label>
                                                            </div>
                                                            <div class="ml-4">
                                                                <label for="editimage"
                                                                    class="btn btn-primary inline-flex items-center px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer ltr:ml-4 rtl:mr-4">
                                                                    Edit Image
                                                                </label>
                                                                <div x-show="imagePreview">
                                                                    <img style="width: 50px; height: 40px; margin: 0; border-radius: 5px;"
                                                                        :src="imagePreview" alt="Image Preview"
                                                                        style="max-width: 200px; max-height: 200px;" />
                                                                </div>
                                                                <input id="editimage" type="file" class="form-input"
                                                                    name="image" accept="image/*"
                                                                    x-on:change="handleImageUpload($event)"
                                                                    style="display: none;" />
                                                            </div>
                                                        </div>



                                                        {{-- <div class="mb-5">
                                                            <label for="imageUpload">Upload / Edit
                                                                Image</label>
                                                            <div
                                                                style="display: flex; align-items: center; gap: 10px; object-fit: cover;">

                                                                <div x-show="imagePreview">
                                                                    <img style="width: 50px; height: 40px; margin: 0; border-radius: 5px;"
                                                                        :src="imagePreview" alt="Image Preview"
                                                                        style="max-width: 200px; max-height: 200px;" />
                                                                </div>
                                                                <input id="imageUpload" type="file" class="form-input"
                                                                    name="image" accept="image/*"
                                                                    x-on:change="handleImageUpload($event)" />
                                                            </div>
                                                        </div> --}}

                                                        {{-- <div
                                                            class="customer-types flex flex-col sm:flex-row sm:items-center gap-2 mb-5">
                                                            <div>
                                                                <label>
                                                                    <input type="radio" name="cusType" value="default"
                                                                        x-model="selectedCusType" checked
                                                                        @click="change()">
                                                                    Default
                                                                </label>
                                                            </div>
                                                            <div>
                                                                <label>
                                                                    <input type="radio" name="cusType" value="hotel"
                                                                        x-model="selectedCusType" @click="change()">
                                                                    Hotel
                                                                </label>
                                                            </div>
                                                        </div> --}}

                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                                            <div>
                                                                <label for="code">Short Code</label>
                                                                <input id="create_code" type="text" class="form-input"
                                                                    name="code" value="" />
                                                            </div>
                                                            <div>
                                                                <label for="firstName">First Name *</label>
                                                                <input id="firstName" type="text" class="form-input"
                                                                    name="first_name" value="" required />
                                                            </div>
                                                            <div>
                                                                <label for="lastName">Last Name</label>
                                                                <input id="lastName" type="text" class="form-input"
                                                                    name="last_name"
                                                                    value="{{ isset($contact) ? $contact->last_name : '' }}" />
                                                            </div>
                                                            <div>
                                                                <label for="mobileNo">Mobile Number *</label>
                                                                <input type="text" id="mobileNo" class="form-input"
                                                                    maxlength="10"
                                                                    value="{{ isset($contact) ? $contact->mobile_no : '' }}"
                                                                    pattern="\d{10}" name="mobile_no" required />
                                                            </div>
                                                            <div>
                                                                <label for="email">Email *</label>
                                                                <input id="email" type="email" class="form-input"
                                                                    name="email" required
                                                                    value="{{ isset($contact) ? $contact->email : '' }}" />
                                                            </div>
                                                            <div>
                                                                <label for="telephoneNo">Telephone
                                                                    Number</label>
                                                                <input type="text" id="telephoneNo" class="form-input"
                                                                    maxlength="10"
                                                                    value="{{ isset($contact) ? $contact->telephone_no : '' }}"
                                                                    pattern="\d{10}" name="telephone_no"
                                                                    title="Please enter exactly 10 digits" />
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-1">
                                                            <div class="mt-3">
                                                                <label for="address1">Address 1</label>
                                                                <input id="address1" type="text" class="form-input"
                                                                    name="address_one"
                                                                    value="{{ isset($contact) ? $contact->address_one : '' }}" />
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="address2">Address 2</label>
                                                                <input id="address2" type="text" class="form-input"
                                                                    name="address_two"
                                                                    value="{{ isset($contact) ? $contact->address_two : '' }}" />
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                                            <div>
                                                                <label for="city">City</label>
                                                                <input id="city" type="text" class="form-input"
                                                                    name="city"
                                                                    value="{{ isset($contact) ? $contact->city : '' }}" />
                                                            </div>
                                                            <div>
                                                                <label for="state">State</label>
                                                                <input id="state" type="text" class="form-input"
                                                                    name="state"
                                                                    value="{{ isset($contact) ? $contact->state : '' }}" />
                                                            </div>
                                                            <div>
                                                                <label for="zipcode">Zip Code</label>
                                                                <input id="zipcode" type="text" class="form-input"
                                                                    name="zip_code"
                                                                    value="{{ isset($contact) ? $contact->zip_code : '' }}" />
                                                            </div>
                                                            <div>
                                                                <label for="country">Country</label>
                                                                <input id="country" type="text" class="form-input"
                                                                    name="country"
                                                                    value="{{ isset($contact) ? $contact->country : '' }}" />
                                                            </div>

                                                            <div class="mt-3" x-show="selectedCusType === 'hotel'">
                                                                <label>Hotel Options:</label>
                                                                <div
                                                                    class="hotel-options flex flex-col sm:flex-row sm:items-center gap-2 mb-5">
                                                                    <div>
                                                                        <label>
                                                                            <input type="radio" name="nationality_type"
                                                                                value="native"
                                                                                x-model="selectedHotelOption"
                                                                                {{ isset($contact) && ($contact->nationality_type == 'native' || $contact->nationality_type == null) ? 'checked' : '' }}>
                                                                            Native
                                                                        </label>
                                                                    </div>
                                                                    <div>
                                                                        <label>
                                                                            <input type="radio" name="nationality_type"
                                                                                value="foreigner"
                                                                                x-model="selectedHotelOption"
                                                                                {{ isset($contact) && $contact->nationality_type == 'foreigner' ? 'checked' : '' }}>
                                                                            Foreigner
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'native'">

                                                                <div>
                                                                    <label for="professional">Professional</label>
                                                                    <input id="professional" type="text"
                                                                        name="professional"
                                                                        value="{{ isset($contact) ? $contact->professional : '' }}"
                                                                        class="form-input w-full" />
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'native'">
                                                                <div>
                                                                    <label for="nationalId">National
                                                                        ID</label>
                                                                    <input id="nationalId" type="text"
                                                                        class="form-input w-full"
                                                                        value="{{ isset($contact) ? $contact->national_id : '' }}"
                                                                        name="national_id" />
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'native'">
                                                                <div>
                                                                    <label for="policeInfo">Police
                                                                        Info</label>
                                                                    <input id="policeInfo" type="text"
                                                                        class="form-input w-full"
                                                                        value="{{ isset($contact) ? $contact->police_info : '' }}"
                                                                        name="police_info" />
                                                                </div>

                                                            </div>

                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'foreigner'">

                                                                <div>
                                                                    <label for="nationality">Nationality</label>
                                                                    <input id="nationality" type="text"
                                                                        name="nationality"
                                                                        value="{{ isset($contact) ? $contact->nationality : '' }}"
                                                                        class="form-input" />
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'foreigner'">
                                                                <div>
                                                                    <label for="passportNo">Passport
                                                                        Number</label>
                                                                    <input id="passportNo" type="text"
                                                                        class="form-input"
                                                                        value="{{ isset($contact) ? $contact->passport_no : '' }}"
                                                                        name="passport_no" />
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'foreigner'">
                                                                <div>
                                                                    <label for="purposeVisit">Purpose of
                                                                        Visit</label>
                                                                    <input id="purposeVisit" type="text"
                                                                        name="purpose_of_visit"
                                                                        value="{{ isset($contact) ? $contact->purpose_of_visit : '' }}"
                                                                        class="form-input" />
                                                                </div>
                                                            </div>
                                                            <div
                                                                x-show="selectedCusType === 'hotel' && selectedHotelOption === 'foreigner'">
                                                                <div>
                                                                    <label for="visaRegNo">Visa/Registration
                                                                        Number</label>
                                                                    <input id="visaRegNo" type="text"
                                                                        class="form-input" name="visa_no"
                                                                        value="{{ isset($contact) ? $contact->visa_no : '' }}" />
                                                                </div>
                                                            </div>


                                                            <div>
                                                                <label for="eventType">Event Type </label>
                                                                <select class="form-select text-white-dark"
                                                                    name="event_type" id="eventType">
                                                                    <option value="" selected>Select Type
                                                                    </option>
                                                                    @foreach ($eventType as $et)
                                                                        <option class="pro-type"
                                                                            value="{{ $et->id }}"
                                                                            {{ isset($contact) && $contact->event_type == $et->id ? 'selected' : '' }}>
                                                                            {{ $et->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div>
                                                                <label for="eventDate">Event Date</label>
                                                                <input id="eventDate" type="date" class="form-input"
                                                                    value="{{ isset($contact) ? $contact->event_date : '' }}"
                                                                    name="event_date" />
                                                            </div>



                                                            <div>
                                                                <label for="taxNo">Tax Number</label>
                                                                <input id="taxNo" type="text" class="form-input"
                                                                    name="tax_no"
                                                                    value="{{ isset($contact) ? $contact->tax_no : '' }}" />
                                                            </div>

                                                            <div>
                                                                <label for="customerGroup">Customer
                                                                    Group</label>
                                                                <select class="form-select text-white-dark"
                                                                    name="contact_group" x-model="itemToEdit.name"
                                                                    id="customerGroup">
                                                                    <option value="" selected>Select
                                                                        Group</option>
                                                                    @foreach ($customerGroup as $et)
                                                                        <option name="contact_group" class="pro-type"
                                                                            value="{{ $et->id }}"
                                                                            {{ isset($contact) && $contact->contact_group == $et->id ? 'selected' : '' }}>
                                                                            {{ $et->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div>
                                                                <label for="creditPayment">Credit
                                                                    Payment</label>
                                                                <input id="creditPayment" type="text"
                                                                    class="form-input"
                                                                    value="{{ isset($contact) ? $contact->credit_payment : '' }}"
                                                                    name="credit_payment" />
                                                            </div>

                                                            <div class="mb-5">
                                                                <label for="status" class="block mb-2">Status</label>
                                                                <div class="flex items-center">
                                                                    <input id="status" type="checkbox"
                                                                        class="form-checkbox" name="status" />
                                                                    <span class="ml-2">Active</span>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div class="mt-6 flex items-center justify-end">
                                                            {{-- <a href="{{ action('Rest\ContactController@index') }}"
                                                                class="btn btn-outline-danger">Discard</a> --}}
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="editModal = false">Discard</button>
                                                            <button type="submit"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4">Update</button>
                                                        </div>
                                                    </form>
                                                </div>

                                            </div>


                                        </div>
                                    </div>
                                </div>



                            </div>


                            {{-- @can('contact.delete')
                                <button type="button" href="#" class="btn btn-danger delete-button"
                                    style="display:none;">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
                                        <path d="M20.5001 6H3.5" stroke="currentColor" stroke-width="1.5"
                                            stroke-linecap="round">
                                        </path>
                                        <path
                                            d="M18.8334 8.5L18.3735 15.3991C18.1965 18.054 18.108 19.3815 17.243 20.1907C16.378 21 15.0476 21 12.3868 21H11.6134C8.9526 21 7.6222 21 6.75719 20.1907C5.89218 19.3815 5.80368 18.054 5.62669 15.3991L5.16675 8.5"
                                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                                        <path opacity="0.5" d="M9.5 11L10 16" stroke="currentColor" stroke-width="1.5"
                                            stroke-linecap="round"></path>
                                        <path opacity="0.5" d="M14.5 11L14 16" stroke="currentColor" stroke-width="1.5"
                                            stroke-linecap="round"></path>
                                        <path opacity="0.5"
                                            d="M6.5 6C6.55588 6 6.58382 6 6.60915 5.99936C7.43259 5.97849 8.15902 5.45491 8.43922 4.68032C8.44784 4.65649 8.45667 4.62999 8.47434 4.57697L8.57143 4.28571C8.65431 4.03708 8.69575 3.91276 8.75071 3.8072C8.97001 3.38607 9.37574 3.09364 9.84461 3.01877C9.96213 3 10.0932 3 10.3553 3H13.6447C13.9068 3 14.0379 3 14.1554 3.01877C14.6243 3.09364 15.03 3.38607 15.2493 3.8072C15.3043 3.91276 15.3457 4.03708 15.4286 4.28571L15.5257 4.57697C15.5433 4.62992 15.5522 4.65651 15.5608 4.68032C15.841 5.45491 16.5674 5.97849 17.3909 5.99936C17.4162 6 17.4441 6 17.5 6"
                                            stroke="currentColor" stroke-width="1.5"></path>
                                    </svg>
                                    Delete
                                </button>
                            @endcan --}}
                        </div>
                    </div>
                    @can('contact.view')
                        <div class="category-table">
                            <div class="table-responsive">
                                <table id="facility_table" class="custom-table display nowrap" width="100%">
                                    <thead>
                                        <tr style="border:none;background-color:skyblue !important;color:white;">
                                            <th></th>
                                            <th>Full Name</th>
                                            <th>City</th>
                                            <th>Mobile Number</th>
                                            <th>Credit Payment</th>
                                            <th>Image</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    @endcan
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('javascript')
    <link rel="stylesheet" href="{{ asset('AdminLTE/plugins/daterangepicker/daterangepicker.css') }}">
    <link rel="stylesheet" href="{{ asset('AdminLTE/plugins/datepicker/bootstrap-datepicker.min.css') }}">
    <script type="text/javascript">
        $(document).ready(function() {
            var ajax_url = "{{ action('Rest\ContactController@index') }}";
            facility_table = $('#facility_table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [
                    [0, 'desc']
                ],
                "ajax": {
                    "url": ajax_url,
                    "data": function(d) {}
                },
                columnDefs: [{
                        "targets": [0, 4, 5, 6],
                        "orderable": false,
                        "searchable": false
                    },
                    {
                        "targets": [4, 6],
                        "className": 'center'
                    }
                ],
                language: {
                    paginate: {
                        previous: '<i class="fa fa-chevron-left"></i>', // Icon for previous page
                        next: '<i class="fa fa-chevron-right"></i>' // Icon for next page
                    },
                },
                columns: [{
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'city',
                        name: 'city'
                    },
                    {
                        data: 'mobile_no',
                        name: 'mobile_no'
                    },
                    {
                        data: 'credit_payment',
                        name: 'credit_payment'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: null,
                        name: 'actionButtons',
                        searchable: false,
                        orderable: false,
                        render: function(data, type, row) {
                            return `
                        <button @click="editItem()" style="cursor: pointer; margin-right: 10px;" title="Edit">
                            <i class="fa fa-pencil-square-o edit-btn" data-id="${row.id}" style="font-size: 20px; color: #E2A03F;"></i>
                        </button>
                        <button @click="viewItem()" style="cursor: pointer; margin-right: 10px;" title="View">
                            <i class="fa fa-eye view-btn" data-id="${row.id}" style="font-size: 20px; color: #4361EE;"></i>
                        </button>
                        <button style="cursor: pointer;" title="Delete">
                            <i class="fa fa-trash-o delete-button disabled-color" style="font-size: 20px;"></i>
                        </button>
                    `;
                        }
                    }
                ],

                "fnDrawCallback": function(oSettings) {
                    __currency_convert_recursively($('#facility_table'));
                },
                createdRow: function(row, data, dataIndex) {
                    $(row).attr('class', 'clickable_td');
                    $(row).attr('data-id', data.id);
                }
            });


            $(document).on('click', 'i.edit-btn', function() {
                var id = $(this).data('id');
                // var currentRow = $(this).closest("tr");
                const edit_url = "{{ action('Rest\ContactController@edit', ['ID']) }}"
                    .replace(
                        'ID',
                        id);
                $.ajax({
                    method: "GET",
                    url: edit_url,
                    dataType: "json",
                    success: function(response) {
                        var contact = response.contact;
                        console.log('Contact:', contact);
                        $('#customer_edit_form input[name="id"]').val(contact
                            .id);
                        $('#customer_edit_form input[name="code"]').val(contact
                            .code);
                        $('#customer_edit_form input[name="first_name"]').val(
                            contact.first_name);
                        $('#customer_edit_form input[name="last_name"]').val(
                            contact.last_name);
                        $('#customer_edit_form input[name="address_one"]').val(
                            contact.address_one);
                        $('#customer_edit_form input[name="address_two"]').val(
                            contact.address_two);
                        $('#customer_edit_form input[name="city"]').val(contact
                            .city);
                        $('#customer_edit_form input[name="state"]').val(contact
                            .state);
                        $('#customer_edit_form input[name="zip_code"]').val(
                            contact
                            .zip_code);
                        $('#customer_edit_form input[name="country"]').val(
                            contact
                            .country);
                        $('#customer_edit_form input[name="event_type"]').val(
                            contact.event_type);
                        $('#customer_edit_form input[name="event_date"]').val(
                            contact.event_date);
                        $('#customer_edit_form input[name="mobile_no"]').val(
                            contact.mobile_no);
                        $('#customer_edit_form input[name="telephone_no"]').val(
                            contact.telephone_no);
                        $('#customer_edit_form input[name="email"]').val(contact
                            .email);
                        $('#customer_edit_form input[name="tax_no"]').val(
                            contact
                            .tax_no);
                        $('#customer_edit_form input[name="contact_group"]')
                            .val(
                                contact.contact_group);
                        $('#customer_edit_form input[name="credit_payment"]')
                            .val(
                                contact.credit_payment);
                        $('#customer_edit_form input[name="nationality"]').val(
                            contact.nationality);
                        $('#customer_edit_form input[name="passport_no"]').val(
                            contact.passport_no);
                        $('#customer_edit_form input[name="purpose_of_visit"]')
                            .val(
                                contact.purpose_of_visit);
                        $('#customer_edit_form input[name="visa_no"]').val(
                            contact.visa_no);
                        $('#customer_edit_form input[name="professional"]').val(
                            contact.professional);
                        $('#customer_edit_form input[name="national_id"]').val(
                            contact.national_id);
                        $('#customer_edit_form input[name="police_info"]').val(
                            contact.police_info);
                        if (contact.status === 'Active') {
                            $('#customer_edit_form input[name="status"]').prop(
                                'checked', true);
                        } else {
                            $('#customer_edit_form input[name="status"]').prop(
                                'checked', false);
                        }

                        if (contact.image) {
                            $('#selected-image-edit').attr('src',
                                    '{{ asset('storage/contact_img') }}/' +
                                    contact
                                    .image)
                                .removeClass('hidden');

                            $('#default-icon-edit').addClass('hidden');
                            $('#default-text-edit').addClass('hidden');
                        } else {
                            $('#selected-image-edit').addClass('hidden');
                            $('#default-icon-edit').removeClass('hidden');
                            $('#default-text-edit').removeClass('hidden');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });


            $(document).on('click', 'i.view-btn', function() {
                var id = $(this).data('id');

                const show_url = "{{ action('Rest\ContactController@show', ['ID']) }}"
                    .replace(
                        'ID', id);
                window.location.href = show_url;
            });



            let searchIDs = [];

            function updateDeleteButton() {
                if (searchIDs.length > 0) {
                    $('i.delete-button').removeClass('disabled-color').addClass('active-color');
                } else {
                    $('i.delete-button').removeClass('active-color').addClass('disabled-color');
                }
            }

            $(document).on('change', '#check-box', function() {
                if ($(this).is(":checked")) {
                    searchIDs.push($(this).val());
                } else {
                    searchIDs.splice(searchIDs.indexOf($(this).val()), 1);
                }

                updateDeleteButton();
            });

            $(document).on('click', 'i.delete-button.active-color', function() {
                const delete_url = "{{ action('Rest\ContactController@delete') }}";
                $('i.delete-button').removeClass('active-color').addClass('disabled-color');

                $.ajax({
                    method: "GET",
                    url: delete_url,
                    dataType: "json",
                    data: {
                        ids: searchIDs
                    },
                    success: function(result) {
                        if (result.success) {
                            facility_table.ajax.reload();
                            searchIDs = [];
                            updateDeleteButton();
                        } else {
                            toastr.error(result.msg);
                            $('i.delete-button').removeClass('disabled-color').addClass(
                                'active-color');
                        }
                    },
                    error: function() {
                        $('i.delete-button').removeClass('disabled-color').addClass(
                            'active-color');
                    }
                });
            });

            document.getElementById('image').addEventListener('change', function(event) {
                const file = event.target.files[0];
                const defaultIcon = document.getElementById('default-icon');
                const defaultText = document.getElementById('default-text');
                const selectedImage = document.getElementById('selected-image');

                if (file) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        selectedImage.src = e.target.result;
                        selectedImage.classList.remove('hidden');
                        defaultIcon.classList.add('hidden');
                        defaultText.classList.add('hidden');
                    };

                    reader.readAsDataURL(file);
                } else {
                    selectedImage.classList.add('hidden');
                    defaultIcon.classList.remove('hidden');
                    defaultText.classList.remove('hidden');
                }
            });

            document.getElementById('editimage').addEventListener('change', function(event) {
                const file = event.target.files[0];
                const defaultIcon = document.getElementById('default-icon-edit');
                const defaultText = document.getElementById('default-text-edit');
                const selectedImage = document.getElementById('selected-image-edit');

                if (file) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        selectedImage.src = e.target.result;
                        selectedImage.classList.remove('hidden');
                        defaultIcon.classList.add('hidden');
                        defaultText.classList.add('hidden');
                    };

                    reader.readAsDataURL(file);
                } else {
                    selectedImage.classList.add('hidden');
                    defaultIcon.classList.remove('hidden');
                    defaultText.classList.remove('hidden');
                }
            });
        });

        document.addEventListener("alpine:init", () => {
            Alpine.data("categoryList", () => ({
                selectedRows: [],
                items: ,
                openModal: false,
                editModal: false,
                viewModal: false,
                editItem() {
                    this.editModal = true;
                },
                viewItem() {
                    this.viewItem = true;
                },
                searchText: "",
                viewItem: {},
                itemToEdit: {},
                selectedCusType: 'default',
                selectedHotelOption: '',
                get codeInitialLetter() {
                    const allCustomers = JSON.parse(JSON.stringify(this.items));

                    if (allCustomers.length > 0) {
                        return allCustomers.find(item =>
                            item.code_initial_letter === 'CU'
                        ).code_initial_letter
                    }

                    return "CU";
                },
                change() {
                    console.log(11)
                    this.selectedCusType = 'hotel';
                    this.selectedHotelOption = 'native';

                    return this.selectedCusType;
                },
                get customerLastId() {
                    const allCustomers = JSON.parse(JSON.stringify(this.items));

                    if (allCustomers.length > 0) {
                        return allCustomers[allCustomers.length - 1].id;

                    }

                    return 0;
                },
                data() {
                    return {
                        newCustomer: {
                            imageUpload: null,
                        },
                    };
                },

                handleImageUpload(event) {
                    const file = event.target.files[0];
                    const reader = new FileReader();

                    reader.onload = (e) => {
                        this.imagePreview = e.target.result;
                        this.newCustomer.imageUpload = e.target.result;
                    };

                    reader.readAsDataURL(file);
                },

                statusChecked: false,
                generateCode() {
                    const inputField = document.getElementById('create_code');
                    if (!inputField.value) {
                        inputField.value = this.codeInitialLetter + '000' + this.customerLastId;
                    }
                }
            }));
        });
    </script>
@endsection