@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap4-duallistbox/dist/bootstrap-duallistbox.min.css">
@endpush


<div class="row">
    <div class="col-lg-12 order-lg-1">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Maklumat Ahli</h6>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ $route }}">
                    @csrf
                    @if ($type == 'EDIT')
                        @method('PUT')
                    @endif

                    <!-- ====================== USER INFORMATION ====================== -->
                    <h6 class="heading-small text-muted mb-4">{{ __('Info Pelanggan') }}</h6>

                    <div class="pl-lg-4">
                        <div class="row">
                            <x-ui.input
                                class="input"
                                name="name"
                                label="Nama Penuh"
                                type="text"
                                placeholder="Name"
                                :value="(isset($user) && $user->name)? $user->name : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                            <x-ui.input
                                class="input"
                                name="phone_no"
                                label="Nombor Telefon"
                                type="text"
                                placeholder="0123456789"
                                :value="(isset($user) && $user->phone_no)? $user->phone_no : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                        </div>
                        <div class="row">
                            <x-ui.textarea
                                name="address"
                                label="Alamat"
                                :value="(isset($user) && $user->address)? $user->address : ''"
                                col="col-md-12"
                                rows="5"
                                :disabled="false"
                            />
                        </div>
                        <div class="row">
                            <x-ui.input
                                class="input"
                                name="email"
                                label="Alamat E-mel"
                                type="text"
                                placeholder="contoh@mail.com"
                                :value="(isset($user) && $user->email)? $user->email : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                            <x-ui.input
                                class="input"
                                name="ic_no"
                                label="Nombor Kad Pengenalan"
                                type="text"
                                placeholder="987654019876"
                                :value="(isset($user) && $user->ic_no)? $user->ic_no : ''"
                                col="col-md-6"
                                required
                                :disabled="$type == 'EDIT'"
                            />
                        </div>
                        <div class="row">
                            <x-ui.input
                                class="input"
                                name="password"
                                label="Kata Laluan"
                                type="password"
                                placeholder="***********"
                                value=""
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                            <x-ui.select
                                name="status"
                                label="Status"
                                :options="$statuses"
                                :selected="(isset($user) && $user->status)? $user->status : \App\Models\User::STATUS_INACTIVE"
                                nullable
                                col="col-md-6"
                                required
                                :select2="true"
                                :disabled="false"
                            />
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- ====================== BANK INFO ====================== -->
                    <h6 class="heading-small text-muted mb-4">Maklumat Akaun Bank</h6>

                    <div class="pl-lg-4">
                        <div class="row">
                            <x-ui.input
                                class="input"
                                name="name_on_bank"
                                label="Nama Pada Akaun Bank"
                                type="text"
                                placeholder="Ahmand Bin Abu"
                                :value="(isset($user) && $user->name_on_bank)? $user->name_on_bank : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                            <x-ui.input
                                class="input"
                                name="bank_name"
                                label="Nama Bank"
                                type="text"
                                placeholder="CIMB/Maybank/OUB/DLL"
                                :value="(isset($user) && $user->bank_name)? $user->bank_name : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                        </div>
                        <div class="row">
                            <x-ui.input
                                class="input"
                                name="bank_account_no"
                                label="Nombor Akaun Bank"
                                type="text"
                                placeholder="12345 1234 12345"
                                :value="(isset($user) && $user->bank_account_no)? $user->bank_account_no : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                        </div>
                    </div>

                    <hr class="my-4">

                    <h6 class="heading-small text-muted mb-4">Maklumat Bank (KP)</h6>

                    <div class="pl-lg-4">
                        <div class="row">
                            @foreach($kps as $kp)
                                @php
                                    // Pre-fill if editing an existing user who has a bank account for this KP
                                    $kpBank = isset($user) ? $user->bankAccounts->where('kp_id', $kp->id)->first() : null;
                                @endphp
                                <div class="col-lg-6 mb-4">
                                    <div class="p-3 bg-light border rounded shadow-sm h-100">
                                        <h6 class="font-weight-bold text-primary mb-3 pb-2 border-bottom">
                                            <i class="fas fa-user-tie mr-2"></i> {{ $kp->name }}
                                        </h6>
                                        <div class="row">
                                            <x-ui.input
                                                class="input"
                                                name="kp_bank[{{ $kp->id }}][bank_name]"
                                                label="Nama Bank"
                                                type="text"
                                                placeholder="CIMB/Maybank/RHB"
                                                :value="$kpBank ? $kpBank->name : ''"
                                                col="col-md-12 mb-2"
                                                :required="false"
                                                :disabled="false"
                                            />
                                            <x-ui.input
                                                class="input"
                                                name="kp_bank[{{ $kp->id }}][account_no]"
                                                label="Nombor Akaun"
                                                type="text"
                                                placeholder="Nombor Akaun Bank"
                                                :value="$kpBank ? $kpBank->account_no : ''"
                                                col="col-md-12"
                                                :required="false"
                                                :disabled="false"
                                            />
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- ====================== NEXT OF KIN ====================== -->
                    <h6 class="heading-small text-muted mb-4">Maklumat Pewaris</h6>

                    <div class="pl-lg-4">
                        <div class="row kin-item">
                            <x-ui.input
                                class="input"
                                name="nok_name"
                                label="Nama"
                                type="text"
                                placeholder=""
                                :value="(isset($user) && $user->nok_name)? $user->nok_name : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                            <x-ui.input
                                class="input"
                                name="nok_phone_no"
                                label="Nombor Telefon"
                                type="text"
                                placeholder="0123456789"
                                :value="(isset($user) && $user->nok_phone_no)? $user->nok_phone_no : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                        </div>
                        <div class="row">
                            <x-ui.input
                                class="input"
                                name="nok_relationship"
                                label="Hubungan"
                                type="text"
                                placeholder="0123456789"
                                :value="(isset($user) && $user->nok_relationship)? $user->nok_relationship : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                            <x-ui.input
                                class="input"
                                name="nok_relationship"
                                label="Hubungan"
                                type="text"
                                placeholder="0123456789"
                                :value="(isset($user) && $user->nok_relationship)? $user->nok_relationship : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                        </div>
                        <div class="row">
                            <x-ui.input
                                class="input"
                                name="nok_ic_no"
                                label="Nombor Kad Pengenalan"
                                type="text"
                                placeholder="987654019876"
                                :value="(isset($user) && $user->nok_ic_no)? $user->nok_ic_no : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                            <x-ui.input
                                class="input"
                                name="nok_email"
                                label="Alamat E-mel"
                                type="text"
                                placeholder="contoh@mail.com"
                                :value="(isset($user) && $user->nok_email)? $user->nok_email : ''"
                                col="col-md-6"
                                required
                                :disabled="false"
                            />
                        </div>
                        <div class="row">
                            <x-ui.input
                                class="input"
                                name="nok_name_on_bank"
                                label="Nama Pada Akaun Bank"
                                type="text"
                                placeholder="Abu Bin Bakar"
                                :value="(isset($user) && $user->nok_name_on_bank)? $user->nok_name_on_bank : ''"
                                col="col-md-4"
                                required
                                :disabled="false"
                            />
                            <x-ui.input
                                class="input"
                                name="nok_bank_account_no"
                                label="Nombor Akaun Bank"
                                type="text"
                                placeholder="123 465 1234"
                                :value="(isset($user) && $user->nok_bank_account_no)? $user->nok_bank_account_no : ''"
                                col="col-md-4"
                                required
                                :disabled="false"
                            />
                            <x-ui.input
                                class="input"
                                name="nok_bank_name"
                                label="Nama Bank"
                                type="text"
                                placeholder="CIMB/Maybank/OUB/DLL"
                                :value="(isset($user) && $user->nok_bank_name)? $user->nok_bank_name : ''"
                                col="col-md-4"
                                required
                                :disabled="false"
                            />
                        </div>
                    </div>

                    @if ((hasPermission('permission.manage', App\Services\PermissionAccessService::UPDATE) && $type == 'EDIT') || (hasPermission('permission.manage', App\Services\PermissionAccessService::CREATE) && $type != 'EDIT'))
                    <hr class="my-4">

                    <h6 class="heading-small text-muted mb-4">Roles</h6>
                    <div class="form-group focused">
                        <div class="mb-3">
                            <select multiple="multiple" size="10" name="roles[]" id="roles-duallist"
                                class="form-control">
                                @foreach ($roles as $id => $name)
                                    @if (isset($assignedRoles))
                                        <option value="{{ $id }}" {{ in_array($id, $assignedRoles ?? []) ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @else
                                        <option value="{{ $id }}">
                                            {{ $name }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @endif
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                        <a href="{{ route('user.index') }}" class="btn btn-secondary">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap4-duallistbox/dist/jquery.bootstrap-duallistbox.min.js"></script>
    <script>
        let dualList = $('#roles-duallist').bootstrapDualListbox({
            nonSelectedListLabel: 'Available Roles',
            selectedListLabel: 'Assigned Roles',
            moveOnSelect: false,
            preserveSelectionOnMove: 'moved',
        });

        // 🛠️ This ensures deselected options are actually removed
        $('form').on('submit', function () {
            dualList.bootstrapDualListbox('refresh', true);
        });
    </script>
@endpush