@extends('Admin.layout')

@section('content')


<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.student_management')  }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Add Student
        </h5>
    </div>
</div>

<form action="{{route('admin.student_management')}}">

    <div class="row">

        <!-- Left Side -->
        <div class="col-lg-8">

            <!-- Personal Information -->
            <div class="card mb-4">

                <div class="card-header">
                    <h5 class="mb-0">Personal Information</h5>
                </div>

                <div class="card-body">

                    <div class="row">

                        <div class="col-md-6 mb-3">

                            <label class="form-label">
                                Student Name <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                class="form-control"
                                placeholder="Enter student name">

                        </div>


                        <div class="col-md-6 mb-3">

                            <label class="form-label">
                                Admission Number <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                class="form-control"
                                placeholder="Enter admission number">

                        </div>


                        <div class="col-md-6 mb-3">

                            <label class="form-label">
                                Date of Birth <span class="text-danger">*</span>
                            </label>

                            <input type="date"
                                class="form-control">

                        </div>


                        <div class="col-md-6 mb-3">

                            <label class="form-label">
                                Gender <span class="text-danger">*</span>
                            </label>

                            <select class="form-select">

                                <option value="" selected>Select Gender</option>

                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>

                            </select>

                        </div>


                        <div class="col-md-6 mb-3">

                            <label class="form-label">
                                Blood Group
                            </label>

                            <select class="form-select">

                                <option value="" selected>Select Blood Group</option>

                                <option>B+</option>
                                <option>A+</option>
                                <option>A-</option>
                                <option>B-</option>
                                <option>AB+</option>
                                <option>AB-</option>
                                <option>O+</option>
                                <option>O-</option>

                            </select>

                        </div>


                        <div class="col-md-6 mb-3">

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

                            <input type="text"
                                class="form-control"
                                placeholder="Enter phone nationality">

                        </div>

                        <div class="col-md-6 mb-3">

                            <label class="form-label">
                                Student Phone
                            </label>

                            <input type="tel"
                                class="form-control"
                                placeholder="Enter phone number">

                        </div>


                        <div class="col-md-6 mb-3">

                            <label class="form-label">
                                Student Email
                            </label>

                            <input type="email"
                                class="form-control"
                                placeholder="Enter email address">

                        </div>


                        <div class="col-md-12 mb-3">

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

                            <textarea class="form-control"
                                rows="2"
                                placeholder="Enter your address"></textarea>

                        </div>

                    </div>

                </div>

            </div>


        </div>


        <!-- Right Side -->
        <div class="col-lg-4">

            <!-- Student Photo -->
            <!-- Student Photo -->
            <div class="card mb-4">

                <div class="card-header">
                    <h5 class="mb-0">Student Photo</h5>
                </div>

                <div class="card-body text-center">

                    <!-- Photo Preview -->
                    <div class="mb-3">
                        <img src="{{ asset('assets/img/user.png') }}"
                            id="studentPhotoPreview"
                            width="140"
                            height="140"
                            class="rounded-circle"
                            style="object-fit: cover;"
                            alt="Student Photo">
                    </div>

                    <!-- Hidden File Input -->
                    <input type="file"
                        name="student_photo"
                        id="studentPhoto"
                        class="d-none"
                        accept="image/jpeg,image/png,image/jpg">

                    <!-- Upload Button -->
                    <button type="button"
                        class="btn btn-light border btn-sm"
                        onclick="document.getElementById('studentPhoto').click()">

                        <i class="ti tabler-camera me-1"></i>
                        Upload Photo

                    </button>

                    <!-- File Name -->
                    <div id="photoName"
                        class="text-muted small mt-2">
                    </div>

                </div>

            </div>


            <!-- Account Status -->
            <div class="card mb-4">

                <div class="card-header">
                    <h5 class="mb-0">Account Status</h5>
                </div>

                <div class="card-body">

                    <label class="form-label">
                        Student Status
                    </label>

                    <select class="form-select">

                        <option selected>Active</option>
                        <option>Inactive</option>

                    </select>

                </div>

            </div>


        </div>

    </div>

    <!-- Parent Information -->
    <div class="card mb-4">

        <div class="card-header">
            <h5 class="mb-0">Parent / Guardian Information</h5>
        </div>

        <div class="card-body">

            <div class="row">

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Father's Name
                    </label>

                    <input type="text"
                        class="form-control"
                        placeholder="Enter father's name">

                </div>


                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Mother's Name
                    </label>

                    <input type="text"
                        class="form-control"
                        placeholder="Enter mother's name">

                </div>


                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Parent Phone <span class="text-danger">*</span>
                    </label>

                    <input type="tel"
                        class="form-control"
                        placeholder="Enter parent phone">

                </div>


                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Parent Email
                    </label>

                    <input type="email"
                        class="form-control"
                        placeholder="Enter parent email">

                </div>


                <div class="col-md-12 mb-3">

                    <label class="form-label">
                        Guardian Name
                    </label>

                    <input type="text"
                        class="form-control"
                        placeholder="Enter guardian name">

                </div>

            </div>

        </div>

    </div>


    <!-- Bottom Buttons -->
    <div class="d-flex justify-content-center align-items-center gap-2 mt-2">

        <a href="#" class="btn btn-light border">
            Cancel
        </a>

        <button type="submit" class="btn btn-primary">
            <i class="ti tabler-device-floppy me-1"></i>
            Save
        </button>

    </div>

</form>


<script>
    document.getElementById('studentPhoto').addEventListener('change', function (event) {

        const file = event.target.files[0];

        if (!file) {
            return;
        }

        // Show file name
        document.getElementById('photoName').textContent = file.name;

        // Preview image
        const reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('studentPhotoPreview').src = e.target.result;
        };

        reader.readAsDataURL(file);

    });
</script>

@endsection