@extends('layouts.app')

@section('title', isset($client) ? 'Add Locker' : 'Add New Customer')

@section('no-page-header')

@section('content')
<style>
    #add-locker-form .mb-4 { margin-bottom: .55rem !important; }
    #add-locker-form .mb-6 { margin-bottom: .85rem !important; }
    #add-locker-form label {
        margin-bottom: .25rem !important;
        font-size: .75rem;
        line-height: 1rem;
    }
    #add-locker-form input:not([type="hidden"]):not([type="checkbox"]),
    #add-locker-form select,
    #add-locker-form textarea {
        min-height: 2.15rem;
        padding: .4rem .65rem;
        font-size: .875rem;
        line-height: 1.2rem;
    }
    #add-locker-form h6.text-blue-600 {
        display: flex;
        align-items: center;
        margin: 0;
        padding: .35rem 0;
        border-bottom: 1px solid #e5e7eb;
        color: #374151;
        font-weight: 600;
    }
    #add-locker-form h6.text-blue-600 i { color: #64748b; }
    #add-locker-form .text-xs.text-gray-500 { display: none; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<div class="min-h-screen bg-gray-50 p-2 lg:p-4">
    <div class="max-w-7xl mx-auto">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 bg-white border-b border-gray-200 flex items-center justify-between">

                <!-- Left -->
                <div class="flex items-center gap-2">
                    <i class="fas fa-lock text-indigo-600 text-sm"></i>

                    <span class="text-sm font-semibold text-gray-900">
                        Add Locker
                    </span>

                    <span class="text-xs text-gray-400">
                        / {{ $client->name }}
                    </span>
                </div>

                <!-- Right -->
                <a href="{{ route('customers.show', $client->id) }}"
                    class="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-800 transition">

                    <i class="fas fa-arrow-left text-[10px]"></i>
                    <span class="font-medium">Back</span>
                </a>

            </div>
            <div class="p-4 bg-white">
                <form id="add-locker-form" action="{{ route('customers.lockers.store', $client->id) }}" method="POST">
                    @csrf

                    <!-- Financial Information -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-money-bill-wave mr-2"></i>
                                Charges
                            </h6>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-2">
                        <div>
                            <div class="mb-4">
                                <label for="tax_type" class="block text-sm font-medium text-gray-700 mb-2">Tax Type <span class="text-red-500 font-bold">*</span></label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('tax_type') border-red-500 @enderror" id="tax_type" name="tax_type" required>
                                    <option value="">Select Tax Type</option>
                                    <option value="SST" {{ old('tax_type', isset($client) ? $client->tax_type ?? '' : '') == 'SST' ? 'selected' : '' }}>SST (8%)</option>
                                    <option value="GST" {{ old('tax_type', isset($client) ? $client->tax_type ?? '' : '') == 'GST' ? 'selected' : '' }}>GST (8%)</option>
                                </select>
                                @error('tax_type')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500">Select tax type (SST or GST)</p>
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="stamping_fee" class="block text-sm font-medium text-gray-700 mb-2">Stamping Fee <span class="text-red-500 font-bold">*</span></label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('stamping_fee') border-red-500 @enderror" id="stamping_fee" name="stamping_fee"
                                    value="{{ old('stamping_fee', isset($client) ? $client->stamping_fee ?? 0 : 0) }}" placeholder="Enter stamping fee" min="0" step="0.01" required>
                                @error('stamping_fee')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500">Enter stamping fee (RM 0.00 and above)</p>
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="key_deposit" class="block text-sm font-medium text-gray-700 mb-2">Key Deposit <span class="text-red-500 font-bold">*</span></label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('key_deposit') border-red-500 @enderror" id="key_deposit" name="key_deposit"
                                    value="{{ old('key_deposit', isset($client) ? $client->key_deposit ?? 0 : 0) }}" placeholder="Enter key deposit" min="0" step="0.01" required>
                                @error('key_deposit')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500">Enter key deposit (RM 0.00 and above)</p>
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="insurance_charges" class="block text-sm font-medium text-gray-700 mb-2">Insurance Charges <span class="text-red-500 font-bold">*</span></label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('insurance_charges') border-red-500 @enderror" id="insurance_charges" name="insurance_charges"
                                    value="{{ old('insurance_charges', isset($client) ? $client->insurance_charges ?? 0 : 0) }}" placeholder="Enter insurance charges" min="0" step="0.01" required>
                                @error('insurance_charges')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500">Enter insurance charges (RM 0.00 and above)</p>
                            </div>
                        </div>

                        <!-- Discount Amount -->
                        <div>
                            <div class="mb-4">
                                <label for="discount_amount" class="block text-sm font-medium text-gray-700 mb-2">Discount Amount <span class="text-red-500 font-bold">*</span></label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('discount_amount') border-red-500 @enderror" id="discount_amount" name="discount_amount" value="{{ old('discount_amount', isset($client) ? $client->discount_amount ?? 0 : 0) }}" placeholder="Enter discount amount" min="0" step="0.01" required>
                                @error('discount_amount')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500">Enter discount amount (RM 0.00 and above)</p>
                            </div>
                        </div>

                        <div>
                            <div class="mb-4">
                                <label for="payment_mode" class="block text-sm font-medium text-gray-700 mb-2">Payment Mode <span class="text-red-500 font-bold">*</span></label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('payment_mode') border-red-500 @enderror" id="payment_mode" name="payment_mode" required>
                                    <option value="">Select Mode</option>
                                    <option value="cash" {{ old('payment_mode', isset($client) ? $client->payment_mode ?? '' : '') == 'cash' ? 'selected' : '' }}>Cash</option>
                                    <option value="bank_transfer" {{ old('payment_mode', isset($client) ? $client->payment_mode ?? '' : '') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                    <option value="debit_card" {{ old('payment_mode', isset($client) ? $client->payment_mode ?? '' : '') == 'debit_card' ? 'selected' : '' }}>Debit Card</option>
                                    <option value="fpx" {{ old('payment_mode', isset($client) ? $client->payment_mode ?? '' : '') == 'fpx' ? 'selected' : '' }}>FPX</option>
                                </select>
                                @error('payment_mode')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Safebox Type and Number Details -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-lock mr-2"></i>
                                Locker Selection
                            </h6>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-4">
                        <div>
                            <div class="mb-4">
                                <label for="safebox_count" class="block text-sm font-medium text-gray-700 mb-2">Number of Safeboxes <span class="text-red-500 font-bold">*</span></label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="openLockerModal()" id="safebox_count" name="safebox_count" required>
                                    <option value="">Select Count</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                                @error('safebox_count')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <!-- <div class="flex items-center">
                            <button type="button" onclick="openLockerModal()" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                                <i class="fas fa-check mr-2"></i>Check Available Lockers
                            </button>
                        </div> -->
                    </div>

                    <!-- Selected Lockers Display -->
                    <div id="selected-lockers-container" class="hidden">
                        <div class="mt-2 mb-4 rounded-lg border border-gray-200 bg-white overflow-hidden">
                            <div class="px-3 py-2 border-b border-gray-200 flex items-center justify-between">
                                <div class="text-sm font-semibold text-gray-900">Selected Lockers</div>
                                <button type="button" onclick="openLockerModal()" class="text-xs text-blue-600 hover:text-blue-700">
                                    Change
                                </button>
                            </div>
                            <div class="px-3 py-2">
                                <div id="selected-lockers-list" class="space-y-2 overflow-y-auto pr-1">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Hidden input to store selected lockers data -->
                    <input type="hidden" id="selected_lockers_data" name="selected_lockers_data" value="">
                    <input type="hidden" id="tax_amount" name="tax_amount" value="0">
                    <input type="hidden" id="final_amount" name="final_amount" value="0">

                    <!-- Contract & Payment Terms -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-handshake mr-2"></i>
                                Membership
                            </h6>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                        <div>
                            <div class="mb-4">
                                <label for="payment_terms" class="block text-sm font-medium text-gray-700 mb-2">Membership <span class="text-red-500 font-bold">*</span></label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('payment_terms') border-red-500 @enderror" id="payment_terms" name="payment_terms" required>

                                    <option value="">Select Membership</option>
                                    @foreach($membership_plan as $plan)
                                    <option value="{{ $plan->id }}" {{ old('payment_terms', isset($client) ? $client->payment_terms ?? '' : '') == $plan->id ? 'selected' : '' }}>
                                        {{ $plan->name }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('payment_terms')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="contract_start_date_display" class="block text-sm font-medium text-gray-700 mb-2">Membership Start Date <span class="text-red-500 font-bold">*</span></label>
                                <input type="hidden" id="contract_start_date" name="contract_start_date" value="{{ old('contract_start_date', isset($client) ? $client->contract_start_date ?? '' : '') }}" required>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('contract_start_date') border-red-500 @enderror" id="contract_start_date_display"
                                    value="" placeholder="dd-mm-yyyy" autocomplete="off">
                                @error('contract_start_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="contract_end_date_display" class="block text-sm font-medium text-gray-700 mb-2">Membership End Date <span class="text-red-500 font-bold">*</span></label>
                                <input type="hidden" id="contract_end_date" name="contract_end_date" value="{{ old('contract_end_date', isset($client) ? $client->contract_end_date ?? '' : '') }}" required>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('contract_end_date') border-red-500 @enderror" id="contract_end_date_display"
                                    value="" placeholder="dd-mm-yyyy" readonly autocomplete="off">
                                @error('contract_end_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                    </div>

                    <script>
                        document.getElementById('payment_terms').addEventListener('change', function() {
                            if (selectedLockers.length > 0) {
                                confirmLockerSelection();
                            }
                        });

                        function updateContractEndDate() {
                            var plan = document.getElementById('payment_terms').value;
                            var startDate = document.getElementById('contract_start_date').value;

                            if (plan && startDate) {
                                var startDateObj = new Date(startDate);
                                var endDateObj;

                                switch (plan) {
                                    case '1': // 1 Year
                                        endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 1));
                                        break;
                                    case '2': // 2 Years
                                        endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 2));
                                        break;
                                    case '3': // 3 Years
                                        endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 3));
                                        break;
                                    case '4': // 4 Years
                                        endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 4));
                                        break;
                                    default:
                                        endDateObj = null;
                                }

                                if (endDateObj) {
                                    // subtract 1 day
                                    endDateObj.setDate(endDateObj.getDate() - 1);

                                    var endDate = endDateObj.toISOString().split('T')[0];
                                    document.getElementById('contract_end_date').value = endDate;
                                    document.getElementById('contract_end_date_display').value = formatIsoToDisplay(endDate);
                                }
                            }
                        }

                        function formatIsoToDisplay(isoDate) {
                            if (!isoDate) return '';
                            var parts = isoDate.split('-');
                            if (parts.length !== 3) return '';
                            return parts[2] + '-' + parts[1] + '-' + parts[0];
                        }

                        function formatDisplayToIso(displayDate) {
                            if (!displayDate) return '';
                            var parts = displayDate.split('-');
                            if (parts.length !== 3) return '';
                            return parts[2] + '-' + parts[1] + '-' + parts[0];
                        }

                        $(function() {
                            var startIso = document.getElementById('contract_start_date').value;
                            var endIso = document.getElementById('contract_end_date').value;
                            document.getElementById('contract_start_date_display').value = formatIsoToDisplay(startIso);
                            document.getElementById('contract_end_date_display').value = formatIsoToDisplay(endIso);

                            $('#contract_start_date_display').datepicker({
                                dateFormat: 'dd-mm-yy',
                                onSelect: function(dateText) {
                                    document.getElementById('contract_start_date').value = formatDisplayToIso(dateText);
                                    updateContractEndDate();
                                }
                            });

                            $('#contract_end_date_display').datepicker({
                                dateFormat: 'dd-mm-yy'
                            });

                            document.getElementById('contract_start_date_display').addEventListener('change', function() {
                                var iso = formatDisplayToIso(this.value);
                                document.getElementById('contract_start_date').value = iso;
                                updateContractEndDate();
                            });

                            updateContractEndDate();
                        });

                        document.getElementById('payment_terms').addEventListener('change', updateContractEndDate);
                    </script>

                    <!-- <div class="grid grid-cols-1 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
                                <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('notes') border-red-500 @enderror" id="notes" name="notes" rows="3"
                                    placeholder="Any additional notes about this Customer...">{{ old('notes', $client->notes ?? '') }}</textarea>
                                @error('notes')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div> -->

                    <div class="flex justify-end gap-2 mt-4">

                        <!-- Cancel -->
                        <a href="{{ route('customers.show', $client->id) }}"
                            class="inline-flex items-center gap-1 px-3 py-2 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100 transition">

                            <i class="fas fa-times text-xs"></i>
                            Cancel
                        </a>

                        <!-- Save -->
                        <button type="submit"
                            class="inline-flex items-center gap-1 px-4 py-2 text-sm bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">

                            <i class="fas fa-save text-xs"></i>
                            Add Locker
                        </button>

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

