@extends('layout.layout')

@section('content')
    <section class="my-4">
        <div class="container-fluid">
            <div class="row justify-content-between align-items-center">
                <div class="col">
                    <h4>Add New Student</h4>
                </div>

            </div>
        </div>
    </section>

    <section>
        <form class="form" action="{{ route('students.store') }}" method="POST" enctype="multipart/form-data"
            accept-charset="UTF-8">
            @csrf
            @method('POST')
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <h3 class="card-title">Student Information</h3>
                            </div>
                        </div>

                        <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> Save
                                    Student</button>
                            </li>
                        </ul>

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

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

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

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

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

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

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />


<style>
    /* Basic Select2 styling to match Bootstrap 5 */

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

    span {
        display: block !important;
    }
</style>
<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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>