@php use App\Enums\DateTimeFormats;use Carbon\Carbon; @endphp
<x-app-layout>
    <div class="max-w-full mx-auto sm:px-1 lg:px-1">
        <div class="bg-white  overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 " x-data="{ setLockTimeModal: false }">
                <!-- Header -->
                <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                    <p class="text-lg font-semibold text-gray-900">
                        {{__('VTrust Set Lock Time')}}
                    </p>

                    <x-buttons.primary @click="$store.setLockTimeModal.showSetLockTimeModal = true" class="px-4">
                        {{__('Set Lock Time')}}
                    </x-buttons.primary>
                </div>

                <x-session-message class="mt-4"/>

                <!-- Manual Collection Modal -->
                <div x-data="{}" x-init="$store.setLockTimeModal = $store.setLockTimeModal || $data"
                     x-show="$store.setLockTimeModal.showSetLockTimeModal" x-cloak
                     x-transition.opacity
                     class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto px-4 py-6 sm:px-0">
                    <div
                        class="bg-white p-6 sm:p-8 rounded-lg shadow-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto relative">
                        <!-- Modal Header -->
                        <div class="flex justify-between items-center mb-6 top-0 bg-white z-10">
                            <h3 class="text-xl font-semibold">Set Lock Time</h3>
                            <button type="button"
                                    @click="$store.setLockTimeModal.showSetLockTimeModal = false"
                                    class="text-gray-600 hover:text-gray-800 text-2xl font-bold">&times;
                            </button>
                        </div>

                        <hr class="border-gray-300 mb-6">

                        <form id="sendReminderForm"
                              @submit.prevent="$store.setLockTimeModal.sendReminderRequest()">
                            @csrf
                            <div class="space-y-8">
                                <div>
                                    <x-input-label for="dealer_id" class="block text-gray-900"
                                                   :value="__('Select Order *')"/>

                                    <div class="mt-2">

                                        <div x-ref="orderSearch"
                                             x-data="{
                                                open: false,
                                                search: '',
                                                selected: null,
                                                emi_price: null,
                                                collected_amount: null,
                                                outstanding_amount: null,
                                                due_amount: null,
                                                options: [],
                                                loading: false,

                                                async fetchOptions() {
                                                    this.loading = true;
                                                    try {
                                                        const response = await fetch(`{{ route('vtrust_send_reminder.orders') }}?q=${encodeURIComponent(this.search)}`);
                                                        this.options = await response.json();
                                                    } catch (e) {
                                                        this.options = [];
                                                    }
                                                    this.loading = false;
                                                },

                                                get filtered() { return this.options;}
                                            }"
                                             x-effect="
                                                        if (!selected) {
                                                            emi_price = null;
                                                            collected_amount = null;
                                                            outstanding_amount = null;
                                                        }
                                                    "
                                             class="relative w-full"
                                             @keydown.escape.window="open = false"
                                             @show-collect-modal.window="
                                                    search = '';
                                                    selected = null;
                                                 "
                                        >

                                            <input
                                                x-model="search"
                                                @focus="open = true; fetchOptions()"
                                                @input.debounce.400ms="open = true; fetchOptions()"
                                                @input="if (search === '') { selected = null; }"
                                                @keydown.escape="open = false"
                                                type="text"
                                                placeholder="{{__('Customer Name, Phone Number, NID, Order Number, Sale Bill Number')}}"
                                                class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 outline-gray-300 pr-10"
                                                autocomplete="off"
                                            />

                                            <input type="hidden" name="order_id" :value="selected"
                                                   required>
                                            <div x-show="open"
                                                 x-trap="open"
                                                 class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 max-h-60 overflow-auto"
                                            >
                                                <template x-if="loading">
                                                    <div class="px-4 py-2 text-gray-500">Loading...</div>
                                                </template>
                                                <template x-for="option in filtered" :key="option.id">
                                                    <div
                                                        @mousedown.prevent="
                                                                selected = option.id;
                                                                search = option.display;
                                                                open = false;
                                                            "
                                                        class="px-4 py-2 cursor-pointer hover:bg-indigo-100"
                                                        :class="{'bg-indigo-50': selected === option.id}"
                                                        x-html="option.label"
                                                    ></div>
                                                </template>
                                                <div
                                                    x-show="!loading && filtered.length === 0 && search.length >= 4"
                                                    class="px-4 py-2 text-gray-500">No results found
                                                </div>
                                            </div>


                                            <template
                                                x-if="$store.setLockTimeModal.errors.order_id">
                                                <div class="text-red-600 text-sm mt-1"
                                                     x-text="$store.setLockTimeModal.errors.order_id[0]"></div>
                                            </template>

                                            <div class="space-y-8 mt-8">
                                                {{--  in row column formate set two fields wise--}}
                                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                                    <div>
                                                        <x-input-label for="customer_name"
                                                                       class="block text-gray-900 text-xs"
                                                                       :value="__('Customer Name')"/>
                                                        <input type="text"
                                                               class="mt-2 block w-full rounded-md bg-gray-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                               :value="selected ? filtered.find(o => o.id === selected).customer_name : ''"
                                                               readonly disabled>
                                                    </div>

                                                    <div>
                                                        <x-input-label for="customer_mobile"
                                                                       class="block text-gray-900 text-xs"
                                                                       :value="__('Customer Phone')"/>
                                                        <input type="text"
                                                               class="mt-2 block w-full rounded-md bg-gray-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                               :value="selected ? filtered.find(o => o.id === selected).customer_mobile : ''"
                                                               readonly disabled>
                                                    </div>
                                                    <div>
                                                        <x-input-label for="dealer_name"
                                                                       class="block text-gray-900 text-xs"
                                                                       :value="__('Dealer')"/>
                                                        <input type="text"
                                                               class="mt-2 block w-full rounded-md bg-gray-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                               :value="selected
                                                                   ? filtered.find(o => o.id === selected).dealer_name
                                                                   : ''"
                                                               readonly disabled>
                                                    </div>
                                                    <div>
                                                        <x-input-label for="bill_number"
                                                                       class="block text-gray-900 text-xs"
                                                                       :value="__('Sale Bill Number')"/>
                                                        <input type="text"
                                                               class="mt-2 block w-full rounded-md bg-gray-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                               :value="selected ? filtered.find(o => o.id === selected).bill_number : ''"
                                                               readonly disabled>
                                                    </div>
                                                </div>

                                                <div>
                                                    <x-input-label for="total_price"
                                                                   class="block text-gray-900 text-xs"
                                                                   :value="__('EMI Price')"/>
                                                    <input type="text"
                                                           class="mt-2 block w-full rounded-md bg-gray-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                           :value="selected ? filtered.find(o => o.id === selected).total_price : ''"
                                                           readonly disabled>
                                                </div>
                                                <div>
                                                    <x-input-label for="collection_amount"
                                                                   class="block text-gray-900 text-xs"
                                                                   :value="__('Collected Amount')"/>
                                                    <input type="text"
                                                           class="mt-2 block w-full rounded-md bg-gray-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                           :value="selected ? filtered.find(o => o.id === selected).collection_amount : ''"
                                                           readonly disabled>
                                                </div>
                                                <div>
                                                    <x-input-label for="outstanding_amount"
                                                                   class="block text-gray-900 text-xs"
                                                                   :value="__('Outstanding Amount')"/>
                                                    <input type="text"
                                                           class="mt-2 block w-full rounded-md bg-gray-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                           :value="selected ? filtered.find(o => o.id === selected).outstanding_amount : ''"
                                                           readonly disabled>
                                                </div>

                                                {{-- LockTime date_time_field --}}
                                                <div>
                                                    <x-input-label for="lock_time"
                                                                   class="block text-gray-900 text-xs"
                                                                   :value="__('Set Lock Time *')"/>
                                                    <input
                                                        class="flatpickr-datetime mt-2 block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                        name="lock_time" id="lock_time"
                                                        required
                                                    >
                                                    <template
                                                        x-if="$store.setLockTimeModal.errors.lock_time">
                                                        <div class="text-red-600 text-sm mt-1"
                                                             x-text="$store.setLockTimeModal.errors.lock_time[0]"></div>
                                                    </template>
                                                </div>

                                            </div>
                                        </div>

                                    </div>

                                </div>

                                <div class="flex justify-end space-x-2 mt-4">
                                    <x-buttons.secondary
                                        type="button"
                                        @click="
                                                $store.setLockTimeModal.showSetLockTimeModal = false;
                                                if ($refs.orderSearch) {
                                                    $refs.orderSearch.search = '';
                                                    $refs.orderSearch.selected = null;
                                                    $refs.orderSearch.emi_price = null;
                                                    $refs.orderSearch.collected_amount = null;
                                                    $refs.orderSearch.outstanding_amount = null;
                                                }
                                                $store.setLockTimeModal.errors = {};
                                                document.getElementById('sendReminderForm').reset();
                                            "
                                    >
                                        Close
                                    </x-buttons.secondary>

                                    <x-buttons.primary class="px-4">
                                        {{__('Set Lock Time')}}
                                    </x-buttons.primary>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{--                    <!-- Filter Form -->--}}
                {{--                    <div--}}
                {{--                        x-data="collectionFilter({--}}
                {{--                                initialBrand: '{{ request('brand_id','All') }}',--}}
                {{--                                initialDealer: '{{ request('dealer_id','') }}',--}}
                {{--                                initialCustomer: '{{ request('customer_id','') }}',--}}
                {{--                                initialProduct: '{{ request('product_id','') }}'--}}
                {{--                            })"--}}
                {{--                        x-init="init()"--}}
                {{--                    >--}}
                {{--                        <form action="{{ url()->current() }}" method="GET">--}}
                {{--                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-8 gap-4 w-full">--}}
                {{--                                <!-- Brand -->--}}
                {{--                                <div>--}}
                {{--                                    <x-input-label for="brandId" :value="__('Brand')"/>--}}
                {{--                                    <select x-model="brandId" @change="onBrandChange()" name="brand_id"--}}
                {{--                                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-indigo-200">--}}
                {{--                                        <option value="">All</option>--}}
                {{--                                        @foreach($brands as $brand)--}}
                {{--                                            <option value="{{ $brand->id }}">{{ $brand->name }}</option>--}}
                {{--                                        @endforeach--}}
                {{--                                    </select>--}}
                {{--                                </div>--}}
                {{--                                <!-- Product -->--}}
                {{--                                <div>--}}
                {{--                                    <x-input-label for="productId" :value="__('Model')"/>--}}
                {{--                                    <select x-model="productId" name="product_id"--}}
                {{--                                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-indigo-200">--}}
                {{--                                        <option value="">All</option>--}}
                {{--                                        <template x-for="product in products" :key="product.id">--}}
                {{--                                            <option :value="product.id" x-text="product.product_name"--}}
                {{--                                                    :selected="product.id == productId"></option>--}}
                {{--                                        </template>--}}
                {{--                                    </select>--}}
                {{--                                </div>--}}

                {{--                                <!-- Dealer Dropdown (same Alpine parent as customers/products) -->--}}
                {{--                                <div--}}
                {{--                                    class="fixed_width relative"--}}
                {{--                                    style="overflow: visible;"--}}
                {{--                                    x-data="{--}}
                {{--                                        open:false,--}}
                {{--                                        search: '{{ old('dealer_id', request('dealer_id')) && isset($selectedDealer) ? $selectedDealer->shop_name . ' - ' . $selectedDealer->dealer_code : '' }}'--}}
                {{--                                    }"--}}
                {{--                                >--}}
                {{--                                    <x-input-label for="dealerId" :value="__('Dealer')"/>--}}
                {{--                                    <input type="text"--}}
                {{--                                           x-model="search"--}}
                {{--                                           @focus="open = true"--}}
                {{--                                           @blur="setTimeout(() => open = false, 150)"--}}
                {{--                                           placeholder="Search dealer..."--}}
                {{--                                           class="w-full border rounded px-2 py-2"/>--}}

                {{--                                    <!-- Dropdown -->--}}
                {{--                                    <div x-show="open"--}}
                {{--                                         class="absolute z-10 w-full bg-white border rounded shadow max-h-60 overflow-auto">--}}
                {{--                                        <div class="p-1 hover:bg-gray-100 cursor-pointer"--}}
                {{--                                             @click="dealerId = ''; search='All'; open = false; customerId='All'">--}}
                {{--                                            All--}}
                {{--                                        </div>--}}

                {{--                                        <template--}}
                {{--                                            x-for="dealer in dealers.filter(d => (`${d.shop_name} - ${d.dealer_code}`).toLowerCase().includes(search.toLowerCase()))"--}}
                {{--                                            :key="dealer.id">--}}
                {{--                                            <div class="p-1 hover:bg-gray-100 cursor-pointer"--}}
                {{--                                                 @click="dealerId = dealer.id;--}}
                {{--                                                     search = `${dealer.shop_name} - ${dealer.dealer_code}`;--}}
                {{--                                                     open = false;--}}
                {{--                                                     customerId = 'All';--}}
                {{--                                                   ">--}}
                {{--                                                <span--}}
                {{--                                                    x-text="dealer.dealer_code ? `${dealer.shop_name} - ${dealer.dealer_code}` : dealer.shop_name"></span>--}}
                {{--                                            </div>--}}
                {{--                                        </template>--}}
                {{--                                    </div>--}}
                {{--                                    <input type="hidden" name="dealer_id" :value="dealerId">--}}
                {{--                                </div>--}}

                {{--                                <!-- Customer Dropdown -->--}}
                {{--                                <div class="fixed_width relative" x-data="{ open:false, search:'' }">--}}
                {{--                                    <x-input-label for="customerId" :value="__('Customer')"/>--}}
                {{--                                    <input type="text"--}}
                {{--                                           x-model="search"--}}
                {{--                                           @focus="open = true"--}}
                {{--                                           @blur="setTimeout(() => open = false, 150)"--}}
                {{--                                           placeholder="Search customer..."--}}
                {{--                                           class="w-full border rounded px-2 py-2"/>--}}

                {{--                                    <div x-show="open"--}}
                {{--                                         class="absolute z-10 w-full bg-white border rounded shadow max-h-60 overflow-auto">--}}
                {{--                                        <div class="p-1 hover:bg-gray-100 cursor-pointer"--}}
                {{--                                             @click="customerId = ''; search='All'; open = false">--}}
                {{--                                            All--}}
                {{--                                        </div>--}}

                {{--                                        <template--}}
                {{--                                            x-for="customer in customers--}}
                {{--                                                .filter(c => dealerId === 'All' || c.dealer_id == dealerId)--}}
                {{--                                                .filter(c => c.cust_nid_name_en.toLowerCase().includes(search.toLowerCase()))"--}}
                {{--                                            :key="customer.id">--}}
                {{--                                            <div class="p-1 hover:bg-gray-100 cursor-pointer"--}}
                {{--                                                 @click="customerId = customer.id; search = customer.cust_nid_name_en; open = false">--}}
                {{--                                                <span x-text="customer.cust_nid_name_en"></span>--}}
                {{--                                            </div>--}}
                {{--                                        </template>--}}
                {{--                                    </div>--}}
                {{--                                    <input type="hidden" name="customer_id" :value="customerId">--}}
                {{--                                </div>--}}
                {{--                                <!-- Button -->--}}
                {{--                                <div class="mt-5">--}}
                {{--                                    <x-buttons.primary class="px-6 py-2">Search</x-buttons.primary>--}}
                {{--                                </div>--}}
                {{--                            </div>--}}
                {{--                        </form>--}}
                {{--                    </div>--}}

                <!-- Data Table -->
                <div
                    x-data="{
                            selectedProductOrderId: null,
                            showSendMessageModal: false,
                            showUnlockModal:                 false,
                            showInstallmentLockModal:                   false,
                        }"
                    class="overflow-x-auto">
                    <table class="min-w-full table-auto border-collapse border border-gray-300 text-xs mt-4">
                        <thead class="bg-gray-200 text-gray-700">
                        <tr>
                            <x-th rowspan="2">SL</x-th>
                            <x-th rowspan="2">Shop Name</x-th>
                            <x-th rowspan="2">Shop Code</x-th>
                            <x-th colspan="2">Customer</x-th>
                            <x-th colspan="2">Product</x-th>
                            <x-th colspan="2">Order</x-th>
                            <x-th colspan="2">Sale</x-th>
                            <x-th rowspan="2">Send At</x-th>
                            <x-th rowspan="2">Details</x-th>
                            <x-th rowspan="2">Send By</x-th>
                        </tr>
                        <tr>
                            <x-th>Name</x-th>
                            <x-th>Mobile Number</x-th>

                            <x-th>Name</x-th>
                            <x-th>IMEI</x-th>

                            <x-th>Date</x-th>
                            <x-th>Number</x-th>

                            <x-th>Date</x-th>
                            <x-th>Bill Number</x-th>

                        </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200 text-center">
                        @foreach($vTrustSendReminders as $vTrustSendReminder)
                            <tr>
                                <x-td>{{ $loop->iteration }}</x-td>
                                <x-td class="text-left">
                                    {{ $vTrustSendReminder?->productOrder?->dealerDetail?->shop_name }}
                                </x-td>
                                <x-td>
                                    {{ $vTrustSendReminder?->productOrder?->dealerDetail?->dealer_code }}
                                </x-td>
                                <x-td class="text-left">
                                    {{ $vTrustSendReminder?->productOrder?->customerDetail?->cust_nid_name_en }}
                                </x-td>
                                <x-td>
                                    {{ $vTrustSendReminder?->productOrder?->customerDetail?->user?->mobile_number }}
                                </x-td>
                                <x-td class="text-left">
                                    {{ $vTrustSendReminder?->productOrder?->product?->product_name }}
                                </x-td>
                                <x-td>
                                    {{ $vTrustSendReminder?->productOrder?->imei_number }}
                                </x-td>
                                <x-td class="text-nowrap">
                                    {{ $vTrustSendReminder?->productOrder?->created_at?->format(App\Enums\DateTimeFormats::CLIENT_DATE) }}
                                </x-td>
                                <x-td>
                                    {{ $vTrustSendReminder?->productOrder?->order_number }}
                                </x-td>
                                <x-td class="text-nowrap">
                                    {{ $vTrustSendReminder?->productOrder?->delivery_date ? Carbon::parse($vTrustSendReminder?->productOrder?->delivery_date)?->format(App\Enums\DateTimeFormats::CLIENT_DATE) : null }}
                                </x-td>
                                <x-td>
                                    {{$vTrustSendReminder?->productOrder?->bill_number}}
                                </x-td>
                                <x-td class="text-nowrap">
                                    {{ $vTrustSendReminder?->created_at?->format(App\Enums\DateTimeFormats::CLIENT_DATE_TIME) }}
                                </x-td>
                                <x-td class="text-left">
                                    {!! $vTrustSendReminder?->details !!}
                                </x-td>
                                <x-td>
                                    {{ $vTrustSendReminder?->performedUser?->name }}
                                </x-td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>

                    <div class="mt-4">
                        {{ $vTrustSendReminders->withQueryString()->links() }}
                    </div>
                </div>
            </div>
        </div>

    </div>

    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('collectionFilter', ({initialBrand, initialDealer, initialCustomer, initialProduct}) => ({
                    brandId: initialBrand,
                    dealerId: initialDealer,
                    customerId: initialCustomer,
                    productId: initialProduct,
                    dealers: [],
                    customers: [],
                    products: [],

                    async init() {
                        await this.loadDealers(true);
                        await this.loadProducts(true);
                        await this.loadCustomers(true);
                    },

                    async onBrandChange() {
                        this.dealerId = 'All';
                        this.customerId = 'All';
                        this.productId = 'All';

                        await this.loadDealers(false);
                        await this.loadProducts(false);
                    },

                    async loadProducts(isInit = false) {
                        try {
                            this.products = [];
                            const apiUrl = "{{ url('api/report/products') }}/" + this.brandId;
                            const response = await fetch(apiUrl);
                            if (!response.ok) console.error('Products fetch failed', response.status, apiUrl);
                            this.products = await response.json();

                            if (isInit && this.productId !== 'All') {
                                const exists = this.products.some(p => p.id == this.productId);
                                if (!exists) this.productId = 'All';
                            }
                        } catch (e) {
                            console.error('Products network error', e);
                        }
                    },

                    async loadDealers(isInit = false) {
                        try {
                            this.dealers = [];
                            this.customers = [];

                            if (!isInit) {
                                this.dealerId = 'All';
                                this.customerId = 'All';
                            }

                            const apiUrl = "{{ url('api/report/dealers') }}/" + this.brandId;
                            const response = await fetch(apiUrl);
                            if (!response.ok) console.error('Dealers fetch failed', response.status, apiUrl);
                            const data = await response.json();

                            this.dealers = data.dealers;
                            this.customers = data.customers;

                            if (isInit && this.dealerId !== 'All') {
                                const exists = this.dealers.some(d => d.id == this.dealerId);
                                if (!exists) this.dealerId = 'All';
                            }
                        } catch (e) {
                            console.error('Dealers network error', e);
                        }
                    },

                    async loadCustomers(isInit = false) {
                        try {
                            this.customers = [];
                            if (!isInit) {
                                this.customerId = 'All';
                            }

                            let apiUrl;
                            if (this.dealerId === 'All') {
                                apiUrl = "{{ url('api/report/customers') }}/All/" + this.brandId;
                            } else {
                                apiUrl = "{{ url('api/report/customers') }}/" + this.dealerId + "/" + this.brandId;
                            }

                            const response = await fetch(apiUrl);
                            if (!response.ok) console.error('Customers fetch failed', response.status, apiUrl);
                            this.customers = await response.json();

                            if (isInit && this.customerId !== 'All') {
                                const exists = this.customers.some(c => c.id == this.customerId);
                                if (!exists) this.customerId = 'All';
                            }
                        } catch (e) {
                            console.error('Customers network error', e);
                        }
                    }
                }));

                Alpine.store('setLockTimeModal', {
                    showLockTimeModal: false,
                    showEditModal: false,
                    editData: {}, // <-- Add this line
                    errors: {},
                    async sendReminderRequest() {
                        const form = document.getElementById('sendReminderForm');
                        const formData = new FormData(form);
                        this.errors = {};
                        try {
                            const response = await fetch(`{{route('vtrust_set_lock_time.store')}}`, {
                                method: 'POST',
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest',
                                    'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value,
                                },
                                body: formData
                            });
                            if (response.ok) {
                                this.setLockTimeModal = false;
                                form.reset();
                                window.location.reload();
                            } else if (response.status === 422) {
                                const data = await response.json();
                                this.errors = data.errors || {};
                            } else {
                                const data = await response.json();
                                alert(data.message || 'Submission failed');
                            }
                        } catch (e) {
                            alert('Submission failed');
                        }
                    }
                });
            });
        </script>
    @endpush
</x-app-layout>