{{-- PIN Code Create Modal Component --}}
@props([
    'id' => 'create-pin-with-password-modal',
    'title' => 'إنشاء البين كود الجديد',
])

<div class="modal fade" id="{{ $id }}" tabindex="-1" role="dialog" aria-hidden="true" data-pin-component>
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ $title }}</h5>
                <button class="modal-close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="notice-minimal">
                    <x-lucide-info class="me-2" width="16" height="16" />
                    أدخل كلمة المرور الخاصة بك والبين كود الجديد
                </div>

                <form id="{{ $id }}-form">
                    @csrf
                    <div class="row gy-3">
                        <!-- كلمة المرور -->
                        <div class="col-12">
                            <div class="input-group prefix">
                                <label for="create-password" class="form-label">كلمة المرور</label>
                                <div class="input-wrapper ">
                                    <x-lucide-lock class="input-prefix" width="16" height="16" />
                                    <input type="password" id="create-password" name="password"
                                        placeholder="أدخل كلمة المرور الخاصة بك" required>
                                </div>
                            </div>
                        </div>

                        <!-- البين كود -->
                        <div class="col-12" dir="ltr">
                            <label class="form-label text-end w-100" dir="rtl">البين كود الجديد (4 أرقام)</label>
                            <div class="pin-input-container">
                                <div class="pin-inputs">
                                    <input class="pin-digit" name="create_pin_digit_1" type="password" readonly
                                        maxlength="1" data-index="0" autocomplete="off" inputmode="none" />
                                    <input class="pin-digit" name="create_pin_digit_2" type="password" readonly
                                        maxlength="1" data-index="1" autocomplete="off" inputmode="none" />
                                    <input class="pin-digit" name="create_pin_digit_3" type="password" readonly
                                        maxlength="1" data-index="2" autocomplete="off" inputmode="none" />
                                    <input class="pin-digit" name="create_pin_digit_4" type="password" readonly
                                        maxlength="1" data-index="3" autocomplete="off" inputmode="none" />
                                </div>

                                <div class="pin-keypad">
                                    <button type="button" class="pin-key" data-key="1">1</button>
                                    <button type="button" class="pin-key" data-key="2">2</button>
                                    <button type="button" class="pin-key" data-key="3">3</button>
                                    <button type="button" class="pin-key" data-key="4">4</button>
                                    <button type="button" class="pin-key" data-key="5">5</button>
                                    <button type="button" class="pin-key" data-key="6">6</button>
                                    <button type="button" class="pin-key" data-key="7">7</button>
                                    <button type="button" class="pin-key" data-key="8">8</button>
                                    <button type="button" class="pin-key" data-key="9">9</button>
                                    <button type="button" class="pin-key pin-key-clear">
                                        <x-lucide-x-circle width="20" height="20" />
                                    </button>
                                    <button type="button" class="pin-key" data-key="0">0</button>
                                    <button type="button" class="pin-key pin-key-backspace">
                                        <x-lucide-delete width="20" height="20" />
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn-custom-secondary" data-dismiss="modal">
                    <x-lucide-x-circle width="16" height="16" />
                    إلغاء
                </button>
                <button type="button" class="btn-custom-primary pin-submit-btn create-pin-with-password-btn"
                    data-action="createPinWithPassword" style="margin: 0;">
                    <x-lucide-key width="16" height="16" />
                    إنشاء البين كود
                </button>
            </div>
        </div>
    </div>
</div>