@extends('layouts.master')

@section('content')
<style>
    .image-uploader {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative; /* Add position relative */
    }

    .image-uploader__label {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        position: relative; /* Add position relative */
    }

    .image-uploader__icon-overlay {
        position: absolute;
        top: 50%; /* Align vertically centered */
        left: 50%; /* Align horizontally centered */
        transform: translate(-50%, -50%); /* Center the icon */
        width: 100%;
        height: calc(100%); /* Height equal to parent minus icon height */
        background-color: rgba(0, 0, 0, 0.2); /* Transparent black background */
        border-radius: 50%; /* Rounded border */
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.4;
    }

    .image-uploader__icon-overlay i {
        color: #ffffff; /* Icon color */
        font-size: 24px; /* Icon size */
    }

    /* Your existing styles */
    .image-uploader__preview {
        overflow: hidden;
    }

    .image-uploader__input {
        display: none;
    }


</style>
<div class="card">
    <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
        <h5>Student Profile</h5><a class="btn btn-sm btn-primary" href="{{ route('student_info.index') }}">Student List</a>
    </div>
    <div class="card-body m-3">
        <form action="{{ route('student_info.update',$studentInfo->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('Put')
            <div class="row p-2 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                Personal Info
            </div>
            <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="first_name">First Name :</label>
                                <input type="text" class="form-control" name="first_name" id="first_name" value="{{$studentInfo->first_name}}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="last_name">Last Name:</label>
                                <input type="text" class="form-control" name="last_name" value="{{$studentInfo->last_name}}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="gender">Gender : </label>
                                {{ generateDropdown($genderOptions, 'class="form-control" name="gender"', $studentInfo->gender, 'Select Option') }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="blood_group">Blood Group : </label>
                                {{ generateDropdown($bloodGroupOptions, 'class="form-control" name="blood_group"', $studentInfo->blood_group, 'Select Option') }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="religion">Religion : </label>
                                {{ generateDropdown($religionOptions, 'class="form-control" name="religion" required', $studentInfo->religion, 'Select Option') }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="date_of_birth">Date Of Birth : </label>
                                <input type="date" class="form-control" name="date_of_birth" value="{{$studentInfo->date_of_birth}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="image-uploader">
                        <label for="first_name">Profile Image : </label>
                        <label for="imageFile" class="image-uploader__label">
                            <!-- Icon overlay with transparent background -->
                            <div class="image-uploader__icon-overlay">
                                <i class="fas fa-cloud-upload-alt"></i> <!-- Assuming you're using Font Awesome for icons -->
                            </div>
                            <!-- Preview image -->
                            @php
                                $student_image = $studentInfo->profile_image ? $studentInfo->profile_image : 'graduated_student.png';
                            @endphp
                            <img src="{{ asset("uploads/student/$student_image") }}" alt="Preview image" class="image-uploader__preview-image img-thumbnail rounded-circle p-1" style="width: 140px; height: 140px;">
                            <!-- File input -->
                            <input type="file" name="profile_image" class="image-uploader__input" id="imageFile" name="imageFile">
                        </label>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="birth_certi_no">Birth Certificate No : </label>
                        <input type="text" class="form-control" name="birth_certi_no" value="{{$studentInfo->birth_certi_no}}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mobile_no">Mobile Number : </label>
                        <input type="text" class="form-control" name="mobile_no" value="{{$studentInfo->mobile_no}}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="email">Email : </label>
                        <input type="text" class="form-control" name="email" value="{{$studentInfo->email}}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="present_address">Present Address : </label><br>
                        <textarea class="form-control" name="present_address">{{$studentInfo->present_address}}</textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="permanent_address">Permanent Address : </label><br>
                        <textarea class="form-control" name="permanent_address">{{$studentInfo->permanent_address}}</textarea>
                    </div>
                </div>
            </div>

            <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                Academic Info
            </div>
            <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="branch_id">Branch : </label>
                        {{ generateDropdown($branches, 'class="form-control branch_id" id="branch_id" name="branch_id"', $studentInfo->branch_id, 'Select Option') }}
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="shift_id">Shift : </label>
                        {{ generateDropdown($shifts, 'class="form-control shift_id" id="shift_id" name="shift_id"',$studentInfo->shift_id, 'Select Option') }}
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="student_class_id">Class : </label>
                        {{ generateDropdown($studentClasses, 'class="form-control select2 student_class" id="student_class" name="student_class_id" required', $studentInfo->student_class_id, 'Select Option') }}
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="section_id">Section : </label>
                        {{ generateDropdown([], 'class="form-control section_id" id="section_id" name="section_id"', $studentInfo->section_id, 'Select Option') }}

                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="group_id">Group : </label>
                        {{ generateDropdown($groups, 'class="form-control group_id" id="group_id" name="group_id"', $studentInfo->group_id, 'Select Option') }}
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="department">Department : </label>
                        {{ generateDropdown($departments, 'class="form-control department" id="department" name="department"', $studentInfo->department, 'Select Option') }}
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="admission_roll">Admission Roll : </label>
                        <input type="text" class="form-control" name="admission_roll" value="{{$studentInfo->admission_roll}}">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="class_roll">Class Roll : </label>
                        <input type="text" class="form-control" name="class_roll" value="{{$studentInfo->class_roll}}">
                    </div>
                </div>

            </div>

            <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                Hostel Info
            </div>
            <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="hostel">Hostel : </label>
                        {{ generateDropdown($hostels, 'class="form-control hostel" id="hostel" name="hostel"', $studentInfo?->studentHostel?->hostel_id,'Select Option') }}
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="hostel">Floor : </label>
                        {{ generateDropdown([], 'class="form-control select2 hostel_floor_id" id="hostel_floor_id" name="hostel_floor_id"', $studentInfo?->studentHostel?->hostel_floor_id, 'Select Option') }}
                    </div>
                </div>

                <div class="col-md-5">
                    <div class="form-group">
                        <label for="hostel">Room : </label>
                        {{ generateDropdown([], 'class="form-control select2 room_number" id="room_number" name="room_number"', old('room_number'), 'Select Option') }}
                    </div>
                </div>
            </div>

            <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                Transport Info
            </div>
            <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="code">Routes</label>
                        {{ generateDropdown($transport_routes, 'class="form-control select2 route_id" id="route_id" name="route_id"', $studentInfo?->studentTransport?->route_id, "Select Route") }}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="code">Stoppage</label>
                        {{ generateDropdown([], 'class="form-control select2 stoppage_id" id="stoppage_id" name="stoppage_id"', '', "Select Stopage") }}
                    </div>
                </div>
            </div>

            <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                Parent Info
            </div>
            <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="father_name">Father Name : </label>
                        <input type="text" class="form-control" name="father_name" value="{{$studentInfo->father_name}}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="father_occupation">Father Occupation : </label>
                        {{ generateDropdown($occupations, 'class="form-control select2 father_occupation" id="father_occupation" name="father_occupation" required', $studentInfo->father_occupation, 'Select Option') }}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="father_mobile">Father Mobile No : </label>
                        <input type="tel" class="form-control" name="father_mobile" value="{{$studentInfo->father_mobile}}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mother_name">Mother Name : </label>
                        <input type="text" class="form-control" name="mother_name" value="{{$studentInfo->mother_name}}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mother_occupation">Mother Occupation : </label>
                        {{ generateDropdown($occupations, 'class="form-control select2 mother_occupation" id="mother_occupation" name="mother_occupation" required', $studentInfo->mother_occupation, 'Select Option') }}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mother_mobile">Mother Mobile : </label>
                        <input type="tel" class="form-control" name="mother_mobile" value="{{$studentInfo->mother_mobile}}">
                    </div>
                </div>
            </div>

            <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                Gurdian Info
            </div>

            <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="guardian_name">Gurdian Name : </label>
                        <input type="text" class="form-control" name="guardian_name" value="{{$studentInfo->guardian_name}}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="guardian_occupation">Gurdian Occupation : </label>
                        {{ generateDropdown($occupations, 'class="form-control select2 guardian_occupation" id="guardian_occupation" name="guardian_occupation" required', $studentInfo->guardian_occupation, 'Select Option') }}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="guardian_mobile">Gurdian Mobile : </label>
                        <input type="tel" class="form-control" name="guardian_mobile" value="{{$studentInfo->guardian_mobile}}">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="guardian_relationship">Relation with Guardian : </label>
                        {{ generateDropdown($guardian_relations, 'class="form-control select2" name="guardian_relationship"', $studentInfo->guardian_relationship, 'Select Option') }}
                    </div>
                </div>
                <div class="col-md-8">

                    <label for="guardian_address">Relation Address : </label>
                    <input type="text" class="form-control" name="guardian_address" value="{{$studentInfo->guardian_address}}">
                </div>
            </div>
            <div class="row mt-3 flex justify-content-end">
                <button class="btn btn-primary">Update</button>
            </div>
        </form>
    </div>
</div>
<script>
    const input = document.querySelector('.image-uploader__input');
    const previewImage = document.querySelector('.image-uploader__preview-image');

    input.addEventListener('change', () => {
        const file = input.files[0];
        const reader = new FileReader();

        reader.onload = (event) => {
            previewImage.src = event.target.result;
        };

        reader.readAsDataURL(file);
    });
</script>
@endsection

@section('scripts')
    <script>
        $('.student_class').on('change', function(){
            let student_class_id =  $(this).val();
            getSection(student_class_id)
        });

        let selected_class_id = "{{ $studentInfo->student_class_id }}";
        let selected_section_id = "{{ $studentInfo->section_id }}";

        if(selected_class_id){
            getSection(selected_class_id)
        }
        function getSection(student_class_id){
            if(student_class_id){
                $.get('{{ route('sections.list_by_class') }}', { student_class_id: student_class_id }, function(response) {
                    let sections = response;

                    let option = '<option value="">--Select Section--</option>';
                    for(let i=0;i<sections.length;i++){

                        if(selected_section_id==sections[i].id){
                            option += '<option value='+sections[i].id+' selected>'+sections[i].section_name+'</option>';
                        }else{
                            option += '<option value='+sections[i].id+' >'+sections[i].section_name+'</option>';
                        }
                    }
                    $('select.section_id').empty().append(option);
                });
            }
        }

        $('.route_id').on('change', function(){
            let route_id = $(this).val();
            let stoppage_id = '';
            getStoppage(route_id, stoppage_id);
        });

        let selected_route_id = "{{$studentInfo->studentTransport->route_id ?? ""}}";
        let selected_stoppage_id = "{{$studentInfo->studentTransport->stoppage_id ?? ""}}";

        if(selected_route_id && selected_stoppage_id){
            getStoppage(selected_route_id, selected_stoppage_id)
        }

        function getStoppage(route_id, stoppage_id){

            if(route_id){
                $.get('{{ route('stoppage-list-by-route') }}', { route_id: route_id }, function(response) {
                    let stoppages = response;

                    let option = '<option value="">--Select Stopages--</option>';
                    for(let i=0;i<stoppages.length;i++){

                        if(stoppage_id==stoppages[i].id){
                            option += '<option value='+stoppages[i].id+' selected>'+stoppages[i].name+ ' -> ( Tk. '+stoppages[i].monthly_cost+')</option>';
                        }else{
                            option += '<option value='+stoppages[i].id+' >'+stoppages[i].name+ ' -> ( Tk. '+stoppages[i].monthly_cost+')</option>';
                        }

                    }
                    $('select.stoppage_id').empty().append(option);
                });
            }
        }

        let selected_hostel_id = "{{$studentInfo->studentHostel->hostel_id ?? ""}}";
        let selected_hostel_floor_id = "{{$studentInfo->studentHostel->hostel_floor_id ?? ""}}";
        let selected_hostel_room_id = "{{$studentInfo->studentHostel->hostel_room_id ?? ""}}";

        $('.hostel').on('change', function(){
            let hostel_id =  $(this).val();
            getHostelFloor(hostel_id)
        });

        if(selected_hostel_id){
            getHostelFloor(selected_hostel_id)
        }
        function getHostelFloor(hostel_id){
            if(hostel_id){
                $.get('{{ route('hostel.floors') }}', { hostel_id: hostel_id }, function(response) {
                    let hostel_floors = response;

                    let option = '<option value="">--Select Section--</option>';
                    for(let i=0;i<hostel_floors.length;i++){
                        if(selected_hostel_floor_id==hostel_floors[i].id){
                            option += '<option value='+hostel_floors[i].id+' selected>' +hostel_floors[i].name+ '</option>';
                        }else{
                            option += '<option value='+hostel_floors[i].id+' >' +hostel_floors[i].name+ '</option>';
                        }
                    }
                    $('#hostel_floor_id').empty().append(option);

                });

            }
        }

        $('#hostel_floor_id').on('change', function(){
            let hostel_floor_id =  $(this).val();
            getHostelRoom(hostel_floor_id)
        });

        if(selected_hostel_floor_id){
            getHostelRoom(selected_hostel_floor_id)
        }

        function getHostelRoom(hostel_floor_id){
            if(hostel_floor_id){
                $.get('{{ route('hostel-room-by-floor') }}', { hostel_floor_id: hostel_floor_id }, function(response) {
                    let hostel_rooms = response;

                    let option = '<option value="">--Select Section--</option>';
                    for(let i=0;i<hostel_rooms.length;i++){

                        const disabled = hostel_rooms[i].empty_beds === 0 ? 'disabled' : '';
                        const selected = selected_hostel_room_id == hostel_rooms[i].id ? 'selected' : '';
                        option += `<option value="${hostel_rooms[i].id}" ${selected} ${disabled}>
                                        ${hostel_rooms[i].room_name} => ${hostel_rooms[i].room_type.name}
                                        => (Tk.${Math.floor(hostel_rooms[i].room_type.cost_per_bed)})
                                        => ${hostel_rooms[i].no_of_bed}/${hostel_rooms[i].empty_beds}
                                    </option>`;
                    }

                    $('#room_number').empty().append(option);

                });
            }
        }
    </script>
@endsection