<!-- Loading Modal -->
<div id="loadingModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-5 border w-80 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Please Wait</h3>
            <p class="text-sm text-gray-500">Fetching available lockers...</p>
        </div>
    </div>
</div>

<!-- Locker Selection Modal -->
<div id="lockerModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Select Available Lockers</h3>
                <button type="button" onclick="closeLockerModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <!-- Filters -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Locker Group</label>
                    <select id="filterGroup" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">All Groups</option>
                        @foreach($locker_groups as $locker_group)
                        <option value="{{ $locker_group->id }}">{{ $locker_group->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Locker Size</label>
                    <select id="filterSize" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">All Sizes</option>
                        <option value="small">Small</option>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                        <!-- <option value="extra_large">Extra Large</option> -->
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Locker Type</label>
                    <select id="filterType" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">All Types</option>
                        <option value="default">Default Number</option>
                        <option value="fancy">Fancy Number (VIP)</option>
                    </select>
                </div>
                <div class="flex items-end">
                    <button type="button" onclick="applyFilters()" class="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
                        <i class="fas fa-filter mr-2"></i>Filters
                    </button>
                </div>
            </div>

            <!-- Selection Info -->
            <div class="mb-4 p-3 bg-blue-50 rounded-md">
                <p class="text-sm text-blue-800">
                    <i class="fas fa-info-circle mr-2"></i>
                    Select <span id="requiredCount" class="font-semibold">0</span> locker(s) •
                    Selected: <span id="selectedCount" class="font-semibold">0</span>
                </p>
            </div>

            <!-- Lockers Grid -->
            <div id="lockersGrid" class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 mb-6 max-h-96 overflow-y-auto">
                <!-- Lockers will be dynamically generated here -->
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end gap-3">
                <button type="button" onclick="closeLockerModal()" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                    Cancel
                </button>
                <button type="button" onclick="confirmLockerSelection()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                    Confirm Selection
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const membership = document.getElementById('payment_terms');

        if (membership) {
            membership.addEventListener('change', function() {
                // Clear Membership Start Date and End Date when membership changes
                document.getElementById('contract_start_date').value = '';
                document.getElementById('contract_end_date').value = '';

                if (selectedLockers.length > 0) {
                    confirmLockerSelection();
                }
            });
        }


    });

    // Locker management functions
    let selectedLockers = [];
    let availableLockers = [];

    // Fetch available lockers from database
    async function fetchAvailableLockers(size = '', type = '', group = '') {
        try {
            const response = await fetch(`/clients/lockers/available?size=${size}&type=${type}&group=${group}`);
            const result = await response.json();

            if (result.success) {
                return result.lockers.map(locker => ({
                    id: locker.id,
                    number: locker.locker_number,
                    size: locker.locker_size.toLowerCase().replace(' ', '_'),
                    type: locker.locker_type.toLowerCase(),
                    locker_group: locker.name || 'N/A',
                    locker_position: locker.locker_row_column || 'N/A',
                    amount: locker.locker_amount || '0',
                    available: locker.status === 'Available'
                }));
            } else {
                console.error('Error fetching lockers:', result.message);
                return [];
            }
        } catch (error) {
            console.error('Error fetching lockers:', error);
            return [];
        }
    }

    async function openLockerModal() {
        const countSelect = document.getElementById('safebox_count');
        const count = parseInt(countSelect.value);

        if (!count || count < 1 || count > 5) {
            alert('Please select a valid number of safeboxes (1-5).');
            return;
        }

        // Show loading modal
        document.getElementById('loadingModal').classList.remove('hidden');

        // Reset selection
        selectedLockers = [];

        try {
            // Fetch available lockers from database
            availableLockers = await fetchAvailableLockers('', '', '');

            // Update UI
            document.getElementById('requiredCount').textContent = count;
            document.getElementById('selectedCount').textContent = '0';

            // Generate locker grid
            renderLockersGrid();

            // Hide loading modal and show locker modal
            document.getElementById('loadingModal').classList.add('hidden');
            document.getElementById('lockerModal').classList.remove('hidden');
        } catch (error) {
            // Hide loading modal on error
            document.getElementById('loadingModal').classList.add('hidden');
            alert('Failed to fetch lockers. Please try again.');
        }
    }

    function closeLockerModal() {
        document.getElementById('lockerModal').classList.add('hidden');
    }

    async function applyFilters() {
        const sizeFilter = document.getElementById('filterSize').value;
        const typeFilter = document.getElementById('filterType').value;
        const groupFilter = document.getElementById('filterGroup').value;

        // Show loading modal
        document.getElementById('loadingModal').querySelector('p').textContent = 'Applying filters...';
        document.getElementById('loadingModal').classList.remove('hidden');

        try {
            // Fetch filtered lockers from database
            availableLockers = await fetchAvailableLockers(sizeFilter, typeFilter, groupFilter);
            renderLockersGrid();
        } finally {
            // Hide loading modal
            document.getElementById('loadingModal').classList.add('hidden');
            document.getElementById('loadingModal').querySelector('p').textContent = 'Fetching available lockers...';
        }
    }

    function renderLockersGrid() {
        const grid = document.getElementById('lockersGrid');
        grid.innerHTML = '';

        availableLockers.forEach(locker => {
            const lockerElement = document.createElement('div');
            const isSelected = selectedLockers.some(l => String(l.id) === String(locker.id));
            const sizeColor = {
                small: 'bg-green-100 text-green-800 border-green-300',
                medium: 'bg-blue-100 text-blue-800 border-blue-300',
                large: 'bg-yellow-100 text-yellow-800 border-yellow-300',
                extra_large: 'bg-purple-100 text-purple-800 border-purple-300'
            } [locker.size];

            const isFancy = locker.type === 'fancy';
            const typeIcon = isFancy ? '<i class="fas fa-star text-yellow-500"></i>' : '';

            lockerElement.className = `relative group cursor-pointer transition-all duration-200 hover:scale-105 ${
            !locker.available ? 'bg-gray-100 border-gray-300 opacity-50 cursor-not-allowed' :
            isSelected ? 'bg-gradient-to-br from-blue-500 to-blue-600 text-white border-blue-600 shadow-lg' :
            isFancy ? 'bg-gradient-to-br from-amber-50 to-yellow-50 border-2 border-amber-400 hover:border-amber-500 shadow-sm' :
            'bg-white border-gray-300 hover:border-blue-400 hover:shadow-sm'
        } rounded-xl p-3 border-2 min-h-[140px] flex flex-col justify-between`;

            lockerElement.innerHTML = `
            <div class="flex flex-col h-full justify-between">
                <div class="text-center">
                    <div class="font-bold text-base ${isSelected ? 'text-white' : 'text-gray-900'} mb-1">
                        ${locker.number}
                    </div>
                    <div class="${isSelected ? 'bg-white bg-opacity-20 text-white' : sizeColor} px-2 py-1 rounded-full text-xs font-medium inline-block mb-2">
                        ${locker.size.replace('_', ' ').toUpperCase()}
                    </div>
                    ${typeIcon ? `<div class="text-yellow-500 text-xs mb-2">${typeIcon}</div>` : ''}
                </div>
                
                <div class="text-center space-y-1 mt-auto">
                    <div class="text-xs ${isSelected ? 'text-blue-100' : 'text-gray-600'} font-medium">
                        ${locker.locker_group || 'N/A'}
                    </div>
                    <div class="text-xs ${isSelected ? 'text-blue-100' : 'text-gray-600'} font-medium">
                        ${locker.locker_position || 'N/A'}
                    </div>
                    <div class="text-xs font-bold ${isSelected ? 'text-white' : 'text-green-600'} pt-1 border-t ${isSelected ? 'border-blue-400' : 'border-gray-200'}">
                        RM ${locker.amount ? parseFloat(locker.amount).toFixed(2) : '0.00'}
                    </div>
                </div>
                
                ${!locker.available ? '<div class="absolute inset-0 bg-gray-900 bg-opacity-60 rounded-xl flex items-center justify-center"><span class="text-white text-xs font-medium">Unavailable</span></div>' : ''}
            </div>
        `;

            if (locker.available) {
                lockerElement.onclick = () => toggleLockerSelection(locker);
            }

            grid.appendChild(lockerElement);
        });
    }

    function toggleLockerSelection(locker) {
        const countSelect = document.getElementById('safebox_count');
        const requiredCount = parseInt(countSelect.value);

        const index = selectedLockers.findIndex(l => String(l.id) === String(locker.id));

        if (index > -1) {
            // Remove from selection
            selectedLockers.splice(index, 1);
        } else {
            // Add to selection if not exceeding required count
            if (selectedLockers.length >= requiredCount) {
                alert(`You can only select ${requiredCount} locker(s).`);
                return;
            }
            selectedLockers.push(locker);
        }

        // Update UI
        document.getElementById('selectedCount').textContent = selectedLockers.length;
        renderLockersGrid();
    }

    function getSelectedYears() {
        let plan = document.getElementById('payment_terms').value;
        return parseInt(plan) || 1;
    }

    function confirmLockerSelection() {
        const countSelect = document.getElementById('safebox_count');
        const requiredCount = parseInt(countSelect.value);

        if (selectedLockers.length !== requiredCount) {
            alert(`Please select exactly ${requiredCount} locker(s). You have selected ${selectedLockers.length}.`);
            return;
        }

        const container = document.getElementById('selected-lockers-container');
        const list = document.getElementById('selected-lockers-list');

        list.innerHTML = '';

        let years = getSelectedYears();

        // 🔹 LOCKER DISPLAY
        selectedLockers.forEach((locker, index) => {
            const lockerItem = document.createElement('div');
            lockerItem.className = 'p-3 bg-white border border-gray-200 rounded-md';

            const baseAmount = parseFloat(locker.amount || 0);
            const amount = (baseAmount * years).toFixed(2);

            const sizeLabel = locker.size.replace('_', ' ').toUpperCase();
            const typeLabel = locker.type === 'fancy' ? 'Fancy' : 'Standard';

            lockerItem.innerHTML = `
        <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
                <div class="flex items-center gap-2">
                    <div class="text-sm font-semibold text-gray-900">${index + 1}. ${locker.number}</div>
                    <span class="text-[11px] px-2 py-0.5 rounded-full bg-gray-100 text-gray-700">${sizeLabel}</span>
                    <span class="text-[11px] px-2 py-0.5 rounded-full ${locker.type === 'fancy' ? 'bg-amber-50 text-amber-700' : 'bg-blue-50 text-blue-700'}">${typeLabel}</span>
                </div>

                <div class="text-xs text-gray-500 mt-1">
                    RM ${baseAmount.toFixed(2)} × ${years} year(s)
                </div>

                <div class="text-xs text-gray-500">
                    ${locker.locker_group || 'N/A'} • ${locker.locker_position || 'N/A'}
                </div>
            </div>

            <div class="text-sm font-bold text-gray-900 whitespace-nowrap">
                RM ${amount}
            </div>
        </div>
        `;

            list.appendChild(lockerItem);
        });

        // 🔹 CALCULATION
        const totalAmount = selectedLockers.reduce((sum, locker) => {
            return sum + (parseFloat(locker.amount || 0) * years);
        }, 0);

        const discountAmount = parseFloat(document.getElementById('discount_amount').value) || 0;
        const taxType = document.getElementById('tax_type').value;
        const stampingFee = parseFloat(document.getElementById('stamping_fee').value) || 0;
        const keyDeposit = parseFloat(document.getElementById('key_deposit').value) || 0;
        const insuranceCharges = parseFloat(document.getElementById('insurance_charges').value) || 0;

        const subtotalAfterDiscount = totalAmount - discountAmount;

        const taxAmount = (taxType === 'SST' || taxType === 'GST') ? subtotalAfterDiscount * 0.08 : 0;

        const finalAmount = subtotalAfterDiscount + taxAmount + stampingFee + keyDeposit + insuranceCharges;

        // 🔹 SUMMARY
        const summaryWrap = document.createElement('div');
        summaryWrap.className = 'mt-2 p-3 bg-gray-50 border border-gray-200 rounded-md';

        const summaryRows = [];

        summaryRows.push({
            label: `Locker Amount (${years} year${years > 1 ? 's' : ''})`,
            value: `RM ${totalAmount.toFixed(2)}`
        });

        if (discountAmount > 0)
            summaryRows.push({
                label: 'Discount',
                value: `- RM ${discountAmount.toFixed(2)}`
            });

        if (taxAmount > 0)
            summaryRows.push({
                label: `Tax (${taxType} 8%)`,
                value: `RM ${taxAmount.toFixed(2)}`
            });

        if (stampingFee > 0)
            summaryRows.push({
                label: 'Stamping Fee',
                value: `RM ${stampingFee.toFixed(2)}`
            });

        if (keyDeposit > 0)
            summaryRows.push({
                label: 'Key Deposit',
                value: `RM ${keyDeposit.toFixed(2)}`
            });

        if (insuranceCharges > 0)
            summaryRows.push({
                label: 'Insurance',
                value: `RM ${insuranceCharges.toFixed(2)}`
            });

        const rowsHtml = summaryRows.map(r => `
        <div class="flex items-center justify-between text-sm py-1">
            <div class="text-gray-600">${r.label}</div>
            <div class="font-medium text-gray-900">${r.value}</div>
        </div>
    `).join('');

        summaryWrap.innerHTML = `
        <div class="text-xs font-semibold text-gray-700 mb-1">Charges Summary</div>
        <div class="divide-y divide-gray-200">${rowsHtml}</div>
        <div class="mt-2 pt-2 border-t flex justify-between">
            <div class="font-semibold">Final Amount</div>
            <div class="font-bold text-green-700">RM ${finalAmount.toFixed(2)}</div>
        </div>
    `;

        list.appendChild(summaryWrap);

        document.getElementById('selected_lockers_data').value = JSON.stringify(selectedLockers);
        document.getElementById('tax_amount').value = taxAmount.toFixed(2);
        document.getElementById('final_amount').value = finalAmount.toFixed(2);
        container.classList.remove('hidden');

        closeLockerModal();
    }

    // Function to update the calculation display when discount changes
    function updateDiscountCalculation() {
        const container = document.getElementById('selected-lockers-container');
        if (container.classList.contains('hidden') || selectedLockers.length === 0) {
            return;
        }

        // Re-render the selected lockers display with updated discount
        confirmLockerSelection();
    }

    // Add event listener for discount amount changes
    document.addEventListener('DOMContentLoaded', function() {
        const discountInput = document.getElementById('discount_amount');
        if (discountInput) {
            discountInput.addEventListener('input', function() {
                validateDiscountAmount();
                updateDiscountCalculation();
            });
            discountInput.addEventListener('change', function() {
                validateDiscountAmount();
                updateDiscountCalculation();
            });
        }

        // Tax type change event
        const taxTypeInput = document.getElementById('tax_type');
        if (taxTypeInput) {
            taxTypeInput.addEventListener('change', function() {
                updateDiscountCalculation();
            });
        }

        // Stamping fee events
        const stampingFeeInput = document.getElementById('stamping_fee');
        if (stampingFeeInput) {
            stampingFeeInput.addEventListener('input', function() {
                updateDiscountCalculation();
            });
            stampingFeeInput.addEventListener('change', function() {
                updateDiscountCalculation();
            });
        }

        // Key deposit events
        const keyDepositInput = document.getElementById('key_deposit');
        if (keyDepositInput) {
            keyDepositInput.addEventListener('input', function() {
                updateDiscountCalculation();
            });
            keyDepositInput.addEventListener('change', function() {
                updateDiscountCalculation();
            });
        }

        // Insurance charges events
        const insuranceChargesInput = document.getElementById('insurance_charges');
        if (insuranceChargesInput) {
            insuranceChargesInput.addEventListener('input', function() {
                updateDiscountCalculation();
            });
            insuranceChargesInput.addEventListener('change', function() {
                updateDiscountCalculation();
            });
        }
    });

    // Function to validate discount amount in real-time
    function validateDiscountAmount() {
        const discountInput = document.getElementById('discount_amount');
        const discountAmount = parseFloat(discountInput.value) || 0;

        // Clear previous validation states
        discountInput.classList.remove('border-red-500', 'border-green-500');

        // Remove existing error messages
        const existingError = discountInput.parentNode.querySelector('.text-red-600');
        if (existingError && existingError.textContent.includes('Discount')) {
            existingError.remove();
        }

        // Validate negative values
        if (discountAmount < 0) {
            discountInput.classList.add('border-red-500');
            addErrorAfter(discountInput, 'Discount amount cannot be negative');
            return false;
        }

        // Validate discount doesn't exceed total amount (if lockers are selected)
        if (selectedLockers.length > 0) {
            let years = getSelectedYears();

            const totalAmount = selectedLockers.reduce((sum, locker) => {
                return sum + (parseFloat(locker.amount || 0) * years);
            }, 0);
            if (discountAmount > totalAmount) {
                discountInput.classList.add('border-red-500');
                addErrorAfter(discountInput, `Discount cannot exceed total amount of RM ${totalAmount.toFixed(2)}`);
                return false;
            }
        }

        // If valid, add green border for positive feedback
        if (discountAmount > 0) {
            discountInput.classList.add('border-green-500');
        }

        return true;
    }

    // AJAX Form submission
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form[action*="clients"]');

        form.addEventListener('submit', function(e) {
            e.preventDefault();

            // Clear previous error states
            document.querySelectorAll('.border-red-500').forEach(el => {
                el.classList.remove('border-red-500');
            });
            document.querySelectorAll('.text-red-600').forEach(el => {
                if (el.textContent.includes('Please select') || el.textContent.includes('must be') || el.textContent.includes('Invalid')) {
                    el.remove();
                }
            });

            // Client-side validation
            let isValid = true;
            let errorMessage = '';

            // Validate date_of_birth
            const dateOfBirth = document.getElementById('date_of_birth');
            if (dateOfBirth && dateOfBirth.value) {
                const birthDate = new Date(dateOfBirth.value);
                const today = new Date();
                today.setHours(0, 0, 0, 0);

                if (birthDate >= today) {
                    isValid = false;
                    errorMessage += 'Date of birth must be before today. ';
                    dateOfBirth.classList.add('border-red-500');
                    addErrorAfter(dateOfBirth, 'Date of birth must be before today');
                }
            }

            // Validate contract_start_date
            const contractStartDate = document.getElementById('contract_start_date');
            if (contractStartDate && !contractStartDate.value) {
                isValid = false;
                errorMessage += 'Membership start date is required. ';
                contractStartDate.classList.add('border-red-500');
                addErrorAfter(contractStartDate, 'Membership start date is required');
            }

            if (contractStartDate && contractStartDate.value) {
                const startDate = new Date(contractStartDate.value);

                // Check if it's after date_of_birth
                if (dateOfBirth && dateOfBirth.value) {
                    const birthDate = new Date(dateOfBirth.value);
                    if (startDate < birthDate) {
                        isValid = false;
                        errorMessage += 'Contract start date must be on or after date of birth. ';
                        contractStartDate.classList.add('border-red-500');
                        addErrorAfter(contractStartDate, 'Contract start date must be on or after date of birth');
                    }
                }
            }

            // Validate contract_end_date
            const contractEndDate = document.getElementById('contract_end_date');
            if (contractEndDate && !contractEndDate.value) {
                isValid = false;
                errorMessage += 'Membership end date is required. ';
                contractEndDate.classList.add('border-red-500');
                addErrorAfter(contractEndDate, 'Membership end date is required');
            }

            // Validate selected_lockers_data
            const selectedLockersData = document.getElementById('selected_lockers_data');
            if (selectedLockersData) {
                try {
                    const lockers = JSON.parse(selectedLockersData.value || '[]');
                    if (!Array.isArray(lockers) || lockers.length === 0) {
                        isValid = false;
                        errorMessage += 'Please select at least one locker. ';
                        addErrorAfter(document.getElementById('safebox_count'), 'Please select at least one locker');
                    }
                } catch (e) {
                    isValid = false;
                    errorMessage += 'Invalid locker selection data. ';
                    addErrorAfter(document.getElementById('safebox_count'), 'Invalid locker selection data');
                }
            }

            // Validate discount amount
            const discountAmountInput = document.getElementById('discount_amount');
            const discountAmount = parseFloat(discountAmountInput.value) || 0;

            if (discountAmount < 0) {
                isValid = false;
                errorMessage += 'Discount amount cannot be negative. ';
                discountAmountInput.classList.add('border-red-500');
                addErrorAfter(discountAmountInput, 'Discount amount cannot be negative');
            }

            // Validate discount doesn't exceed total amount
            if (selectedLockersData && selectedLockers.length > 0) {
                let years = getSelectedYears();

                const totalAmount = selectedLockers.reduce((sum, locker) => {
                    return sum + (parseFloat(locker.amount || 0) * years);
                }, 0);

                if (discountAmount > totalAmount) {
                    isValid = false;
                    errorMessage += 'Discount amount cannot exceed total amount. ';
                    discountAmountInput.classList.add('border-red-500');
                    addErrorAfter(discountAmountInput, `Discount cannot exceed total amount of RM ${totalAmount.toFixed(2)}`);
                }
            }

            if (!isValid) {
                alert('Please fix the following errors:\n' + errorMessage);

                // Focus on first invalid field
                const firstInvalidField = document.querySelector('.border-red-500');
                if (firstInvalidField) {
                    firstInvalidField.focus();
                    firstInvalidField.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }

                return false;
            }

            // Show loading state
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Saving...';

            // Get form data
            const formData = new FormData(form);

            // Determine if it's an edit or create operation
            const isEdit = form.querySelector('input[name="_method"]')?.value === 'PUT';
            const url = isEdit ? form.action : form.action;
            const method = isEdit ? 'POST' : 'POST';

            // Add _method field for PUT requests
            if (isEdit) {
                formData.set('_method', 'PUT');
            }

            // Submit via AJAX
            fetch(url, {
                    method: method,
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || document.querySelector('input[name="_token"]')?.value
                    },
                    credentials: 'same-origin'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Show success message
                        showNotification(data.message, 'success');

                        // Redirect after a short delay
                        setTimeout(() => {
                            window.location.href = data.redirect;
                        }, 1000);
                    } else {
                        // Handle validation errors
                        if (data.errors) {
                            displayValidationErrors(data.errors);
                        }

                        // Show error message
                        showNotification(data.message || 'An error occurred while saving.', 'error');

                        // Reset button
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showNotification('An unexpected error occurred. Please try again.', 'error');

                    // Reset button
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                });
        });

        function addErrorAfter(element, message) {
            const errorDiv = document.createElement('p');
            errorDiv.className = 'mt-1 text-sm text-red-600';
            errorDiv.textContent = message;
            element.parentNode.appendChild(errorDiv);
        }

        function displayValidationErrors(errors) {
            // Clear existing errors
            document.querySelectorAll('.text-red-600').forEach(el => {
                if (el.textContent.includes('required') || el.textContent.includes('invalid') || el.textContent.includes('must')) {
                    el.remove();
                }
            });

            // Display new errors with enhanced format
            Object.keys(errors).forEach(field => {
                const input = document.querySelector(`[name="${field}"]`);
                if (input) {
                    input.classList.add('border-red-500');
                    // Handle both single errors and arrays
                    const errorMessages = Array.isArray(errors[field]) ? errors[field].join(', ') : errors[field];
                    addErrorAfter(input, errorMessages);
                }
            });
        }

        function showNotification(message, type) {
            // Create notification element
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 p-4 rounded-md shadow-lg z-50 ${
                type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
            }`;
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
                    <span>${message}</span>
                </div>
            `;

            // Add to page
            document.body.appendChild(notification);

            // Remove after 3 seconds
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    });
</script>
@endpush