@extends('layout.layout')

@section('content')
    @include('components.alert')

    @php
        $isParentProfile = $isParentProfile ?? false;
        $displayName = $isParentProfile
            ? ($profileUser->full_name ?? 'Parent Profile')
            : trim(($student->first_name ?? '') . ' ' . ($student->last_name ?? ''));
        $studentInitials = strtoupper(substr($displayName ?: 'P', 0, 1));
    @endphp

    <form class="form student-edit-form"
          action="{{ route('updateProfile') }}"
          method="POST"
          enctype="multipart/form-data"
          accept-charset="UTF-8">
        @csrf
        @method('POST')

        <div class="container-fluid app-bg student-edit-page">
            <div class="page-shell">
                <div class="space-y-4">

                    <x-page-title
                        title="{{ $isParentProfile ? 'Edit Parent Profile' : 'Edit Student Profile' }}"
                        description="{{ $isParentProfile ? 'Update parent account and guardian information.' : 'Update student personal details, contact information, profile data, and related editable records.' }}">
                        <button type="button" onclick="history.back()" class="asset-btn asset-btn--secondary">
                            <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                            Back
                        </button>

                    <a href="{{ route('changePassword') }}" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="ri:lock-password-line"></iconify-icon>
                        Change Password
                    </a>
                    
                    </x-page-title>

                    <div class="ui-card student-edit-shell-card">
                        <div class="student-edit-layout">

                            <aside class="student-edit-sidebar">
                                <div class="student-edit-sidebar__head">
                                    <div class="student-edit-avatar">
                                        {{ $studentInitials ?: 'ST' }}
                                    </div>

                                    <div class="student-edit-sidebar__info">
                                        <div class="student-edit-sidebar__name">
                                            {{ $displayName ?: ($isParentProfile ? 'Parent Profile' : 'Student Profile') }}
                                        </div>

                                        <div class="student-edit-sidebar__meta">
                                            {{ $isParentProfile ? ($profileUser->email ?? ('#' . ($parentProfile->id ?? ''))) : ($student->student_code ?? ('#' . $student->id)) }}
                                        </div>
                                    </div>
                                </div>

                                <div class="student-edit-tabs nav flex-column nav-pills"
                                     id="studentTabs"
                                     role="tablist"
                                     aria-orientation="vertical">

                                    <button class="nav-link active student-edit-tab-link"
                                            id="basic-info-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#basic-info"
                                            type="button"
                                            role="tab"
                                            aria-controls="basic-info"
                                            aria-selected="true">
                                        <span class="student-edit-tab-link__icon">
                                            <i class="ri-user-3-line"></i>
                                        </span>
                                        <span>Personal Details</span>
                                    </button>

                                    {{-- Preserved for future usage if these tabs are re-enabled --}}
                                    {{--
                                    <button class="nav-link student-edit-tab-link"
                                            id="summary-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#summary"
                                            type="button"
                                            role="tab"
                                            aria-controls="summary"
                                            aria-selected="false">
                                        <span class="student-edit-tab-link__icon">
                                            <i class="ri-file-list-3-line"></i>
                                        </span>
                                        <span>Summary</span>
                                    </button>

                                    <button class="nav-link student-edit-tab-link"
                                            id="feedback-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#feedback"
                                            type="button"
                                            role="tab"
                                            aria-controls="feedback"
                                            aria-selected="false">
                                        <span class="student-edit-tab-link__icon">
                                            <i class="ri-feedback-line"></i>
                                        </span>
                                        <span>Feedback</span>
                                    </button>
                                    --}}
                                </div>
                            </aside>

                            <main class="student-edit-content">
                                <div class="student-edit-content__hero">
                                    <div class="student-edit-content__main">
                                        <div class="student-edit-content__icon">
                                            <iconify-icon icon="ri:edit-box-line"></iconify-icon>
                                        </div>

                                        <div>
                                            <h5 class="student-edit-content__title mb-0">
                                                Profile Information
                                            </h5>
                                            <p class="student-edit-content__sub mb-0">
                                                {{ $isParentProfile ? 'Keep parent account and guardian details accurate before saving changes.' : "Keep the student's data accurate before saving changes." }}
                                            </p>
                                        </div>
                                    </div>

                                </div>

                                <div class="tab-content student-edit-tab-content" id="studentTabsContent">
                                    @if ($isParentProfile)
                                        @include('dashboard.student.tabs.parent_basic_info')
                                    @else
                                        @include('dashboard.student.tabs.basic_info')
                                    @endif
                                    @unless ($isParentProfile)
                                        @include('dashboard.student.tabs.summary')
                                        @include('dashboard.student.tabs.feedback')
                                    @endunless
                                </div>

                                <div class="student-edit-footer">
                                    <a href="{{ $isParentProfile ? route('profile') : route('showProfile') }}" class="asset-btn asset-btn--secondary">
                                        Cancel
                                    </a>

                                    <button type="submit" class="asset-btn asset-btn--primary">
                                        <iconify-icon icon="ri:save-3-line"></iconify-icon>
                                        Update Profile
                                    </button>
                                </div>
                            </main>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css" />

    <style>
        .student-edit-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
            overflow: hidden;
        }

        .student-edit-shell-card {
            min-width: 0;
        }

        .student-edit-layout {
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            gap: 1.25rem;
            align-items: start;
        }

        .student-edit-sidebar {
            position: sticky;
            top: 1rem;
            min-width: 0;
        }

        .student-edit-sidebar__head {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 1rem;
            margin-bottom: 0.85rem;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #f8fafc;
            min-width: 0;
        }

        .student-edit-avatar {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-weight: 850;
            letter-spacing: 0.04em;
            flex-shrink: 0;
        }

        .student-edit-sidebar__info {
            min-width: 0;
        }

        .student-edit-sidebar__name {
            font-size: 0.98rem;
            font-weight: 850;
            color: #111827;
            line-height: 1.3;
            overflow-wrap: anywhere;
        }

        .student-edit-sidebar__meta {
            margin-top: 0.2rem;
            color: #6b7280;
            font-size: 0.84rem;
            overflow-wrap: anywhere;
        }

        .student-edit-tabs {
            gap: 0.5rem;
        }

        .student-edit-tab-link {
            width: 100%;
            display: flex !important;
            align-items: center;
            gap: 0.65rem;
            text-align: left;
            border: 1px solid #dbe2ea !important;
            background: #f8fafc !important;
            color: #334155 !important;
            border-radius: 14px !important;
            padding: 0.82rem 0.95rem !important;
            font-size: 0.9rem;
            font-weight: 750;
            transition: 0.2s ease;
            box-shadow: none !important;
            white-space: normal;
            line-height: 1.35;
        }

        .student-edit-tab-link:hover {
            background: #f1f5f9 !important;
            border-color: #cfd8e3 !important;
            color: #111827 !important;
        }

        .student-edit-tab-link.active {
            background: #111827 !important;
            color: #fff !important;
            border-color: #111827 !important;
        }

        .student-edit-tab-link__icon {
            width: 28px;
            height: 28px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.85);
            color: #071b3d;
            flex-shrink: 0;
        }

        .student-edit-tab-link.active .student-edit-tab-link__icon {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        .student-edit-content,
        .student-edit-tab-content,
        .tab-content,
        .tab-pane {
            min-width: 0;
            max-width: 100%;
            overflow-x: hidden;
        }

        .student-edit-content__hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #f8fafc;
            margin-bottom: 1.25rem;
            min-width: 0;
        }

        .student-edit-content__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .student-edit-content__icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .student-edit-content__title {
            font-size: 1rem;
            font-weight: 850;
            color: #111827;
        }

        .student-edit-content__sub {
            margin-top: 0.2rem;
            color: #6b7280;
            font-size: 0.88rem;
            line-height: 1.5;
        }

        .student-edit-content__actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .student-edit-footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            padding-top: 1.25rem;
            margin-top: 1.25rem;
            border-top: 1px solid #eef2f7;
        }

        .form-section {
            min-width: 0;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 850;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .modern-section {
            background: #f8fafc;
            border: 1px solid #edf2f7;
            border-radius: 18px;
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
            padding: 1.25rem;
            margin-bottom: 1.25rem;
            min-width: 0;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-col-4 {
            grid-column: span 4 / span 4;
        }

        .asset-col-3 {
            grid-column: span 3 / span 3;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 700;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .asset-select,
        .form-control,
        .form-select,
        .select2-container .select2-selection--single,
        .select2-container .select2-selection--multiple {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 12px !important;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        textarea.asset-input,
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .asset-input:focus,
        .asset-select:focus,
        .form-control:focus,
        .form-select:focus,
        .select2-container--default.select2-container--focus .select2-selection--multiple,
        .select2-container--default.select2-container--open .select2-selection--single {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .asset-invalid,
        .is-invalid,
        .asset-select.is-invalid,
        .asset-input.is-invalid,
        .form-control.is-invalid,
        .form-select.is-invalid {
            border-color: #dc3545 !important;
        }

        .select2-container {
            display: block !important;
            width: 100% !important;
        }

        .select2-container .selection {
            display: block !important;
            width: 100% !important;
        }

        .select2-container .select2-selection--single {
            display: flex !important;
            align-items: center;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0 !important;
            padding-right: 1.5rem !important;
            color: #111827 !important;
            line-height: 1.5 !important;
        }

        .select2-container .select2-selection--single .select2-selection__arrow {
            height: 100% !important;
            right: 10px !important;
        }

        .select2-container .select2-selection--multiple {
            padding: 0.35rem 0.5rem !important;
        }

        .upload-box {
            border: 1px dashed #cbd5e1;
            border-radius: 16px;
            padding: 1rem;
            background: #fff;
        }

        .upload-box__title {
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 0.25rem;
        }

        .upload-box__text {
            color: #64748b;
            font-size: 0.88rem;
            margin-bottom: 0.85rem;
        }

        #studentImageShow {
            width: 96px;
            height: 96px;
            object-fit: cover;
            border-radius: 18px;
            border: 1px solid #e5e7eb;
            background: #f8fafc;
            margin-top: 0.75rem;
        }

        .iti {
            position: relative;
            display: block !important;
            width: 100%;
        }

        .iti input,
        .iti .form-control,
        .iti .asset-input {
            width: 100% !important;
        }

        .iti__country {
            padding: 5px;
            display: flex;
            align-content: center;
            align-items: center;
        }

        .iti__country-list {
            white-space: normal !important;
            width: 275px !important;
            max-width: calc(100vw - 40px);
            border-radius: 12px;
            border-color: #dbe2ea;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        }

        .student-edit-form .asset-btn,
        .student-edit-form button.asset-btn,
        .student-edit-form a.asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        @media (max-width: 991.98px) {
            .student-edit-layout {
                grid-template-columns: 1fr;
            }

            .student-edit-sidebar {
                position: static;
            }

            .student-edit-tabs {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .asset-col-6,
            .asset-col-4,
            .asset-col-3 {
                grid-column: span 12 / span 12;
            }
        }

        @media (max-width: 575.98px) {
            .student-edit-page .ui-card {
                padding: 1rem;
            }

            .student-edit-tabs {
                grid-template-columns: 1fr;
            }

            .student-edit-sidebar__head,
            .student-edit-content__hero {
                align-items: flex-start;
            }

            .student-edit-content__actions,
            .student-edit-footer {
                width: 100%;
            }

            .student-edit-content__actions .asset-btn,
            .student-edit-footer .asset-btn {
                flex: 1 1 100%;
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>

    <script>
        var $locale = '{{ app()->getLocale() }}';

        $(document).ready(function () {
            $('#student_photo').on('change', function (event) {
                const file = event.target.files[0];

                if (file) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        $('#studentImageShow')
                            .removeClass('d-none')
                            .attr('src', e.target.result);
                    };

                    reader.readAsDataURL(file);
                }
            });

            if ($.fn.select2) {
                $('.general-select, .select2').each(function () {
                    const $select = $(this);

                    if (!$select.hasClass('select2-hidden-accessible')) {
                        $select.select2({
                            width: '100%',
                            placeholder: $select.data('placeholder') || 'Select option',
                            allowClear: true
                        });
                    }
                });
            }
        });

        document.addEventListener('DOMContentLoaded', function () {
            const mobileInput = document.querySelector('#mobile');
            const mobileCountryCodeInput = document.querySelector('#mobile_country_code');
            const mobileDialCodeInput = document.querySelector('#mobile_dial_code');

            const anotherMobileInput = document.querySelector('#another_mobile');
            const anotherMobileCountryCodeInput = document.querySelector('#another_mobile_country_code');
            const anotherMobileDialCodeInput = document.querySelector('#another_mobile_dial_code');

            if (!window.intlTelInput) {
                return;
            }

            function initPhoneInput(input, countryCodeInput) {
                if (!input) {
                    return null;
                }

                return intlTelInput(input, {
                    initialCountry: countryCodeInput && countryCodeInput.value
                        ? countryCodeInput.value.toLowerCase()
                        : 'eg',
                    separateDialCode: true,
                    formatOnDisplay: false,
                    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js',
                });
            }

            function updateFields(input, countryCodeInput, dialCodeInput, iti) {
                if (!input || !countryCodeInput || !dialCodeInput || !iti) {
                    return;
                }

                if (input.value.trim()) {
                    const selectedCountry = iti.getSelectedCountryData();

                    countryCodeInput.value = selectedCountry.iso2
                        ? selectedCountry.iso2.toUpperCase()
                        : '';

                    dialCodeInput.value = selectedCountry.dialCode
                        ? '+' + selectedCountry.dialCode
                        : '';
                } else {
                    countryCodeInput.value = '';
                    dialCodeInput.value = '';
                }
            }

            const mobileIti = initPhoneInput(mobileInput, mobileCountryCodeInput);
            const anotherMobileIti = initPhoneInput(anotherMobileInput, anotherMobileCountryCodeInput);

            if (mobileInput && mobileIti) {
                mobileInput.addEventListener('input', function () {
                    updateFields(mobileInput, mobileCountryCodeInput, mobileDialCodeInput, mobileIti);
                });

                mobileInput.addEventListener('countrychange', function () {
                    updateFields(mobileInput, mobileCountryCodeInput, mobileDialCodeInput, mobileIti);
                });

                if (mobileInput.value && mobileCountryCodeInput && mobileCountryCodeInput.value) {
                    mobileIti.setNumber(mobileInput.value);
                }
            }

            if (anotherMobileInput && anotherMobileIti) {
                anotherMobileInput.addEventListener('input', function () {
                    updateFields(anotherMobileInput, anotherMobileCountryCodeInput, anotherMobileDialCodeInput, anotherMobileIti);
                });

                anotherMobileInput.addEventListener('countrychange', function () {
                    updateFields(anotherMobileInput, anotherMobileCountryCodeInput, anotherMobileDialCodeInput, anotherMobileIti);
                });

                if (anotherMobileInput.value && anotherMobileCountryCodeInput && anotherMobileCountryCodeInput.value) {
                    anotherMobileIti.setNumber(anotherMobileInput.value);
                }
            }

            const form = document.querySelector('.student-edit-form');

            if (form) {
                form.addEventListener('submit', function () {
                    updateFields(mobileInput, mobileCountryCodeInput, mobileDialCodeInput, mobileIti);
                    updateFields(anotherMobileInput, anotherMobileCountryCodeInput, anotherMobileDialCodeInput, anotherMobileIti);
                });
            }
        });
    </script>
@endpush