@extends('layouts.app')

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

@section('no-page-header')

@section('content')
    <style>
        #customer-registration-form .mb-4 {
            margin-bottom: .55rem !important;
        }

        #customer-registration-form .mb-6 {
            margin-bottom: .85rem !important;
        }

        #customer-registration-form label {
            font-size: .75rem;
            line-height: 1rem;
            margin-bottom: .25rem !important;
        }

        #customer-registration-form input:not([type="hidden"]):not([type="checkbox"]),
        #customer-registration-form select:not(#country_code),
        #customer-registration-form textarea {
            min-height: 2.15rem;
            padding: .4rem .65rem;
            font-size: .875rem;
            line-height: 1.2rem;
        }

        #customer-registration-form textarea {
            min-height: 2.8rem;
        }

        #customer-registration-form #phone {
            min-width: 0;
            width: 100%;
            height: 2.15rem;
        }

        #customer-registration-form #country_code {
            height: 2.15rem;
            min-height: 2.15rem;
            padding-top: 0;
            padding-bottom: 0;
        }

        #customer-registration-form h6.text-blue-600 {
            display: flex;
            align-items: center;
            margin: 0;
            padding: .35rem 0;
            border-bottom: 1px solid #e5e7eb;
            background: transparent;
            color: #374151;
            font-weight: 600;
        }

        #customer-registration-form h6.text-blue-600 i {
            color: #64748b;
        }

        #customer-registration-form h6.text-blue-600+p {
            margin-top: .25rem;
            font-size: .75rem;
        }

        #customer-registration-form .text-xs.text-gray-500 {
            line-height: 1rem;
            margin-top: .15rem;
        }
    </style>
    <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">
                <div
                    class="px-4 py-3 border-b border-gray-200 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
                    <h5 class="text-base font-semibold text-gray-800 m-0 flex items-center">
                        <i class="fas fa-building mr-2 text-gray-500"></i>
                        @if (isset($client))
                            Edit Client
                        @else
                            Add New Customer
                        @endif
                    </h5>
                    <a href="{{ route('customers.index') }}"
                        class="inline-flex items-center self-start sm:self-auto px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors">
                        <i class="fas fa-arrow-left mr-2 text-xs"></i>Back to Customers
                    </a>
                </div>


                <!--            @if (session('success'))
    -->
                <!--    <div class="alert alert-success mt-3">-->
                <!--        {{ session('success') }}-->
                <!--    </div>-->
                <!--
    @endif-->

                <!--@if (session('error'))
    -->
                <!--    <div class="alert alert-danger mt-3">-->
                <!--        {{ session('error') }}-->
                <!--    </div>-->
                <!--
    @endif-->

                <!--    <form action="{{ route('clients.import') }}"-->
                <!--        method="POST"-->
                <!--        enctype="multipart/form-data">-->

                <!--    @csrf-->

                <!--    <label class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors cursor-pointer">-->

                <!--        <i class="fas fa-file-import mr-2"></i>-->
                <!--        Import CSV-->

                <!--        <input type="file"-->
                <!--               name="file"-->
                <!--               accept=".csv"-->
                <!--               class="hidden"-->
                <!--               onchange="this.form.submit()">-->

                <!--    </label>-->
                <!--</form>-->

                <!--@if (session('import_results'))-->

                <!--    <div class="table-responsive mt-4">-->

                <!--        <table class="table table-bordered">-->

                <!--            <thead>-->
                <!--                <tr>-->
                <!--                    <th>Name</th>-->
                <!--                    <th>Phone</th>-->
                <!--                    <th>Locker</th>-->
                <!--                    <th>Status</th>-->
                <!--                    <th>Message</th>-->
                <!--                </tr>-->
                <!--            </thead>-->

                <!--            <tbody>-->

                <!--                @foreach (session('import_results') as $result)
    -->

                <!--                    <tr>-->

                <!--                        <td>{{ $result['name'] ?? '-' }}</td>-->

                <!--                        <td>{{ $result['phone'] ?? '-' }}</td>-->

                <!--                        <td>{{ $result['locker'] ?? '-' }}</td>-->

                <!--                        <td>-->
                <!--                            @if ($result['status'] == 'success')
    -->
                <!--                                <span class="badge bg-success">-->
                <!--                                    Success-->
                <!--                                </span>-->
            <!--                            @else-->
                <!--                                <span class="badge bg-danger">-->
                <!--                                    Failed-->
                <!--                                </span>-->
                <!--
    @endif-->
                <!--                        </td>-->

                <!--                        <td>{{ $result['message'] }}</td>-->

                <!--                    </tr>-->

                <!--
    @endforeach-->

                <!--            </tbody>-->

                <!--        </table>-->

                <!--    </div>-->

                <!--@endif-->


                <!--<form action="{{ route('clients.import') }}"-->
                <!--      method="POST"-->
                <!--      enctype="multipart/form-data">-->

                <!--    @csrf-->

                <!--    <label class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors cursor-pointer">-->

                <!--        <i class="fas fa-file-import mr-2"></i>-->
                <!--        Import CSV-->

                <!--        <input type="file"-->
                <!--               name="file"-->
                <!--               accept=".csv"-->
                <!--               class="hidden"-->
                <!--               onchange="this.form.submit()">-->

                <!--    </label>-->
                <!--</form>-->

                <!--{{-- Success Message --}}-->
                <!--@if (session('success'))
    -->
                <!--    <div class="alert alert-success mt-3">-->
                <!--        {{ session('success') }}-->
                <!--    </div>-->
                <!--
    @endif-->

                <!--{{-- Import Report --}}-->
                <!--@if (session('import_results'))-->

                <!--    <div class="card mt-4 shadow-sm border-0">-->

                <!--        <div class="card-header bg-dark text-white">-->
                <!--            Import Report-->
                <!--        </div>-->

                <!--        <div class="card-body p-0">-->

                <!--            <table class="table table-bordered table-striped mb-0">-->

                <!--                <thead class="table-light">-->
                <!--                    <tr>-->
                <!--                        <th>#</th>-->
                <!--                        <th>Name</th>-->
                <!--                        <th>Phone</th>-->
                <!--                        <th>Locker</th>-->
                <!--                        <th>Locker Group</th>-->
                <!--                        <th>Status</th>-->
                <!--                        <th>Message</th>-->
                <!--                    </tr>-->
                <!--                </thead>-->

                <!--                <tbody>-->

                <!--                    @foreach (session('import_results') as $result)
    -->

                <!--                        <tr>-->

                <!--                            <td>{{ $loop->iteration }}</td>-->

                <!--                            <td>{{ $result['name'] ?? '-' }}</td>-->

                <!--                            <td>{{ $result['phone'] ?? '-' }}</td>-->

                <!--                            <td>{{ $result['locker'] ?? '-' }}</td>-->

                <!--                            <td>{{ $result['locker_group'] ?? '-' }}</td>-->

                <!--                            <td>-->

                <!--                                @if ($result['status'] == 'success')
    -->

                <!--                                    <span class="badge bg-success">-->
                <!--                                        Inserted-->
                <!--                                    </span>-->

            <!--                                @else-->

                <!--                                    <span class="badge bg-danger">-->
                <!--                                        Failed-->
                <!--                                    </span>-->

                <!--
    @endif-->

                <!--                            </td>-->

                <!--                            <td>{{ $result['message'] }}</td>-->

                <!--                        </tr>-->

                <!--
    @endforeach-->

                <!--                </tbody>-->

                <!--            </table>-->

                <!--        </div>-->

                <!--    </div>-->

                <!--@endif -->


                <div class="p-4">
                    <form id="customer-registration-form"
                        action="{{ isset($client) ? route('clients.update', $client->id) : route('clients.store') }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @if (isset($client))
                            @method('PUT')
                        @endif

                        <!-- Company Information -->
                        <div class="mb-6">
                            <div class="w-full">
                                <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                    <i class="fas fa-building mr-2"></i>
                                    Customer Setup
                                </h6>
                                <!-- <p class="text-gray-500 text-sm">Basic information about the customer.</p> -->
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                            <div>
                                <div class="mb-4">
                                    <label for="account_type" class="block text-sm font-medium text-gray-700 mb-2">Account
                                        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('account_type') border-red-500 @enderror"
                                        id="account_type" name="account_type" required>
                                        <option value="">Select Type</option>
                                        @foreach ($account_type as $type)
                                            <option value="{{ $type->id }}" data-account-type="{{ strtolower(trim($type->type_name)) }}"
                                                {{ old('account_type_id', $client->account_type_id ?? '') == $type->id ? 'selected' : '' }}>
                                                {{ $type->type_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('account_type')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div>
                                <div class="mb-4">
                                    <label for="auth_count" class="block text-sm font-medium text-gray-700 mb-2">Member
                                        Count <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('auth_count') border-red-500 @enderror"
                                        id="auth_count" name="auth_count"
                                        value="{{ old('auth_count', $client->auth_count ?? 0) }}" min="1"
                                        placeholder="e.g. 5">
                                    @error('auth_count')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        @if (!isset($client))
                            <div id="account-opening-documents" class="hidden mb-4 rounded-md border border-blue-100 bg-blue-50/50 p-3">
                                <div class="mb-3">
                                    <h6 class="text-sm font-semibold text-blue-700"><i class="fas fa-file-upload mr-2"></i>Account Opening Documents</h6>
                                    <p class="mt-1 text-xs text-gray-500">Upload the applicable documents and tick the confirmation box.</p>
                                </div>

                                @php
                                    $openingDocuments = [
                                        'joint_consent_form' => ['joint', 'Joint Account Consent Form', false],
                                        'ssm_document' => ['corporate', 'SSM Registration Document', true],
                                        'board_resolution' => ['corporate', 'Board Resolution', true],
                                        'agm_document' => ['trust', 'AGM Document', true],
                                        'ros_approval' => ['trust', 'ROS Approval Document', true],
                                    ];
                                @endphp

                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                                    @foreach ($openingDocuments as $field => [$accountTypeName, $label, $isRequired])
                                        <div class="hidden rounded-md border border-gray-200 bg-white p-3" data-opening-document="{{ $accountTypeName }}" data-required="{{ $isRequired ? 'true' : 'false' }}">
                                            <label for="{{ $field }}" class="block text-sm font-medium text-gray-700 mb-1">
                                                {{ $label }}
                                                @if ($isRequired)
                                                    <span class="text-red-500">*</span>
                                                @else
                                                    <span class="text-xs font-normal text-gray-500">(Optional)</span>
                                                @endif
                                            </label>
                                            <input type="file" id="{{ $field }}" name="{{ $field }}"
                                                accept=".pdf,.jpg,.jpeg,.png"
                                                class="block w-full text-xs text-gray-600 file:mr-3 file:rounded file:border-0 file:bg-blue-50 file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-blue-700 hover:file:bg-blue-100">
                                            <label class="mt-2 flex items-center gap-2 text-xs text-gray-700">
                                                <input type="checkbox" name="{{ $field }}_verified" value="1"
                                                    class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                                Document received and checked
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                <p class="mt-2 text-xs text-gray-500">Accepted: PDF, JPG, JPEG, PNG. Maximum 10 MB per document.</p>
                            </div>
                        @endif

                        @if (!isset($client))
                            <div
                                class="mb-3 mt-4 border-t border-gray-200 pt-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                                <div>
                                    <h6 class="text-blue-600 font-semibold text-sm"><i
                                            class="fas fa-users mr-2"></i>Authentication Members</h6>
                                </div>
                            </div>
                            <div id="customer-members-container" class="space-y-2 mb-4">
                                <div
                                    class="px-3 py-2 border border-dashed border-gray-300 rounded-md bg-gray-50 text-xs text-gray-500">
                                    Enter the Member Count above to add member details.</div>
                            </div>
                        @endif

                        <!-- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div id="date_of_birth_container" style="display: none;">
                                    <div class="mb-4">
                                        <label for="date_of_birth" class="block text-sm font-medium text-gray-700 mb-2">Date of Birth *</label>
                                        <input type="date" 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('date_of_birth') border-red-500 @enderror" id="date_of_birth" name="date_of_birth"
                                            value="{{ old('date_of_birth', $client->date_of_birth ?? '') }}"
                                            max="{{ now()->format('Y-m-d') }}">
                                        @error('date_of_birth')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
                                    </div>
                                </div>
                            </div> -->

                        <!-- Contact Information -->
                        <div class="mb-6">
                            <div class="w-full">
                                <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                    <i class="fas fa-address-book mr-2"></i>
                                    Account Details
                                </h6>
                                <!-- <p class="text-gray-500 text-sm">Primary contact details for the customer.</p> -->
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
                            <!-- <div id="contact_person_container">
                                    <div class="mb-4">
                                        <label for="contact_person" class="block text-sm font-medium text-gray-700 mb-2">Contact Person</label>
                                        <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('contact_person') border-red-500 @enderror" id="contact_person" name="contact_person"
                                            value="{{ old('contact_person', $client->contact_person ?? '') }}" required
                                            placeholder="e.g. John Doe">
                                        @error('contact_person')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
                                    </div>
                                </div> -->
                            <div>
                                <div class="mb-4">
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Account
                                        Name <span class="text-red-500 font-bold">*</span></label>
                                    <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 uppercase @error('name') border-red-500 @enderror"
                                        id="name" name="name" value="{{ old('name', $client->name ?? '') }}"
                                        required placeholder="Account Name">
                                    @error('name')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div>
                                <div class="mb-4">
                                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">Mobile
                                        <span class="text-red-500 font-bold">*</span></label>
                                    <div class="flex">
                                        <select id="country_code" name="country_code"
                                            class="w-14 px-1 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 text-sm">
                                            <option value="+6" selected>+6</option>
                                        </select>
                                        <input type="tel"
                                            class="flex-1 min-w-0 w-full px-3 py-2 border border-gray-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('phone') border-red-500 @enderror"
                                            id="phone" name="phone"
                                            value="{{ old('phone', $client->phone ?? '') }}" required
                                            placeholder="9876543210" maxlength="11" pattern="[0-9]{10,11}"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                    </div>
                                    @error('phone')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                    <p class="mt-1 text-sm text-red-600" id="phone-error" style="display: none;">Mobile
                                        number must be exactly 10 or 11 digits</p>
                                </div>
                            </div>
                            <div>
                                <div class="mb-4">
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email <span
                                            class="font-normal text-gray-400">(Optional)</span></label>
                                    <input type="email"
                                        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('email') border-red-500 @enderror"
                                        id="email" name="email" value="{{ old('email', $client->email ?? '') }}"
                                        placeholder="john@company.com">
                                    @error('email')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div>
                                <div class="mb-4">
                                    <label for="landline"
                                        class="block text-sm font-medium text-gray-700 mb-2">Landline <span class="font-normal text-gray-400">(Optional)</span></label>
                                    <input type="tel"
                                        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('landline') border-red-500 @enderror"
                                        id="landline" name="landline"
                                        value="{{ old('landline', $client->landline ?? '') }}"
                                        placeholder="Landline Number">
                                    @error('landline')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- <div>
                                    <div class="mb-4">
                                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">Contact Number</label>
                                        <input type="tel" 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('phone') border-red-500 @enderror" id="phone" name="phone"
                                            value="{{ old('phone', $client->phone ?? '') }}" required
                                            placeholder="+91 9876543210">
                                        @error('phone')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
                                    </div>
                                </div> -->
                            <!-- <div>
                                    <div class="mb-4">
                                        <label for="alternate_phone" class="block text-sm font-medium text-gray-700 mb-2">Emergency Number (Optional)</label>
                                        <input type="tel" 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('alternate_phone') border-red-500 @enderror" id="alternate_phone" name="alternate_phone"
                                            value="{{ old('alternate_phone', $client->alternate_phone ?? '') }}"
                                            placeholder="+91 9876543210">
                                        @error('alternate_phone')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
                                    </div>
                                </div> -->
                        </div>

                        <!-- Address Information -->
                        <div class="mb-6">
                            <div class="w-full">
                                <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                    <i class="fas fa-map-marker-alt mr-2"></i>
                                    Address
                                </h6>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-6">
                            <div>
                                <div class="mb-4">
                                    <label for="address" class="block text-sm font-medium text-gray-700 mb-2">Street
                                        Address <span class="text-red-500 font-bold">*</span></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 uppercase @error('address') border-red-500 @enderror"
                                        id="address" name="address" rows="2" placeholder="Building name, street, locality..." required>{{ old('address', $client->address ?? '') }}</textarea>
                                    @error('address')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
                            <!-- Country Dropdown -->
                            <div>
                                <div class="mb-4">
                                    <label for="country" class="block text-sm font-medium text-gray-700 mb-2">Country
                                        <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('country') border-red-500 @enderror"
                                        id="country" name="country" required>
                                        <option value="">Select Country</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}"
                                                {{ old('country_id', $client->country_id ?? '') == $country->id ? 'selected' : '' }}>
                                                {{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('country')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                            </div>
                            <!-- State Dropdown -->
                            <div>
                                <div class="mb-4">
                                    <label for="state" class="block text-sm font-medium text-gray-700 mb-2">State <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('state') border-red-500 @enderror"
                                        id="state" name="state" required>
                                        <option value="">Select State</option>
                                    </select>
                                    @error('state')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <!-- City -->
                            <div>
                                <div class="mb-4">
                                    <label for="city" class="block text-sm font-medium text-gray-700 mb-2">City <span
                                            class="text-red-500 font-bold">*</span></label>
                                    <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 uppercase @error('city') border-red-500 @enderror"
                                        id="city" name="city"
                                        value="{{ old('city', $client->city ?? '') }}"
                                        placeholder="Enter city" minlength="2" maxlength="100"
                                        autocomplete="address-level2" required>
                                    @error('city')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <!-- Postal Code -->
                            <div>
                                <div class="mb-4">
                                    <label for="postal_code" class="block text-sm font-medium text-gray-700 mb-2">Postal
                                        Code <span class="text-red-500 font-bold">*</span></label>
                                    <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('postal_code') border-red-500 @enderror"
                                        id="postal_code" name="postal_code"
                                        value="{{ old('postal_code', isset($client) ? $client->postal_code ?? '' : '') }}"
                                        placeholder="Enter postal code" required pattern="[0-9]{5}" maxlength="5"
                                        title="Enter exactly 5 digits">
                                    @error('postal_code')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                    <p class="mt-1 text-sm text-red-600" id="postal_code-error" style="display: none;">
                                        Postal Code must be exactly 5 digits</p>
                                </div>
                            </div>
                        </div>

                        <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>

                        <script>
                            $(document).ready(function() {

                                // ACCOUNT TYPE → DATE OF BIRTH VISIBILITY
                                $('#account_type').on('change', function() {
                                    let accountType = $(this).val();

                                    if (accountType == '1' || accountType == '2') { // Individual or joint
                                        // $('#date_of_birth_container').show();
                                        // $('#date_of_birth').prop('required', true);

                                        // // Hide Contact Person and Registration Number for Individual
                                        // $('#contact_person_container').hide();
                                        // $('#contact_person').prop('required', false);
                                        // $('#contact_person').val('');

                                        $('#registration_number').prop('required', false);
                                    } else {
                                        // $('#date_of_birth_container').hide();
                                        // $('#date_of_birth').prop('required', false);
                                        // $('#date_of_birth').val(''); // Clear value when hidden

                                        // // Show Contact Person and Registration Number for non-Individual
                                        // $('#contact_person_container').show();
                                        // $('#contact_person').prop('required', true);

                                        $('#registration_number').prop('required', false);
                                    }
                                });

                                // Initialize on page load
                                let initialAccountType = $('#account_type').val();
                                if (initialAccountType == '1') { // Individual
                                    $('#date_of_birth_container').show();
                                    $('#date_of_birth').prop('required', true);

                                    // Hide Contact Person and Registration Number for Individual
                                    $('#contact_person_container').hide();
                                    $('#contact_person').prop('required', false);

                                    $('#registration_number').prop('required', false);
                                }

                                // COUNTRY → STATE
                                $('#country').on('change', function() {

                                    let country_id = $(this).val();

                                    $('#state').html('<option value="">Loading...</option>');
                                    if (country_id) {
                                        $.ajax({
                                            url: "{{ url('locations/get-states') }}/" + country_id,
                                            type: "GET",
                                            success: function(data) {

                                                $('#state').html('<option value="">Select State</option>');

                                                $.each(data, function(key, value) {
                                                    $('#state').append(
                                                        `<option value="${value.id}">${value.name}</option>`
                                                    );
                                                });
                                            },
                                            error: function() {
                                                alert('Unable to fetch states');
                                            }
                                        });
                                    } else {
                                        $('#state').html('<option value="">Select State</option>');
                                    }
                                });

                                // PHONE VALIDATION
                                $('#phone').on('input', function() {
                                    var phone = $(this).val();
                                    var phoneError = $('#phone-error');

                                    // Remove any non-numeric characters
                                    phone = phone.replace(/[^0-9]/g, '');
                                    $(this).val(phone);

                                    // Validate exactly 10 or 11 digits
                                    if (phone.length === 10 || phone.length === 11) {
                                        $(this).removeClass('border-red-500').addClass('border-green-500');
                                        phoneError.hide();
                                    } else if (phone.length > 0) {
                                        $(this).removeClass('border-green-500').addClass('border-red-500');
                                        phoneError.show();
                                    } else {
                                        $(this).removeClass('border-green-500 border-red-500');
                                        phoneError.hide();
                                    }
                                });

                                // POSTAL CODE VALIDATION
                                $('#postal_code').on('input', function() {
                                    var postalCode = $(this).val();
                                    var postalCodeError = $('#postal_code-error');

                                    // Remove any non-numeric characters
                                    postalCode = postalCode.replace(/[^0-9]/g, '');
                                    $(this).val(postalCode);

                                    // Validate exactly 5 digits
                                    if (postalCode.length === 5) {
                                        $(this).removeClass('border-red-500').addClass('border-green-500');
                                        postalCodeError.hide();
                                    } else if (postalCode.length > 0) {
                                        $(this).removeClass('border-green-500').addClass('border-red-500');
                                        postalCodeError.show();
                                    } else {
                                        $(this).removeClass('border-green-500 border-red-500');
                                        postalCodeError.hide();
                                    }
                                });

                                // Form submission validation
                                $('#customer-registration-form').on('submit', function(e) {
                                    var phone = $('#phone').val();
                                    var phoneError = $('#phone-error');
                                    var postalCode = $('#postal_code').val();
                                    var postalCodeError = $('#postal_code-error');
                                    var hasError = false;

                                    // Validate phone
                                    if (phone.length !== 10 && phone.length !== 11) {
                                        e.preventDefault();
                                        $('#phone').addClass('border-red-500');
                                        phoneError.show();
                                        if (!hasError) {
                                            $('#phone').focus();
                                            hasError = true;
                                        }
                                    }

                                    // Validate postal code
                                    if (postalCode.length !== 5) {
                                        e.preventDefault();
                                        $('#postal_code').addClass('border-red-500');
                                        postalCodeError.show();
                                        if (!hasError) {
                                            $('#postal_code').focus();
                                            hasError = true;
                                        }
                                    }

                                    if (hasError) {
                                        return false;
                                    }
                                });

                            });
                        </script>

                        <!-- Tax & Legal Information -->
                        <section id="legal-details-section">
                        <div class="mb-6" id="document_legal_info_container">
                            <div class="w-full">
                                <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                    <i class="fas fa-file-contract mr-2"></i>
                                    Legal Details
                                </h6>
                                <!-- <p class="text-gray-500 text-sm">GST number, PAN details, and other legal information.</p> -->
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                            <div id="registration_number_container">
                                <div class="mb-4">
                                    <label for="registration_number"
                                        class="block text-sm font-medium text-gray-700 mb-2">Registration Number <span class="font-normal text-gray-400">(Optional)</span></label>
                                    <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('registration_number') border-red-500 @enderror"
                                        id="registration_number" name="registration_number"
                                        value="{{ old('registration_number', isset($client) ? $client->registration_number ?? '' : '') }}"
                                        placeholder="Enter Registration Number">
                                    @error('registration_number')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <!-- <div>
                                    <div class="mb-4">
                                        <label for="proof_type" class="block text-sm font-medium text-gray-700 mb-2">Identification Type</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('proof_type') border-red-500 @enderror" id="proof_type" name="proof_type" required>
                                            <option value="">Select Type</option>
                                            <option value="{{ old('proof_type', isset($client) ? $client->proof_type ?? '' : '') }}" {{ old('proof_type', isset($client) ? $client->proof_type ?? '' : '') == 'ic_number' ? 'selected' : '' }}>IC Number</option>
                                            <option value="passport" {{ old('proof_type', isset($client) ? $client->proof_type ?? '' : '') == 'passport' ? 'selected' : '' }}>Passport</option>
                                        </select>
                                        @error('proof_type')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
                                    </div>
                                </div> -->
                            <div>
                            </div>
                            <!-- <div>
                                    <div class="mb-4">
                                        <label for="proof_number" class="block text-sm font-medium text-gray-700 mb-2">ID Number</label>
                                        <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('proof_number') border-red-500 @enderror" id="proof_number" name="proof_number"
                                            value="{{ old('proof_number', isset($client) ? $client->proof_number ?? '' : '') }}"
                                            placeholder="AAAFG0101A" required>
                                        @error('proof_number')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
                                    </div>
                                </div> -->
                        </div>
                        </section>

                        <!-- Financial Information -->
                        <section id="payment-charges-section">
                        <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>
                                    Payment &amp; Tax
                                </h6>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 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
                                </div>
                            </div>
                            <div class="hidden">
                                <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 : '') }}"
                                        placeholder="Enter stamping fee" min="0" step="1" required>
                                    @error('stamping_fee')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="hidden">
                                <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 : '') }}"
                                        placeholder="Enter key deposit" min="0" step="1" required>
                                    @error('key_deposit')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="hidden">
                                <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 : '') }}"
                                        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
                                </div>
                            </div>

                            <!-- Discount Amount -->
                            <div class="hidden">
                                <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 : '') }}"
                                        placeholder="Enter discount amount" min="0" step="1" required>
                                    @error('discount_amount')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </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 Payment 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>
                        </section>

                        <!-- Safebox Type and Number Details -->
                        <section id="locker-selection-section">
                        <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">Safebox Count <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="divide-y divide-gray-100">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3">
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <div>
                                    <p class="text-sm font-semibold text-gray-800">Charges for Each Locker</p>
                                    <p class="mt-0.5 text-xs text-gray-500">Enter stamping fee, key deposit, insurance and discount for every selected locker. All lockers will remain on one invoice.</p>
                                </div>
                            </div>
                            <div id="locker-charge-fields" class="mt-3">
                                <div class="rounded border border-dashed border-gray-300 bg-white px-3 py-4 text-center text-xs text-gray-500">Select a locker to enter its charges.</div>
                            </div>
                        </div>

                        <div id="selected-lockers-summary" class="hidden mb-4 rounded-md border border-gray-200 bg-gray-50 px-3 py-2"></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">
                        </section>

                        <!-- Contract & Payment Terms -->
                        <section id="membership-section">
                        <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>
                                <!-- <p class="text-gray-500 text-sm">Contract duration and payment terms for Sites.</p> -->
                            </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">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">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>
                        </section>

                        <script>
                            (() => {
                                const legalDetails = document.getElementById('legal-details-section');
                                const membership = document.getElementById('membership-section');
                                const lockerSelection = document.getElementById('locker-selection-section');
                                const paymentCharges = document.getElementById('payment-charges-section');

                                legalDetails.after(membership);
                                membership.after(lockerSelection);
                                lockerSelection.after(paymentCharges);
                            })();
                        </script>

                        <!-- Reference Details -->
                        <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>
                                    Referral
                                </h6>
                                <!-- <p class="text-gray-500 text-sm">Contract duration and payment terms for Sites.</p> -->
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                            <!-- <div>
                                    <div class="mb-4">
                                        <label for="status_id" class="block text-sm font-medium text-gray-700 mb-2">Reference Type</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('reference_type') border-red-500 @enderror" id="reference_type" name="reference_type" required>
                                            <option value="">Select Reference Type</option>
                                            @foreach ($account_type as $type)
    <option value="{{ $type->id }}" {{ old('account_type_id', $client->account_type_id ?? '') == $type->id ? 'selected' : '' }}>{{ $type->type_name }}</option>
    @endforeach
                                        </select>
                                        @error('reference_type')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
                                    </div>
                                </div> -->
                            <!-- Reffered By -->
                            <div class="mb-4">
                                <label for="referred_by" class="block text-sm font-medium text-gray-700 mb-2">Referred
                                    By <span class="font-normal text-gray-400">(Optional)</span></label>
                                <div class="relative">
                                    <input type="text" id="referred_by_search" name="referred_by_search"
                                        value="{{ old('referred_by', isset($client) && $client->referred_by ? $client->referredMember->name ?? '' : '') }}"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md uppercase focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('referred_by') border-red-500 @enderror"
                                        placeholder="Search for a member..." autocomplete="off">
                                    <input type="hidden" id="referred_by" name="referred_member_by"
                                        value="{{ old('referred_by', isset($client) ? $client->referred_by ?? '' : '') }}">
                                    <div id="referred_by_dropdown"
                                        class="absolute z-10 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto hidden">
                                    </div>
                                </div>
                                @error('referred_by')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Referred Commission -->
                            <div>
                                <div class="mb-4">
                                    <label for="referred_commission"
                                        class="block text-sm font-medium text-gray-700 mb-2">Commission <span class="font-normal text-gray-400">(Optional)</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('referred_commission') border-red-500 @enderror"
                                        id="referred_commission" name="referred_commission"
                                        value="{{ old('referred_commission', isset($client) ? $client->referred_commission ?? 0 : 0) }}"
                                        placeholder="Enter referred commission" min="0" step="1">
                                    @error('referred_commission')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <script>
                            document.getElementById('payment_terms').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 = '';

                                const startDisplay = document.getElementById('contract_start_date_display');
                                const endDisplay = document.getElementById('contract_end_date_display');
                                if (startDisplay) startDisplay.value = '';
                                if (endDisplay) endDisplay.value = '';

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

                            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 setEndDate(endDateIso) {
                                document.getElementById('contract_end_date').value = endDateIso;
                                document.getElementById('contract_end_date_display').value = formatIsoToDisplay(endDateIso);
                            }

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

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

                                    switch (plan) {
                                        case '1':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 1));
                                            break;
                                        case '2':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 2));
                                            break;
                                        case '3':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 3));
                                            break;
                                        case '4':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 4));
                                            break;
                                        case '5':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 5));
                                            break;
                                        case '6':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 6));
                                            break;
                                        case '7':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 7));
                                            break;
                                        case '8':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 8));
                                            break;
                                        case '9':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 9));
                                            break;
                                        case '10':
                                            endDateObj = new Date(startDateObj.setFullYear(startDateObj.getFullYear() + 10));
                                            break;
                                        default:
                                            endDateObj = null;
                                    }

                                    if (endDateObj) {
                                        endDateObj.setDate(endDateObj.getDate() - 1);

                                        var endDateIso = endDateObj.toISOString().split('T')[0];
                                        setEndDate(endDateIso);
                                    }
                                }
                            }

                            $(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 flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-4 pt-3 border-t border-gray-200">
                            <a href="{{ route('customers.index') }}"
                                class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                                Cancel
                            </a>
                            <button type="submit"
                                class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-sm font-medium text-white rounded-md hover:bg-blue-700 transition-colors">
                                <i class="fas fa-save mr-2"></i>
                                @if (isset($client))
                                    Update Client
                                @else
                                    Create Customer
                                @endif
                            </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>
        @if (!isset($client))
            const memberIdentityResults = {};

            function escapeMemberValue(value) {
                return String(value || '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;').replaceAll("'", '&#039;');
            }

            function useMemberForCustomerDetails(index) {
                const accountType = document.getElementById('account_type').value;
                const card = document.querySelector(`[data-member-index="${index}"]`);

                if (!['1', '2'].includes(accountType) || !card) return;

                const fieldMap = {
                    name: 'name',
                    mobile: 'phone',
                    email: 'email',
                    address: 'address'
                };

                Object.entries(fieldMap).forEach(([memberField, customerField]) => {
                    const source = card.querySelector(`[data-field="${memberField}"]`);
                    const target = document.getElementById(customerField);
                    if (memberField === 'address' && !source?.value.trim()) return;
                    if (source && target) {
                        target.value = source.value;
                        target.dispatchEvent(new Event('input', { bubbles: true }));
                        target.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                });

                document.getElementById('name').scrollIntoView({ behavior: 'smooth', block: 'center' });
            }

            function renderCustomerMemberForms() {
                const container = document.getElementById('customer-members-container');
                const count = Math.max(0, parseInt(document.getElementById('auth_count').value, 10) || 0);
                const previous = Array.from(container.querySelectorAll('[data-member-index]')).map(card => ({
                    name: card.querySelector('[data-field="name"]')?.value || '',
                    gender: card.querySelector('[data-field="gender"]')?.value || '',
                    mobile: card.querySelector('[data-field="mobile"]')?.value || '',
                    email: card.querySelector('[data-field="email"]')?.value || '',
                    proof_type: card.querySelector('[data-field="proof_type"]')?.value || '',
                    proof_number: card.querySelector('[data-field="proof_number"]')?.value || '',
                    address: card.querySelector('[data-field="address"]')?.value || '',
                    face_auth: card.querySelector('[data-field="face_auth"]')?.checked ?? true,
                    required_auth: card.querySelector('[data-field="required_auth"]')?.checked ?? false,
                    existing_member_id: card.querySelector('[data-field="existing_member_id"]')?.value || '',
                }));

                if (!count) {
                    container.innerHTML =
                        '<div class="px-3 py-2 border border-dashed border-gray-300 rounded-md bg-gray-50 text-xs text-gray-500">Enter the Member Count above to add member details.</div>';
                    return;
                }

                container.innerHTML = Array.from({
                    length: count
                }, (_, index) => {
                    const value = previous[index] || {};
                    const themes = [{
                            card: 'border-blue-300 bg-white',
                            header: 'bg-blue-100',
                            badge: 'bg-blue-600 text-white'
                        },
                        {
                            card: 'border-amber-300 bg-white',
                            header: 'bg-amber-100',
                            badge: 'bg-amber-600 text-white'
                        },
                        {
                            card: 'border-emerald-300 bg-white',
                            header: 'bg-emerald-100',
                            badge: 'bg-emerald-600 text-white'
                        },
                        {
                            card: 'border-violet-300 bg-white',
                            header: 'bg-violet-100',
                            badge: 'bg-violet-600 text-white'
                        }
                    ];
                    const theme = themes[index % themes.length];
                    return `<div class="border ${theme.card} rounded-md shadow-sm" data-member-index="${index}">
                <input type="hidden" data-field="existing_member_id" name="members[${index}][existing_member_id]" value="${escapeMemberValue(value.existing_member_id)}">
                <div class="px-3 py-2 ${theme.header} rounded-t-md flex items-center justify-between gap-2">
                    <span class="text-sm font-semibold text-gray-800"><span class="inline-flex items-center justify-center w-5 h-5 mr-2 rounded-full ${theme.badge} text-xs">${index + 1}</span>Member ${index + 1}</span>
                    ${['1', '2'].includes(document.getElementById('account_type').value) ? `<button type="button" onclick="useMemberForCustomerDetails(${index})" class="px-2.5 py-1 text-xs font-medium text-slate-700 bg-white border border-slate-300 rounded hover:bg-slate-50">Use as Customer Details</button>` : ''}
                </div>
                <div class="p-3 border-t border-gray-100">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-3 gap-y-2.5">
                    <div><label class="block text-xs font-medium text-gray-600 mb-1">Name <span class="text-red-500">*</span></label><input data-identity-field data-field="name" name="members[${index}][name]" value="${escapeMemberValue(value.name)}" required minlength="2" maxlength="255" class="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded uppercase" placeholder="Member name"></div>
                    <div><label class="block text-xs font-medium text-gray-600 mb-1">Gender <span class="text-red-500">*</span></label><select data-identity-field data-field="gender" name="members[${index}][gender]" required class="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded"><option value="">Select Gender</option><option value="male" ${value.gender === 'male' ? 'selected' : ''}>Male</option><option value="female" ${value.gender === 'female' ? 'selected' : ''}>Female</option></select></div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Mobile <span class="text-red-500">*</span></label>
                        <div class="flex">
                            <input type="hidden" name="members[${index}][country_code]" value="+6">
                            <span class="inline-flex items-center px-2 text-sm text-gray-600 bg-gray-100 border border-r-0 border-gray-300 rounded-l">+6</span>
                            <input data-identity-field data-field="mobile" name="members[${index}][mobile]" value="${escapeMemberValue(value.mobile)}" required pattern="[0-9]{10,11}" maxlength="11" inputmode="numeric" oninput="this.value=this.value.replace(/[^0-9]/g,'')" class="min-w-0 flex-1 w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded-r" placeholder="10 or 11 digits">
                        </div>
                    </div>
                    <div><label class="block text-xs font-medium text-gray-600 mb-1">Email <span class="font-normal text-gray-400">(Optional)</span></label><input type="email" data-identity-field data-field="email" name="members[${index}][email]" value="${escapeMemberValue(value.email)}" class="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded" placeholder="member@example.com"></div>
                    <div><label class="block text-xs font-medium text-gray-600 mb-1">Proof Type <span class="text-red-500">*</span></label><select data-identity-field data-field="proof_type" name="members[${index}][proof_type]" required class="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded"><option value="">Select Proof Type</option><option value="passport" ${value.proof_type === 'passport' ? 'selected' : ''}>Passport</option><option value="ic_number" ${value.proof_type === 'ic_number' ? 'selected' : ''}>IC Number</option></select></div>
                    <div><label class="block text-xs font-medium text-gray-600 mb-1">Proof Number <span class="text-red-500">*</span></label><div class="flex"><input data-identity-field data-field="proof_number" name="members[${index}][proof_number]" value="${escapeMemberValue(value.proof_number)}" required maxlength="12" class="min-w-0 flex-1 px-2.5 py-1.5 text-sm border border-gray-300 rounded-l" placeholder="IC / passport"><button type="button" onclick="searchMemberIdentity(${index})" class="px-3 text-xs font-medium text-white bg-slate-600 hover:bg-slate-700 rounded-r">Search</button></div></div>
                    <div><label class="block text-xs font-medium text-gray-600 mb-1">Proof Document <span class="font-normal text-gray-400">(Optional)</span></label><input data-identity-file type="file" name="members[${index}][proof_file]" accept=".pdf,.jpg,.jpeg,.png,.gif" class="w-full px-2 py-1 text-xs border border-gray-300 rounded bg-white"><p class="mt-0.5 text-[11px] text-gray-400">PDF/image, max 5 MB</p></div>
                    <div><label class="block text-xs font-medium text-gray-600 mb-1">Address <span class="font-normal text-gray-400">(Optional)</span></label><textarea data-identity-field data-field="address" name="members[${index}][address]" maxlength="500" rows="1" class="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded uppercase" placeholder="Member address">${escapeMemberValue(value.address)}</textarea></div>
                    <div data-search-results class="hidden sm:col-span-2 lg:col-span-4 border border-gray-200 rounded bg-white"></div>
                    <div data-selected-member class="hidden sm:col-span-2 lg:col-span-4 px-3 py-2 text-xs text-emerald-800 bg-emerald-50 border border-emerald-200 rounded"></div>
                    <div class="sm:col-span-2 lg:col-span-4 flex flex-wrap gap-5 px-2.5 py-2 bg-blue-50 border border-blue-100 rounded">
                        <label class="inline-flex items-center"><input type="hidden" name="members[${index}][face_auth]" value="0"><input type="checkbox" data-field="face_auth" name="members[${index}][face_auth]" value="1" ${value.face_auth === false ? '' : 'checked'} required class="h-4 w-4 text-blue-600 rounded"><span class="ml-2 text-sm text-gray-700">Face Verification <span class="text-red-500">*</span></span></label>
                        <label class="inline-flex items-center"><input type="hidden" name="members[${index}][required_auth]" value="0"><input type="checkbox" data-field="required_auth" name="members[${index}][required_auth]" value="1" ${value.required_auth ? 'checked' : ''} class="h-4 w-4 text-blue-600 rounded"><span class="ml-2 text-sm text-gray-700">This member must be present</span></label>
                    </div>
                </div>
                </div>
            </div>`;
                }).join('');
                document.querySelectorAll('[data-member-index]').forEach(updateMemberProofValidation);
            }

            function updateMemberProofValidation(card) {
                const type = card.querySelector('[data-field="proof_type"]').value;
                const input = card.querySelector('[data-field="proof_number"]');
                const isIC = type === 'ic_number';
                const message = isIC
                    ? 'IC Number must be exactly 12 digits (e.g., 123456789012).'
                    : 'Passport must be 6 to 12 letters or digits.';
                input.minLength = isIC ? 12 : 6;
                input.maxLength = 12;
                input.inputMode = isIC ? 'numeric' : 'text';
                input.pattern = isIC ? '[0-9]{12}' : '[A-Za-z0-9]{6,12}';
                input.setCustomValidity('');
                const length = Array.from(input.value).length;
                const invalid = Boolean(type && input.value && !(isIC ? /^[0-9]{12}$/ : /^[A-Za-z0-9]{6,12}$/).test(input.value));
                if (invalid) {
                    input.setCustomValidity(message);
                }
                let hint = card.querySelector('[data-proof-hint]');
                if (!hint) {
                    hint = document.createElement('p');
                    hint.dataset.proofHint = '';
                    hint.id = `member-proof-hint-${card.dataset.memberIndex}`;
                    hint.setAttribute('aria-live', 'polite');
                    input.setAttribute('aria-describedby', hint.id);
                    hint.className = 'mt-1 text-xs text-gray-500';
                    input.parentElement.parentElement.appendChild(hint);
                }
                input.setAttribute('aria-invalid', invalid ? 'true' : 'false');
                input.classList.toggle('border-red-500', invalid);
                input.classList.toggle('border-gray-300', !invalid);
                hint.className = `mt-1 text-xs ${invalid ? 'text-red-600' : 'text-gray-500'}`;
                hint.textContent = type
                    ? (input.value && !invalid ? (isIC ? 'Valid IC Number.' : 'Valid passport number.') : message)
                    : 'Select a proof type to see the required format.';
            }

            ['input', 'change'].forEach(eventName => {
                document.addEventListener(eventName, function(event) {
                    if (event.target.matches('[data-field="proof_type"], [data-field="proof_number"]')) {
                        if (event.target.matches('[data-field="proof_number"]')) {
                            const type = event.target.closest('[data-member-index]').querySelector('[data-field="proof_type"]').value;
                            if (type === 'ic_number') {
                                event.target.value = event.target.value.replace(/[^0-9]/g, '');
                            }
                        }
                        updateMemberProofValidation(event.target.closest('[data-member-index]'));
                    }
                });
            });

            async function searchMemberIdentity(index) {
                const card = document.querySelector(`[data-member-index="${index}"]`);
                const proofType = card.querySelector('[data-field="proof_type"]').value;
                const proofNumber = card.querySelector('[data-field="proof_number"]').value.trim();
                const resultsBox = card.querySelector('[data-search-results]');

                if (!proofType || proofNumber.length < 3) {
                    alert('Select a proof type and enter at least 3 characters of the proof number.');
                    card.querySelector(!proofType ? '[data-field="proof_type"]' : '[data-field="proof_number"]').focus();
                    return;
                }

                resultsBox.classList.remove('hidden');
                resultsBox.innerHTML = '<div class="px-3 py-2 text-xs text-gray-500">Searching...</div>';

                try {
                    const url = new URL('{{ route('customers.members.identity-search') }}', window.location.origin);
                    url.searchParams.set('proof_type', proofType);
                    url.searchParams.set('proof_number', proofNumber);
                    const response = await fetch(url, { headers: { 'Accept': 'application/json' } });
                    const result = await response.json();
                    memberIdentityResults[index] = result.members || [];

                    resultsBox.innerHTML = memberIdentityResults[index].length
                        ? `<div class="px-3 py-2 bg-amber-50 border-b border-amber-200 text-xs font-medium text-amber-800">
                                Search results found. Click <strong>Select Member</strong> to load one member's details.
                           </div>` + memberIdentityResults[index].map((member, resultIndex) => {
                            const accountStatus = member.account_status || {};
                            const blockers = Array.isArray(accountStatus.blockers) ? accountStatus.blockers : [];
                            const accountStatusHtml = blockers.length
                                ? `<div class="mt-2 rounded border border-red-200 bg-red-50 p-2">
                                       <div class="mb-1 flex flex-wrap items-center justify-between gap-2">
                                           <span class="text-xs font-semibold text-red-900"><i class="fas fa-exclamation-triangle mr-1"></i>Pending Account Details</span>
                                           <span class="rounded-full bg-red-100 px-2 py-0.5 text-[11px] font-semibold text-red-800">${blockers.length} ${blockers.length === 1 ? 'item' : 'items'}</span>
                                       </div>
                                       <div class="space-y-1.5">${blockers.map(item => {
                                           const blocker = typeof item === 'string' ? { message: item } : item;
                                           const action = blocker.action_url && blocker.action_label
                                               ? `<a href="${escapeMemberValue(blocker.action_url)}" target="_blank" rel="noopener noreferrer" class="inline-flex flex-shrink-0 items-center rounded border border-red-300 bg-white px-2 py-1 text-[11px] font-semibold text-red-800 hover:bg-red-100">${escapeMemberValue(blocker.action_label)}</a>`
                                               : '';
                                           return `<div class="flex flex-col gap-1 rounded border border-red-100 bg-white p-2 sm:flex-row sm:items-center sm:justify-between"><span class="text-xs text-red-900">${escapeMemberValue(blocker.message)}</span>${action}</div>`;
                                       }).join('')}</div>
                                   </div>`
                                : `<div class="mt-2 rounded border border-emerald-200 bg-emerald-50 px-2.5 py-2 text-xs text-emerald-800"><i class="fas fa-check-circle mr-1"></i>No pending invoices, payments, or locker issues found.</div>`;

                            return `
                            <div class="w-full px-3 py-2.5 text-left border-b border-gray-100 last:border-b-0">
                                <span class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1">
                                    <span class="text-sm font-semibold text-gray-800">${escapeMemberValue(member.name)}</span>
                                    <button type="button" onclick="selectMemberIdentity(${index}, ${resultIndex})" class="inline-flex items-center justify-center px-2.5 py-1 rounded bg-blue-600 hover:bg-blue-700 text-xs font-semibold text-white">Select Member</button>
                                </span>
                                <span class="mt-1 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-1 text-xs text-gray-600">
                                    <span><strong>${member.proof_type === 'ic_number' ? 'IC Number' : 'Passport'}:</strong> ${escapeMemberValue(member.proof_number)}</span>
                                    <span><strong>Mobile:</strong> ${escapeMemberValue(member.mobile || 'Not provided')}</span>
                                    <span><strong>Email:</strong> ${escapeMemberValue(member.email || 'Not provided')}</span>
                                    <span><strong>Gender:</strong> ${escapeMemberValue(member.gender ? member.gender.charAt(0).toUpperCase() + member.gender.slice(1) : 'Not provided')}</span>
                                </span>
                                <span class="mt-1 grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 text-xs text-gray-500">
                                    <span><strong>Address:</strong> ${escapeMemberValue(member.address || 'Not provided')}</span>
                                    <span><strong>Is Active:</strong> ${escapeMemberValue(member.is_active !== undefined ? (member.is_active ? 'Yes' : 'No') : 'Not provided')}</span>
                                </span>
                                <div class="mt-2 text-xs text-gray-600"><strong>Linked Account:</strong> #${escapeMemberValue(member.client_id || 'N/A')} &middot; ${escapeMemberValue(accountStatus.client_name || member.client_name || 'Unknown customer')}</div>
                                ${accountStatusHtml}
                            </div>`;
                           }).join('')
                        : '<div class="px-3 py-2 text-xs text-gray-500">No existing member found. Enter new member details.</div>';
                } catch (error) {
                    resultsBox.innerHTML = '<div class="px-3 py-2 text-xs text-red-600">Unable to search members. Please try again.</div>';
                }
            }

            function selectMemberIdentity(index, resultIndex) {
                const member = memberIdentityResults[index]?.[resultIndex];
                const card = document.querySelector(`[data-member-index="${index}"]`);
                if (!member || !card) return;

                const alreadySelected = Array.from(document.querySelectorAll('[data-field="existing_member_id"]'))
                    .some(input => input.closest('[data-member-index]') !== card && input.value === String(member.id));
                if (alreadySelected) {
                    alert('This member is already selected in another member section.');
                    return;
                }

                if (member.is_active && !confirm('This member already has an active account. Do you want to continue?')) {
                    return;
                }

                ['name', 'gender', 'mobile', 'email', 'proof_type', 'proof_number', 'address'].forEach(field => {
                    const input = card.querySelector(`[data-field="${field}"]`);
                    if (input) input.value = member[field] || '';
                });
                updateMemberProofValidation(card);
                card.querySelector('[data-field="existing_member_id"]') .value = member.id;
                card.querySelector('[data-search-results]').classList.add('hidden');
                const selectedBox = card.querySelector('[data-selected-member]');
                selectedBox.classList.remove('hidden');
                selectedBox.innerHTML = `Existing member selected. Details were copied from <strong>${escapeMemberValue(member.client_name || 'another customer')}</strong> and can be edited for this customer. <button type="button" onclick="clearMemberIdentity(${index})" class="ml-2 font-semibold underline">Choose another</button>`;
            }

            function clearMemberIdentity(index) {
                const card = document.querySelector(`[data-member-index="${index}"]`);
                card.querySelector('[data-field="existing_member_id"]').value = '';
                card.querySelectorAll('[data-identity-field]').forEach(input => {
                    input.value = '';
                });
                card.querySelector('[data-selected-member]').classList.add('hidden');
                updateMemberProofValidation(card);
                card.querySelector('[data-field="proof_type"]') .focus();
            }

            document.addEventListener('DOMContentLoaded', function() {
                const authCountInput = document.getElementById('auth_count');
                const customerForm = authCountInput.closest('form');
                const accountTypeSelect = document.getElementById('account_type');

                function updateAccountOpeningDocuments() {
                    const container = document.getElementById('account-opening-documents');
                    if (!container) return;

                    const selectedType = accountTypeSelect.options[accountTypeSelect.selectedIndex]
                        ?.dataset.accountType || '';
                    let visibleCount = 0;

                    container.querySelectorAll('[data-opening-document]').forEach(card => {
                        const isVisible = selectedType.includes(card.dataset.openingDocument);
                        card.classList.toggle('hidden', !isVisible);
                        card.querySelectorAll('input').forEach(input => {
                            input.required = isVisible && card.dataset.required === 'true';
                            if (!isVisible) {
                                if (input.type === 'checkbox') input.checked = false;
                                else input.value = '';
                            }
                        });
                        if (isVisible) visibleCount++;
                    });

                    container.classList.toggle('hidden', visibleCount === 0);
                }

                authCountInput.addEventListener('input', renderCustomerMemberForms);
                authCountInput.addEventListener('change', renderCustomerMemberForms);
                accountTypeSelect.addEventListener('change', function() {
                    setTimeout(renderCustomerMemberForms, 0);
                    updateAccountOpeningDocuments();
                });
                customerForm.addEventListener('invalid', function(event) {
                    const memberCard = event.target.closest('[data-member-index]');
                    if (memberCard) memberCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, true);
                renderCustomerMemberForms();
                updateAccountOpeningDocuments();
            });
        @endif

        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 = '';

                    const startDisplay = document.getElementById('contract_start_date_display');
                    const endDisplay = document.getElementById('contract_end_date_display');
                    if (startDisplay) startDisplay.value = '';
                    if (endDisplay) endDisplay.value = '';

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

            const accountTypeSelect = document.getElementById('account_type');
            const authCountInput = document.getElementById('auth_count');
            const isEdit = !!authCountInput.value && authCountInput.value !== '0';
            const originalValue = parseInt(authCountInput.value) || 0;

            // Referred By Search Dropdown
            const referredBySearch = document.getElementById('referred_by_search');
            const referredByHidden = document.getElementById('referred_by');
            const referredByDropdown = document.getElementById('referred_by_dropdown');
            let searchTimeout;

            if (referredBySearch) {
                // Load initial member data if editing
                if (referredByHidden.value && isEdit) {
                    fetch(`/customer/members/search?search=`)
                        .then(response => response.json())
                        .then(members => {
                            const member = members.find(m => m.id == referredByHidden.value);
                            if (member) {
                                referredBySearch.value = member.display_name;
                            }
                        })
                        .catch(error => console.error('Error loading member data:', error));
                }

                // Search functionality
                referredBySearch.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    const searchTerm = this.value.trim();

                    if (searchTerm.length < 2) {
                        referredByDropdown.classList.add('hidden');
                        return;
                    }

                    searchTimeout = setTimeout(() => {
                        fetch(`/customer/members/search?search=${encodeURIComponent(searchTerm)}`)
                            .then(response => response.json())
                            .then(members => {
                                displaySearchResults(members, searchTerm);
                            })
                            .catch(error => {
                                console.error('Error searching members:', error);
                                referredByDropdown.classList.add('hidden');
                            });
                    }, 300);
                });

                // Hide dropdown when clicking outside
                document.addEventListener('click', function(e) {
                    if (!referredBySearch.contains(e.target) && !referredByDropdown.contains(e.target)) {
                        referredByDropdown.classList.add('hidden');
                    }
                });

                // Clear selection when input is cleared
                referredBySearch.addEventListener('blur', function() {
                    setTimeout(() => {
                        if (this.value.trim() === '') {
                            referredByHidden.value = '';
                        }
                    }, 200);
                });
            }

            function displaySearchResults(members, searchTerm) {
                if (members.length === 0) {
                    referredByDropdown.innerHTML = '<div class="p-3 text-gray-500 text-sm">No members found</div>';
                } else {
                    referredByDropdown.innerHTML = members.map(member => `
                    <div class="px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0"
                         onclick="selectMember(${member.id}, '${member.name.replace(/'/g, "\\'")}', '${member.display_name.replace(/'/g, "\\'")}')">
                        <div class="font-medium text-gray-900">${highlightMatch(member.name, searchTerm)}</div>
                        <div class="text-sm text-gray-500">${member.phone} • ${member.client_name}</div>
                    </div>
                `).join('');
                }

                referredByDropdown.classList.remove('hidden');
            }

            function highlightMatch(text, searchTerm) {
                const regex = new RegExp(`(${searchTerm})`, 'gi');
                return text.replace(regex, '<span class="font-semibold text-blue-600">$1</span>');
            }

            window.selectMember = function(memberId, memberName, displayName) {
                referredByHidden.value = memberId;
                referredBySearch.value = displayName;
                referredByDropdown.classList.add('hidden');
            };

            function updateAuthCount() {
                const accountType = accountTypeSelect.value;

                switch (accountType) {
                    case '1': // Individual
                        authCountInput.value = 1;
                        authCountInput.readOnly = true;
                        authCountInput.classList.add('bg-gray-100');
                        break;
                    case '2': // Joint
                    case '3': // Corporate
                    case '4': // Trust
                    default:
                        authCountInput.readOnly = false;
                        authCountInput.classList.remove('bg-gray-100');
                        authCountInput.min = 2;
                        if (!isEdit) authCountInput.value = '';
                        break;
                }
            }

            // Add validation function
            function validateAuthCount() {
                const accountType = accountTypeSelect.value;
                const authCount = parseInt(authCountInput.value);

                if (!accountType) {
                    authCountInput.setCustomValidity('Please select a customer type first');
                    return false;
                }

                switch (accountType) {
                    case 1: // Individual
                        if (authCount !== 1) {
                            authCountInput.setCustomValidity('Individual accounts must have exactly 1 member');
                            return false;
                        }
                        break;
                    case 2: // Joint
                        if (authCount < 2) {
                            authCountInput.setCustomValidity('Joint accounts must have at least 2 members');
                            return false;
                        }
                        break;
                    case 3: // Corporate
                    case 4: // Trust
                        if (authCount < 5) {
                            authCountInput.setCustomValidity(
                                'Corporate and Trust accounts must have at least 5 members');
                            return false;
                        }
                        break;
                }

                authCountInput.setCustomValidity('');
                return true;
            }

            accountTypeSelect.addEventListener('change', function() {
                updateAuthCount();
                validateAuthCount();
            });

            authCountInput.addEventListener('input', validateAuthCount);

            // Initialize on page load
            updateAuthCount();
            validateAuthCount();
        });

        // 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 => l.id === 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 => l.id === 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 syncLockerChargeTotals() {
            const stamping = selectedLockers.reduce((sum, locker) => sum + (parseFloat(locker.stamping_fee) || 0), 0);
            const keyDeposit = selectedLockers.reduce((sum, locker) => sum + (parseFloat(locker.key_deposit) || 0), 0);
            const insurance = selectedLockers.reduce((sum, locker) => sum + (parseFloat(locker.insurance_charges) || 0), 0);
            const discount = selectedLockers.reduce((sum, locker) => sum + (parseFloat(locker.discount_amount) || 0), 0);
            document.getElementById('stamping_fee').value = stamping.toFixed(2);
            document.getElementById('key_deposit').value = keyDeposit.toFixed(2);
            document.getElementById('insurance_charges').value = insurance.toFixed(2);
            document.getElementById('discount_amount').value = discount.toFixed(2);
        }

        function renderLockerChargeFields() {
            const container = document.getElementById('locker-charge-fields');
            const applyButton = document.getElementById('apply-locker-charges');
            if (!selectedLockers.length) {
                container.innerHTML = '<div class="rounded border border-dashed border-gray-300 bg-white px-3 py-4 text-center text-xs text-gray-500">No lockers selected.</div>';
                if (applyButton) applyButton.classList.add('hidden');
                syncLockerChargeTotals();
                return;
            }

            const chargeValue = (locker, field) => {
                const value = locker[field];
                if (value === undefined || value === null || value === '') return '';
                return String(value);
            };

            container.innerHTML = selectedLockers.map((locker, index) => `
                <div class="mb-2 grid grid-cols-1 gap-2 rounded border border-gray-200 bg-white p-3 last:mb-0 sm:grid-cols-2 xl:grid-cols-5" data-locker-charge-row="${locker.id}">
                    <div><p class="text-xs text-gray-500">Locker ${index + 1}</p><p class="text-sm font-semibold text-gray-900">${locker.number}</p></div>
                    <div><label class="mb-1 block text-xs font-medium text-gray-600">Stamping Fee (RM) *</label><input type="number" min="0" step="1" required name="locker_charges[${locker.id}][stamping_fee]" value="${chargeValue(locker, 'stamping_fee')}" data-locker-charge="stamping_fee" class="w-full rounded border border-gray-300 px-2 py-1.5 text-sm" placeholder="Enter amount"></div>
                    <div><label class="mb-1 block text-xs font-medium text-gray-600">Key Deposit (RM) *</label><input type="number" min="0" step="1" required name="locker_charges[${locker.id}][key_deposit]" value="${chargeValue(locker, 'key_deposit')}" data-locker-charge="key_deposit" class="w-full rounded border border-gray-300 px-2 py-1.5 text-sm" placeholder="Enter amount"></div>
                    <div><label class="mb-1 block text-xs font-medium text-gray-600">Insurance (RM) *</label><input type="number" min="0" step="0.01" required name="locker_charges[${locker.id}][insurance_charges]" value="${chargeValue(locker, 'insurance_charges')}" data-locker-charge="insurance_charges" class="w-full rounded border border-gray-300 px-2 py-1.5 text-sm" placeholder="Enter amount"></div>
                    <div><label class="mb-1 block text-xs font-medium text-gray-600">Discount (RM) *</label><input type="number" min="0" step="1" required name="locker_charges[${locker.id}][discount_amount]" value="${chargeValue(locker, 'discount_amount')}" data-locker-charge="discount_amount" class="w-full rounded border border-gray-300 px-2 py-1.5 text-sm" placeholder="Enter amount"></div>
                </div>`).join('');

            container.querySelectorAll('[data-locker-charge]').forEach(input => {
                input.addEventListener('input', () => {
                    const row = input.closest('[data-locker-charge-row]');
                    const locker = selectedLockers.find(item => String(item.id) === row.dataset.lockerChargeRow);
                    if (locker) locker[input.dataset.lockerCharge] = input.value;
                    syncLockerChargeTotals();
                });
                input.addEventListener('change', () => confirmLockerSelection(false));
            });
            if (applyButton) applyButton.classList.toggle('hidden', selectedLockers.length < 2);
            syncLockerChargeTotals();
        }

        function confirmLockerSelection(closeModal = true) {
            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');
            const summary = document.getElementById('selected-lockers-summary');

            renderLockerChargeFields();
            list.innerHTML = '';

            let years = getSelectedYears();

            // 🔹 LOCKER DISPLAY
            selectedLockers.forEach((locker, index) => {
                const lockerItem = document.createElement('div');
                lockerItem.className = 'bg-white py-2';

                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 flex-wrap items-center justify-between gap-x-4 gap-y-1">
            <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
                <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="whitespace-nowrap text-xs text-gray-500">
                    RM ${baseAmount.toFixed(2)} × ${years} year(s)
                </div>

                <div class="whitespace-nowrap 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 = 'w-full';

            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>
    `;

            summary.replaceChildren(summaryWrap);
            summary.classList.remove('hidden');

            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');

            if (closeModal) 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();
                });
            }

            const applyLockerChargesButton = document.getElementById('apply-locker-charges');
            if (applyLockerChargesButton) {
                applyLockerChargesButton.addEventListener('click', function() {
                    if (selectedLockers.length < 2) return;
                    const first = selectedLockers[0];
                    selectedLockers.slice(1).forEach(locker => {
                        locker.stamping_fee = first.stamping_fee ?? '';
                        locker.key_deposit = first.key_deposit ?? '';
                        locker.insurance_charges = first.insurance_charges ?? '';
                        locker.discount_amount = first.discount_amount ?? '';
                    });
                    confirmLockerSelection(false);
                });
            }
        });

        // 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.getElementById('customer-registration-form');

            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 Member Count
                const authCount = document.getElementById('auth_count');
                if (!authCount.value || parseInt(authCount.value, 10) < 1) {
                    isValid = false;
                    errorMessage += 'The Member Count must be at least 1. ';
                    authCount.classList.add('border-red-500');
                    addErrorAfter(authCount, 'The Member Count must be at least 1.');
                }

                // 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 nestedName = field.replace(/\.([^.]+)/g, '[$1]');
                    const input = document.querySelector(`[name="${nestedName}"]`) || 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