@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.3;
    }

    .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>Create 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.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <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="{{old('first_name')}}" placeholder="Enter First Name" required>
                            </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="{{old('last_name')}}" placeholder="Enter Last name" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="gender">Gender *: </label>
                                {{ generateDropdown($genderOptions, 'class="form-control" name="gender" required', old('gender'), 'Select Gender') }}
                            </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"', old('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', 'Islam') }}
                            </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="{{old('date_of_birth')}}" required>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="image-uploader">
                        <label for="image">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>
                            </div>
                            <!-- Preview image -->
                            <img src="{{ asset('assets/img/boy.png') }}" 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" accept="image/*">
                        </label>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="birth_certi_no">Birth Certificate No : </label>
                        <input type="number" class="form-control" name="birth_certi_no" value="{{old('birth_certi_no')}}" placeholder="Enter Birth Certificate No">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mobile_no">Mobile Number : </label>
                        <input type="tel" class="form-control" name="mobile_no" value="{{old('mobile_no')}}" placeholder="Enter Mobile Number">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="email">Email : </label>
                        <input type="email" class="form-control" name="email" value="{{old('email')}}" placeholder="Enter Email">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="present_address">Present Address * : </label><br>
                        <textarea type="text" class="form-control" name="present_address" value="{{old('present_address')}}" placeholder="Enter Present Address"></textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="permanent_address">Permanent Address * : </label><br>
                        <textarea type="text" class="form-control" name="permanent_address" value="{{old('permanent_address')}}" placeholder="Enter 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" required', old('branch_id') ?? $defaultBranch) }}
                    </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" required', old('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', old('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"', old('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"', old('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"', old('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="{{old('admission_roll')}}" placeholder="Enter Admission Roll">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="class_roll">Class Roll *: </label>
                        <input type="number" class="form-control" name="class_roll" value="{{old('class_roll')}}" placeholder="Enter 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"', old('hostel'), '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"', old('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"', '', "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="{{old('father_name')}}" placeholder="Enter Father Name" required>
                    </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', old('father_occupation'), 'Select Option') }}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="father_mobile">Father Mobile : </label>
                        <input type="tel" class="form-control" name="father_mobile" value="{{old('father_mobile')}}" placeholder="Enter 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="{{old('mother_name')}}" placeholder="Enter Mother Name" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mother_occupation">Mother Occupation *: </label>
                        {{ generateDropdown($occupations, 'class="form-control select2" name="mother_occupation" required', old('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="{{old('mother_mobile')}}" placeholder="Enter 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="{{old('guardian_name')}}" placeholder="Enter Gurdian 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" name="guardian_occupation" required', old('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="{{old('guardian_mobile')}}" placeholder="Enter Gurdian 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"', old('guardian_relationship'), 'Select Option') }}
                    </div>
                </div>
                <div class="col-md-8">

                    <label for="guardian_address">Guardian Address *: </label>
                    <input type="text" class="form-control" name="guardian_address" value="{{old('guardian_address')}}" placeholder="Enter Guardian Address">
                </div>
            </div>
            <div class="row mt-3 flex justify-content-end">
                <button class="btn btn-primary">Save</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 _this = $(this);
            let student_class_id =  _this.val();
            if(student_class_id){
                $.get('{{ route('sections.list_by_class') }}', { student_class_id: student_class_id }, function(response) {
                    let sections = response;
                    console.log(sections);
                    let option = '<option value="">--Select Section--</option>';
                    for(let i=0;i<sections.length;i++){

                        if(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);
        });

        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);
                });
            }
        }

        $('.hostel').on('change', function(){
            let hostel_id =  $(this).val();
            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++){

                        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();
            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' : '';
                        option += `<option value="${hostel_rooms[i].id}" ${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