@props([
    'modalId',
    'title',
    'firstNameModel',
    'secondNameModel',
    'thirdNameModel',
    'fourthNameModel' => null,
    'originalNameModel' => null,
    'nationalityModel',
    'nationalitySelectId',
    'genderModel',
    'referenceNumberModel',
    'unListTypeModel',
    'listTypeModel',
    'listedOnModel',
    'commentsModel',
    'designationModel' => null,
    'showDesignation' => false,
    'titleModel' => null,
    'showTitle' => false,
    'saveMethod',
    'showFourthName' => true,
    'showOriginalName' => true,

    'firstNameInputId' => null,
])

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

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

        <div class="modal-content">

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

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>


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

                <h6 class="fw-bold border-bottom pb-2 mb-3">
                    Personal Information
                </h6>

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

                    {{-- FIRST NAME --}}
                    <div class="{{ $showFourthName ? 'col-md-3' : 'col-md-4' }}">
                        <label class="form-label">
                            First Name
                            <span class="text-danger">*</span>
                        </label>

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

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


                    {{-- SECOND NAME --}}
                    <div class="{{ $showFourthName ? 'col-md-3' : 'col-md-4' }}">
                        <label class="form-label">
                            Second Name
                        </label>

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


                    {{-- THIRD NAME --}}
                    <div class="{{ $showFourthName ? 'col-md-3' : 'col-md-4' }}">
                        <label class="form-label">
                            Third Name
                        </label>

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


                    {{-- FOURTH NAME --}}
                    @if ($showFourthName && $fourthNameModel)
                        <div class="col-md-3">
                            <label class="form-label">
                                Fourth Name
                            </label>

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


                    {{-- ORIGINAL NAME --}}
                    @if ($showOriginalName && $originalNameModel)
                        <div class="col-md-6">
                            <label class="form-label">
                                Name in Original Script
                            </label>

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


                    {{-- NATIONALITY --}}
                    <div class="col-md-3">
                        <label class="form-label">
                            Nationality
                        </label>

                        <div wire:ignore>
                            <select id="{{ $nationalitySelectId }}" class="form-select"
                                data-livewire-model="{{ $nationalityModel }}">

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

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

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

                @if ($showTitle || $showDesignation)

                    <h6 class="fw-bold border-bottom pb-2 mb-3">
                        @if ($showTitle && $showDesignation)
                            Title & Designation
                        @elseif ($showTitle)
                            Title
                        @else
                            Designation
                        @endif
                    </h6>

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

                        @if ($showTitle && $titleModel)
                            <div class="{{ $showDesignation ? 'col-md-4' : 'col-md-12' }}">

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

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

                            </div>
                        @endif


                        @if ($showDesignation && $designationModel)
                            <div class="{{ $showTitle ? 'col-md-8' : 'col-md-12' }}">

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

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

                            </div>
                        @endif

                    </div>

                @endif

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

                <div class="row g-3 mb-4">
                    <div class="col-md-3">
                        <label class="form-label">
                            Reference Number
                        </label>

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


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

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

                    <div class="col-md-3">
                        <label class="form-label">
                            List Type
                        </label>

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

                    <div class="col-md-3">
                        <label class="form-label">
                            Date Listed
                        </label>

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

                <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-danger" data-bs-dismiss="modal">
                    Cancel
                </button>

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

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

                    <span wire:loading wire:target="{{ $saveMethod }}">
                        Saving...
                    </span>
                </button>
            </div>

        </div>

    </div>

</div>