{{-- ----------------------------------------------------------- --}}
{{-- Update School Profile Modal --}}
{{-- ----------------------------------------------------------- --}}

<div class="modal fade" id="updateSchoolProfileModal" tabindex="-1" aria-labelledby="updateSchoolProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
        <div class="modal-content loading" id="modalContent">
            {{-- Modal Header --}}
            <div class="modal-header" style="background: linear-gradient(135deg, #0071bd 0%, #005a94 100%);">
                <h5 class="modal-title text-white" id="updateSchoolProfileModalLabel">
                    <i class="fas fa-edit me-2"></i>{{ __('Update Station Profile') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            {{-- Modal Body --}}
            <div class="modal-body">
                <form id="updateSchoolProfileForm">
                    @csrf
                    <input type="hidden" name="station_id" id="modal_station_id" value="{{ session('station_id') }}">

                    {{-- Basic Information Section --}}
                    <x-form-section-spm icon="info-circle" title="{{ __('Basic Information') }}">
                        <x-form-input-spm
                            label="{{ __('Station Name') }}"
                            id="modal_station_name"
                            name="station_name"
                            col-class="col-md-8"
                            maxlength="200"
                            :required="true"
                            error-message="{{ __('Valid name is required') }}"
                        />

                        <x-form-input-spm
                            label="{{ __('School ID') }}"
                            id="modal_school_id"
                            name="school_id"
                            col-class="col-md-4"
                            maxlength="50"
                            :readonly="true"
                        />
                    </x-form-section-spm>

                    {{-- Contact Information Section --}}
                    <x-form-section-spm icon="phone" title="{{ __('Contact Information') }}">
                        <x-form-input-spm
                            type="email"
                            label="{{ __('Email Address') }}"
                            id="modal_email"
                            name="email"
                            maxlength="100"
                            :required="true"
                            error-message="{{ __('Valid email is required') }}"
                        />

                        <x-form-input-spm
                            label="{{ __('Mobile Number') }}"
                            id="modal_contact_number"
                            name="contact_number"
                            placeholder="09XXXXXXXXX"
                            maxlength="11"
                            pattern="09[0-9]{9}"
                            :required="true"
                            error-message="{{ __('Valid mobile number (09XXXXXXXXX) is required') }}"
                        />

                        <x-form-input-spm
                            label="{{ __('Landline') }}"
                            id="modal_landline"
                            name="landline"
                            maxlength="20"
                            :readonly="true"
                        />

                        <x-form-input-spm
                            label="{{ __('Fax') }}"
                            id="modal_fax"
                            name="fax"
                            maxlength="20"
                            :readonly="true"
                        />
                    </x-form-section-spm>


                    {{-- Location Information Section --}}
                    <x-form-section-spm icon="map-marker-alt" title="{{ __('Location Details') }}">
                        {{-- Administrative Office fields --}}
                        <x-profile-admin-offices-spm />

                        {{-- Station Address fields --}}
                        <x-profile-stationAddress-fields />

                    </x-form-section-spm>


                    {{-- Administration Section --}}

                    <!-- Form Section -->
                    <x-form-section-spm icon="user-shield" title="{{ __('Administration') }}">
                    <div style="position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                        <!-- Overlay -->
                        <div style="
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: rgba(255, 255, 255, 0.75);
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            border-radius: 4px;
                            z-index: 10;
                            backdrop-filter: blur(1px);
                        ">
                            <div style="font-weight: 600; color: #666;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
                                    <path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
                                </svg>
                            </div>
                            <div style="font-weight: 600; color: #666; font-size: 16px;">Temporarily Unavailable</div>
                            <div style="font-size: 13px; color: #999; margin-top: 4px;">This section is being updated</div>
                        </div>

                        <x-form-input-spm
                            label="{{ __('Station Head') }}"
                            id="modal_principal"
                            name="principal"
                            maxlength="200"
                            disabled
                        />

                        <x-form-input-spm
                            type="number"
                            label="{{ __('Year Established') }}"
                            id="modal_year_established"
                            name="year_established"
                            min="1900"
                            max="2100"
                            placeholder="YYYY"
                            disabled
                        />
                    </div>
                </x-form-section-spm>

                </form>
            </div>

            {{-- Modal Footer --}}
            <div class="modal-footer">
                {{-- Skeleton --}}
                <div class="skeleton skeleton-btn" style="width: 100px; height: 38px;"></div>
                <div class="skeleton skeleton-btn" style="width: 130px; height: 38px;"></div>

                {{-- Actual Content --}}
                <button type="button" class="btn btn-secondary actual-content" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>{{ __('Cancel') }}
                </button>
                <button type="button" class="btn btn-primary actual-content" id="saveSchoolProfileBtn">
                    <i class="fas fa-save me-2"></i>{{ __('Save Changes') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- styles --}}
<style>
.modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.form-label.fw-semibold {
    font-weight: 600;
    color: #333;
}

.card-header {
    border-bottom: 2px solid #0071bd;
}

.invalid-feedback {
    display: none;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

.was-validated .form-control:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback {
    display: block;
}

/* Skeleton Loading Styles - Using same styles as main profile page */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 0.375rem;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0;
}

.skeleton-input {
    height: 38px;
    border-radius: 0.375rem;
    width: 100%;
}

.skeleton-textarea {
    height: 60px;
    border-radius: 0.375rem;
    width: 100%;
}

.skeleton-btn {
    height: 38px;
    border-radius: 0.375rem;
}

/* Hide/Show based on loading state */
.loading .actual-content {
    display: none !important;
}

.loading .skeleton {
    display: block !important;
}

.actual-content {
    display: block;
}

.skeleton {
    display: none;
}

/* Select Loading Spinner */
.select-loading-spinner {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    pointer-events: none;
    z-index: 5;
}

.select-loading-spinner.active {
    display: block;
}
</style>
{{-- ----------------------------------------------------------- --}}
{{-- End of Update School Profile Modal --}}