@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>
            Edit 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"
                                value="Arun Kumar"
                                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"
                                value="ADM001"
                                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"
                                value="2010-06-15">

                        </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="">Select Gender</option>

                                <option selected>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="">Select Blood Group</option>

                                <option selected>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"
                                value="Indian">

                        </div>

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

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

                            <input type="tel"
                                class="form-control"
                                value="+91 98765 12345"
                                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"
                                value="arun@example.com"
                                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 address">25, Main Road, Nagercoil, Tamil Nadu - 629001</textarea>

                        </div>

                    </div>

                </div>

            </div>


        </div>


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

            <!-- 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">

                    <img id="studentPhoto"
                        src="https://i.pravatar.cc/150?img=12"
                        width="140"
                        height="140"
                        class="rounded-circle mb-3"
                        style="object-fit: cover;"
                        alt="Student">

                    <div>

                        <input type="file"
                            id="photoInput"
                            accept="image/*"
                            style="display: none;">

                        <button type="button"
                            class="btn btn-light border btn-sm"
                            id="changePhoto">

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

                        </button>

                    </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"
                        value="Kumar Raj"
                        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"
                        value="Priya Kumar"
                        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"
                        value="+91 98765 43210"
                        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"
                        value="parent@example.com"
                        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"
                        value="Kumar Raj"
                        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>
            Update Student
        </button>

    </div>

</form>


<script>
    document.addEventListener('DOMContentLoaded', function() {

        const changePhoto = document.getElementById('changePhoto');
        const photoInput = document.getElementById('photoInput');
        const studentPhoto = document.getElementById('studentPhoto');


        changePhoto.addEventListener('click', function() {

            photoInput.click();

        });


        photoInput.addEventListener('change', function(event) {

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

            if (file) {

                const reader = new FileReader();

                reader.onload = function(e) {

                    studentPhoto.src = e.target.result;

                };

                reader.readAsDataURL(file);

            }

        });

    });
</script>




@endsection