@extends('layout.layout')

@section('content')
    <div class="container mt-4">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <div class="card">

            <div class="card-body">
                <form action="{{ route('updateProfile') }}" method="POST" enctype="multipart/form-data">
                    @csrf


                    <ul class="nav nav-tabs" id="studentTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-info-tab" data-bs-toggle="tab"
                                data-bs-target="#basic-info" type="button" role="tab">Basic Info</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="parents-info-tab" data-bs-toggle="tab"
                                data-bs-target="#parents-info" type="button" role="tab">Parents & Guardian
                                Info</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="bank-info-tab" data-bs-toggle="tab" data-bs-target="#bank-info"
                                type="button" role="tab">Bank Info</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="document-info-tab" data-bs-toggle="tab"
                                data-bs-target="#document-info" type="button" role="tab">Document Info</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="educations-tab" data-bs-toggle="tab" data-bs-target="#educations"
                                type="button" role="tab">Previous School Details</button>
                        </li>
                        <li class="nav-item ms-auto">
                            <button type="submit" class="btn btn-primary"><i class="bi bi-check"></i> Update</button>
                        </li>
                    </ul>


                    <div class="tab-content mt-3" id="studentTabsContent">

                        <!-- Basic Info Tab -->
                        @include('dashboard.student.tabs.basic_info')

                        <!-- Parents & Guardian Info Tab -->
                        @include('dashboard.student.tabs.parents_guardian_info')

                        <!-- Bank Info Tab -->
                        @include('dashboard.student.tabs.bank_info')

                        <!-- Document Info Tab -->
                        @include('dashboard.student.tabs.document_info')

                        <!-- Educations Tab -->
                        @include('dashboard.student.tabs.educations')
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Include flatpickr for date formatting if needed -->
    {{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        // Initialize flatpickr if you allow editing date_of_birth
        flatpickr('#date_of_birth', {
            dateFormat: 'd/m/Y',
            altInput: true,
            altFormat: 'd/m/Y',
            defaultDate: '{{ $student->date_of_birth }}',
            allowInput: false // Read-only for now
        });
    </script> --}}
@endsection