@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;
        }

        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]">
        <!-- start main content section -->
        <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>Business Locations</span>
                </li>
            </ul>
            <div class="grid grid-cols-1 gap-4 pt-5">
                <div x-data="sizeList">
                    <div class="panel border-[#e0e6ed] px-0 dark:border-[#1b2e4b]">
                        <div class="px-5" x:data="sizeList">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="mb-5 flex items-center gap-2">
                                    @can('business-location.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('business-location.update')
                                        <button class="btn btn-primary gap-2 edit-btn" style="display: none;"
                                            @click="editItem()">
                                            <i class="fa fa-edit"></i>
                                            Edit
                                        </button>
                                    @endcan --}}
                                </div>
                            </div>



                            <div x-data="{ existingLocationSelected: '', addSubType: false }">
                                <!-- Modal -->
                                <div 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">
                                        <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">
                                            <div class="heading">
                                                <h2 class="m-0 text-center">Add Location</h2>
                                            </div>
                                            <div class="p-5">
                                                {!! Form::open([
                                                    'url' => action('LocationController@store'),
                                                    'method' => 'post',
                                                    'class' => 'space-y-5',
                                                    'id' => 'facilityi6_add_form',
                                                ]) !!}

                                                <!-- Dropdown to Select Existing Location -->
                                                <div class="w-1/2 md:w-1/3 relative">
                                                    {!! Form::label('existing_location', __('Location Type') . ':') !!}
                                                    <div class="relative">
                                                        {!! Form::select(
                                                            'existing_location',
                                                            [
                                                                'Branch' => 'Branch',
                                                                'Warehouse' => 'Warehouse',
                                                                'Department' => 'Department',
                                                                'Distribution' => 'Distribution',
                                                                'Store' => 'Store',
                                                                'Showroom' => 'Showroom',
                                                                'Third Party Distribution' => 'Third Party Distribution',
                                                            ],
                                                            null,
                                                            [
                                                                'class' =>
                                                                    'form-select block w-full appearance-none border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
                                                                'placeholder' => __('Location Type'),
                                                                'x-model' => 'existingLocationSelected',
                                                                '@change' => 'existingLocationSelected ? addSubType = false : addSubType = false',
                                                            ],
                                                        ) !!}
                                                        <div
                                                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                                            <svg class="h-5 w-5" fill="none" stroke="currentColor"
                                                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                                    stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Checkbox to Add Sub Type -->
                                                <div class="w-1/2 md:w-1/3 mt-3" x-show="existingLocationSelected">
                                                    <label class="flex items-center">
                                                        <input type="checkbox" x-model="addSubType"
                                                            class="form-checkbox h-5 w-5 text-blue-600">
                                                        <span class="ml-2">Add Sub Type</span>
                                                    </label>
                                                </div>

                                                <!-- Dropdown for Existing Locations -->
                                                <div x-show="addSubType" class="w-1/2 md:w-1/3 mt-3">
                                                    {!! Form::label('parent_location', __('Existing Location') . ':') !!}
                                                    {!! Form::select('parent_location', $existingLocations, null, [
                                                        'class' =>
                                                            'form-select block w-full appearance-none border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
                                                        'placeholder' => __('Select Existing Location'),
                                                    ]) !!}
                                                </div>
                                                <!-- Basic Location Fields -->
                                                <div
                                                    :class="addSubType ? 'grid grid-cols-1 md:grid-cols-2 gap-4' :
                                                        'grid grid-cols-1 gap-4 sm:grid-cols-3'">
                                                    <div>
                                                        {!! Form::label('name', __('Location Name') . ':*') !!}
                                                        {!! Form::text('name', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Location Name'),
                                                            'required' => 'required',
                                                        ]) !!}
                                                    </div>
                                                    <div>
                                                        {!! Form::label('landmark', __('Address') . ':') !!}
                                                        {!! Form::text('landmark', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Address'),
                                                        ]) !!}
                                                    </div>
                                                    <div>
                                                        {!! Form::label('mobile', __('Mobile') . ':') !!}
                                                        {!! Form::text('mobile', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Mobile'),
                                                        ]) !!}
                                                    </div>

                                                    <div x-show="!addSubType">
                                                        {!! Form::label('city', __('City') . ':*') !!}
                                                        {!! Form::text('city', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('City'),
                                                            'x-bind:disabled="addSubType"',
                                                            'required' => 'required',
                                                        ]) !!}
                                                    </div>

                                                    <div x-show="!addSubType">
                                                        {!! Form::label('state', __('State') . ':*') !!}
                                                        {!! Form::text('state', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('State'),
                                                            'x-bind:disabled="addSubType"',
                                                            'required' => 'required',
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('country', __('Country') . ':*') !!}
                                                        {!! Form::text('country', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Country'),
                                                            'x-bind:disabled="addSubType"',
                                                            'required' => 'required',
                                                        ]) !!}
                                                    </div>
                                                </div>
                                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-1">
                                                    <div>
                                                        {!! Form::label('email', __('Email') . ':') !!}
                                                        {!! Form::email('email', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Email'),
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('reg_doc_no', 'Registration Document Number' . ':*') !!}
                                                        {!! Form::text('reg_doc_no', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => 'Registration Document Number',
                                                            'x-bind:disabled="addSubType"',
                                                            'required' => 'required',
                                                        ]) !!}
                                                    </div>
                                                </div>
                                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('zip_code', __('Zip Code') . ':') !!}
                                                        {!! Form::text('zip_code', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Zip Code'),
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('tin_number', 'Tin Number' . ':') !!}
                                                        {!! Form::text('tin_number', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => 'Tin Number',
                                                        ]) !!}
                                                    </div>

                                                    <div x-show="!addSubType">
                                                        {!! Form::label('fax_no', 'Fax Number' . ':') !!}
                                                        {!! Form::text('fax_no', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => 'Fax Number',
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('alternate_number', __('Alternate Number') . ':') !!}
                                                        {!! Form::text('alternate_number', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Alternate Number'),
                                                        ]) !!}
                                                    </div>
                                                </div>

                                                <div class="flex justify-end items-center mt-3">
                                                    <button type="button" class="btn btn-outline-danger mr-2"
                                                        @click="openModal = false">Discard</button>
                                                    <button class="btn btn-primary" type="submit">Create</button>
                                                </div>
                                                {!! Form::close() !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div x-show="editModal" x-data="{ existingLocationSelected: '', addSubType: false }">
                                <!-- Edit Modal -->
                                <div class="fixed inset-0 z-[999] hidden overflow-y-auto bg-[black]/60"
                                    :class="open && '!block'">
                                    <div class="flex min-h-screen items-center justify-center">
                                        <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">
                                            <div class="heading">
                                                <h2 class="m-0 text-center">Edit Location</h2>
                                            </div>
                                            <div class="p-5">
                                                {!! Form::open([
                                                    'url' => action('LocationController@update'),
                                                    'method' => 'PUT',
                                                    'class' => 'space-y-5',
                                                    'id' => 'location_edit_form',
                                                ]) !!}
                                                <input type="hidden" name="id" id="edit_id">

                                                <!-- Dropdown to Select Existing Location -->
                                                <div class="w-1/2 md:w-1/3 relative">
                                                    {!! Form::label('existing_location', __('Location Type') . ':') !!}
                                                    <div class="relative">
                                                        {!! Form::select(
                                                            'existing_location',
                                                            [
                                                                'Branch' => 'Branch',
                                                                'Warehouse' => 'Warehouse',
                                                                'Department' => 'Department',
                                                                'Distribution' => 'Distribution',
                                                                'Store' => 'Store',
                                                                'Showroom' => 'Showroom',
                                                                'Third Party Distribution' => 'Third Party Distribution',
                                                            ],
                                                            null,
                                                            [
                                                                'class' =>
                                                                    'form-select block w-full appearance-none border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
                                                                'placeholder' => __('Location Type'),
                                                                'x-model' => 'existingLocationSelected',
                                                                '@change' => 'existingLocationSelected ? addSubType = false : addSubType = false',
                                                            ],
                                                        ) !!}
                                                        <div
                                                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                                            <svg class="h-5 w-5" fill="none" stroke="currentColor"
                                                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                                    stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                                            </svg>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Checkbox to Add Sub Type -->
                                                <div class="w-1/2 md:w-1/3 mt-3">
                                                    <label class="flex items-center">
                                                        <input type="checkbox" x-model="addSubType"
                                                            class="form-checkbox h-5 w-5 text-blue-600">
                                                        <span class="ml-2">Edit Sub Type</span>
                                                    </label>
                                                </div>

                                                <!-- Dropdown for Existing Locations -->
                                                <div x-show="addSubType" class="w-1/2 md:w-1/3 mt-3">
                                                    {!! Form::label('parent_location', __('Existing Location') . ':') !!}
                                                    {!! Form::select('parent_location', $existingLocations, null, [
                                                        'class' =>
                                                            'form-select block w-full appearance-none border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
                                                        'placeholder' => __('Select Existing Location'),
                                                        'x-model' => 'parent_location',
                                                    ]) !!}
                                                </div>


                                                <!-- Basic Location Fields -->
                                                <div
                                                    :class="addSubType ? 'grid grid-cols-1 md:grid-cols-2 gap-4' :
                                                        'grid grid-cols-1 gap-4 sm:grid-cols-3'">
                                                    <div>
                                                        {!! Form::label('name', __('Location Name') . ':*') !!}
                                                        {!! Form::text('name', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Location Name'),
                                                            'required' => 'required',
                                                        ]) !!}
                                                    </div>
                                                    <div>
                                                        {!! Form::label('landmark', __('Address') . ':') !!}
                                                        {!! Form::text('landmark', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Address'),
                                                        ]) !!}
                                                    </div>
                                                    <div>
                                                        {!! Form::label('mobile', __('Mobile') . ':') !!}
                                                        {!! Form::text('mobile', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Mobile'),
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('city', __('City') . ':') !!}
                                                        {!! Form::text('city', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('City'),
                                                            'x-bind:disabled="addSubType"',
                                                        ]) !!}
                                                    </div>

                                                    <div x-show="!addSubType">
                                                        {!! Form::label('state', __('State') . ':') !!}
                                                        {!! Form::text('state', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('State'),
                                                            'x-bind:disabled="addSubType"',
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('country', __('Country') . ':') !!}
                                                        {!! Form::text('country', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Country'),
                                                            'x-bind:disabled="addSubType"',
                                                        ]) !!}
                                                    </div>
                                                </div>

                                                <!-- Additional Location Fields -->
                                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-1">
                                                    <div>
                                                        {!! Form::label('email', __('Email') . ':') !!}
                                                        {!! Form::email('email', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Email'),
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('reg_doc_no', 'Registration Document Number' . ':*') !!}
                                                        {!! Form::text('reg_doc_no', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => 'Registration Document Number',
                                                            'x-bind:disabled="addSubType"',
                                                        ]) !!}
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('zip_code', __('Zip Code') . ':') !!}
                                                        {!! Form::text('zip_code', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Zip Code'),
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('tin_number', 'Tin Number' . ':') !!}
                                                        {!! Form::text('tin_number', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => 'Tin Number',
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('fax_no', 'Fax Number' . ':') !!}
                                                        {!! Form::text('fax_no', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => 'Fax Number',
                                                        ]) !!}
                                                    </div>
                                                    <div x-show="!addSubType">
                                                        {!! Form::label('alternate_number', __('Alternate Number') . ':') !!}
                                                        {!! Form::text('alternate_number', null, [
                                                            'class' => 'form-input',
                                                            'placeholder' => __('Alternate Number'),
                                                        ]) !!}
                                                    </div>
                                                </div>

                                                <div class="flex justify-end items-center mt-3">
                                                    <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::close() !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                        @can('business-location.index')
                            <div class="category-table" style="position: relative;padding: 15px;">
                                <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>Name</th>
                                                <th>Phone</th>
                                                <th>Main Location</th>
                                                <th>Address</th>
                                                <th>Location Type</th>
                                                <th>City</th>
                                                <th>State</th>
                                                <th>Country</th>
                                                <th>Action</th>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('javascript')
    <script type="text/javascript">
        document.addEventListener('alpine:init', () => {
            Alpine.data('sizeList', () => ({
                selectedRows: [],
                searchText: '',
                openModal: false,
                editModal: false,
                showLocationTypeFields: false,
                existingLocationSelected: '',
                editItem() {
                    this.editModal = true;
                },
                // Method to handle form submission
                submitForm() {
                    let selectedLocation = this.existingLocationSelected;
                    console.log('Selected Location:', selectedLocation);

                    document.querySelector('form#location_edit_form').submit();
                }
            }));
        });

        $(document).ready(function() {
            $('.btn.buttons-collection.btn-info span').text('Export');
            facility_table = $('#facility_table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [
                    [0, 'desc']
                ],
                ajax: '/business-locations',
                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: 'name',
                        name: 'name'
                    },
                    {
                        data: 'mobile',
                        name: 'mobile'
                    },
                    {
                        data: 'selected_parent',
                        name: 'selected_parent'
                    },

                    {
                        data: 'landmark',
                        name: 'landmark'
                    },
                    {
                        data: 'location_type',
                        name: 'location_type'
                    },
                    {
                        data: 'city',
                        name: 'city'
                    },
                    {
                        data: 'state',
                        name: 'state'
                    },
                    {
                        data: 'country',
                        name: 'country'
                    }, {
                        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 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');
                const edit_url = "{{ action('LocationController@show', ['ID']) }}".replace('ID', id);
                $.ajax({
                    method: "GET",
                    url: edit_url,
                    dataType: "json",
                    success: function(result) {
                        $('form#location_edit_form #edit_id').val(result.id);
                        $('form#location_edit_form').find('#name').val(result.name);
                        $('form#location_edit_form').find('#mobile').val(result.mobile);
                        $('form#location_edit_form').find('#email').val(result.email);

                        var addSubType = result
                            .addSubType;
                        if (addSubType) {
                            $('form#location_edit_form').find('#existing_location').val(result
                                .existing_location);
                            $('form#location_edit_form').find('#parent_location').val(result
                                .parent_location);
                        }

                        if (!addSubType) {
                            $('form#location_edit_form').find('#city').val(result.city);
                            $('form#location_edit_form').find('#zip_code').val(result.zip_code);
                            $('form#location_edit_form').find('#state').val(result.state);
                            $('form#location_edit_form').find('#country').val(result.country);
                            $('form#location_edit_form').find('#landmark').val(result.landmark);
                            $('form#location_edit_form').find('#reg_doc_no').val(result
                                .reg_doc_no);
                            $('form#location_edit_form').find('#tin_number').val(result
                                .tin_number);
                            $('form#location_edit_form').find('#fax_no').val(result.fax_no);
                            $('form#location_edit_form').find('#alternate_number').val(result
                                .alternate_number);
                        }
                        $('input#add_sub_type').prop('checked', addSubType);

                        $('select[name="existing_location"]').val(result.existing_location);
                        $('select[name="parent_location"]').val(result.parent_location);
                    }
                });
            });

            $('button.submit-btn').click(function() {
                Alpine.store('sizeList').submitForm();
            });
        });
    </script>
@endsection