@props([
    'modalId' => 'editUnscr1267Modal',
    'title' => 'Edit UNSCR 1267 Record',

    'firstNameModel' => 'editFirstName',
    'secondNameModel' => 'editSecondName',
    'thirdNameModel' => 'editThirdName',
    'fourthNameModel' => 'editFourthName',
    'originalNameModel' => 'editOriginalName',

    'nationalityModel' => 'editNationality',
    'genderModel' => 'editGender',

    'referenceNumberModel' => 'editReferenceNumber',
    'unListTypeModel' => 'editUnListType',
    'listTypeModel' => 'editListType',
    'listedOnModel' => 'editListedOn',

    'commentsModel' => 'editComments',

    'updateMethod' => 'updateUnscr1267',

    'showExtendedNameFields' => true,
])

{{-- EDIT UNSCR 1267 --}}
<div wire:ignore.self class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog
                    modal-xl
                    modal-dialog-scrollable">

        <div class="modal-content">

            {{-- HEADER --}}
            <div class="modal-header">

                <div>
                    <h5 class="modal-title">
                        {{ $title }}
                    </h5>

                    <small class="text-muted">
                        Update UNSCR record information
                    </small>
                </div>

                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

            </div>


            {{-- BODY --}}
            <div class="modal-body">

                {{-- BASIC INFORMATION --}}
                <h6
                    class="
                                fw-bold
                                border-bottom
                                pb-2
                                mb-3
                            ">
                    Basic Information
                </h6>

                <div class="row g-3 mb-4">

                    {{-- FIRST NAME --}}
                    <div class="col-md-3">

                        <label class="form-label">
                            First Name
                            <span class="text-danger">*</span>
                        </label>

                        <input type="text" class="form-control @error('editFirstName') is-invalid @enderror"
                            wire:model="{{ $firstNameModel }}">

                        @error('editFirstName')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>


                    {{-- SECOND NAME --}}
                    <div class="col-md-3">

                        <label class="form-label">
                            Second Name
                        </label>

                        <input type="text" class="form-control" wire:model="{{ $secondNameModel }}">

                    </div>


                    {{-- THIRD NAME --}}
                    <div class="col-md-3">

                        <label class="form-label">
                            Third Name
                        </label>

                        <input type="text" class="form-control" wire:model="{{ $thirdNameModel }}">

                    </div>


                    {{-- FOURTH NAME --}}
                    @if ($showExtendedNameFields)
                        <div class="col-md-3">

                            <label class="form-label">
                                Fourth Name
                            </label>

                            <input type="text" class="form-control" wire:model="{{ $fourthNameModel }}">

                        </div>
                    @else
                        <div class="col-md-3"></div>
                    @endif


                    {{-- ORIGINAL NAME --}}
                    @if ($showExtendedNameFields)
                        <div class="col-md-6">

                            <label class="form-label">
                                Name in Original Script
                            </label>

                            <input type="text" class="form-control" wire:model="{{ $originalNameModel }}">

                        </div>
                    @else
                        <div class="col-md-6"></div>
                    @endif


                    {{-- NATIONALITY --}}
                    <div class="col-md-3">

                        <label class="form-label">
                            Nationality
                        </label>

                        <select class="form-select" wire:model="{{ $nationalityModel }}">

                            <option value="">
                                Select Nationality
                            </option>

                            @foreach ($this->nationalities as $country)
                                <option value="{{ $country }}">
                                    {{ $country }}
                                </option>
                            @endforeach

                        </select>

                    </div>


                    {{-- GENDER --}}
                    <div class="col-md-3">

                        <label class="form-label">
                            Gender
                        </label>

                        <select class="form-select" wire:model="{{ $genderModel }}">

                            <option value="">
                                -
                            </option>

                            <option value="Male">
                                Male
                            </option>

                            <option value="Female">
                                Female
                            </option>

                        </select>

                    </div>

                </div>


                {{-- UN LIST INFORMATION --}}
                <h6
                    class="
                                fw-bold
                                border-bottom
                                pb-2
                                mb-3
                            ">
                    UN List Information
                </h6>

                <div class="row g-3 mb-4">

                    {{-- REFERENCE NUMBER --}}
                    <div class="col-md-3">
                        <label class="form-label">
                            Reference Number
                        </label>

                        <input type="text" class="form-control" wire:model="{{ $referenceNumberModel }}">
                    </div>


                    {{-- UN LIST TYPE --}}
                    <div class="col-md-3">
                        <label class="form-label">
                            UN List Type
                        </label>

                        <input type="text" class="form-control" wire:model="{{ $unListTypeModel }}">
                    </div>


                    {{-- LIST TYPE --}}
                    <div class="col-md-3">
                        <label class="form-label">
                            List Type
                        </label>

                        <input type="text" class="form-control" wire:model="{{ $listTypeModel }}">
                    </div>


                    {{-- DATE LISTED --}}
                    <div class="col-md-3">
                        <label class="form-label">
                            Date Listed
                        </label>

                        <input type="date" class="form-control @error('editListedOn') is-invalid @enderror"
                            wire:model="{{ $listedOnModel }}">

                        @error('editListedOn')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                </div>


                {{-- ADDITIONAL INFORMATION --}}
                <h6
                    class="
                                fw-bold
                                border-bottom
                                pb-2
                                mb-3
                            ">
                    Additional Information
                </h6>

                <div class="row g-3">

                    <div class="col-md-12">

                        <label class="form-label">
                            Comments
                        </label>

                        <textarea class="form-control" rows="5" wire:model="{{ $commentsModel }}"></textarea>

                    </div>

                </div>

            </div>


            {{-- FOOTER --}}
            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Cancel
                </button>

                <button type="button" class="btn btn-primary" wire:click="{{ $updateMethod }}"
                    wire:loading.attr="disabled"wire:target="{{ $updateMethod }}">

                    <span wire:loading.remove wire:target="{{ $updateMethod }}">
                        Save Changes
                    </span>

                    <span wire:loading wire:target="{{ $updateMethod }}">
                        Saving...
                    </span>

                </button>

            </div>

        </div>

    </div>

</div>