@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Edit Student</title>

@section('main-content')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('assets/css/pop_up_with_image.css') }}" />
    
    <style>
        .input {
            color: #697a8d
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #loader img {
            width: 30px;
        }


        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }

        .custom-pointer {
            cursor: pointer;
        }

        .select2-selection {
            border-color: #dae0e7 !important;
        }

        /* Styles for the Select2 dropdown when focused or hovered */
        .select2-container--focus .select2-selection,
        .select2-selection:hover {
            border-color: #696cff !important;
        }

        /* Styles for the Select2 dropdown when active (clicked) */
        .select2-container--open .select2-selection {
            border-color: #696cff !important;
        }

        .select2-selection--single .select2-selection__rendered {
            color: #697a8d !important;
        }

        .custom_select12 .select2-container .selection .select2-selection {
            height: 38px;
        }

        .custom_select12 .select2-container .selection .select2-selection .select2-selection__rendered {
            height: 100%;
            line-height: 2.3;
        }

        .custom_select12 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100%;
        }
    </style>

    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>


    <div class="col-md-6 alert alert-danger print-error-msg" style="display:none">
        <ul></ul>
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Edit Student</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-4">

                        <div class="card-header" style="margin-bottom: -15px !important;">
                            <h5 class="mb-3">Parent Details</h5>
                            <div class="parent_info">
                                <div class="row">
                                    <div class="mb-3 col-12 col-md-4">
                                        <label class="form-label" for="basic-icon-default-name">Name</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bx bx-user"></i></span>
                                            <input class="form-control input form-control-line"
                                                value="{{ isset($primary_parent_info->first_name, $primary_parent_info->last_name) ? $primary_parent_info->first_name . ' ' . $primary_parent_info->last_name : 'N/A' }}"
                                                readonly autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="mb-3 col-12 col-md-4">
                                        <label class="form-label" for="basic-icon-default-email">Email</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bx bx-envelope"></i></span>
                                            <input class="form-control input form-control-line"
                                                value="{{ isset($primary_parent_info->email) ? $primary_parent_info->email : 'N/A' }}"
                                                readonly autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="mb-3 col-12 col-md-4">
                                        <label class="form-label" for="basic-icon-default-phone">Phone No</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-phone2" class="input-group-text"><i
                                                    class="bx bx-phone"></i></span>
                                            <input class="form-control input form-control-line"
                                                value="{{ isset($primary_parent_info->phone) ? $primary_parent_info->phone : 'N/A' }}"
                                                readonly autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <h5>Student Details</h5>
                            <input type="hidden" name="user_id" id="user_id" value="{{ $user[0]['id'] }}">
                            <div class="row">
                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label" for="basic-icon-default-fullname">First Name</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-firstname2" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <input type="text" name="fname" id="fname"
                                            value="{{ $user[0]['first_name'] }}"
                                            class="form-control input form-control-line" minlength="3" maxlength="30"
                                            onkeydown="return /[a-zA-Z\s]/i.test(event.key)" autocomplete="off">
                                    </div>
                                </div>

                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label" for="basic-icon-default-fullname">Last Name</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-lastname2" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <input type="text" name="lname" id="lname"
                                            value="{{ $user[0]['last_name'] }}" class="form-control input form-control-line"
                                            minlength="3" maxlength="30" onkeydown="return /[a-zA-Z\s]/i.test(event.key)"
                                            autocomplete="off">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label" for="basic-icon-default-fullname">Gender</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-dob" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <select class="form-select gender custom-pointer" id="gender">
                                            <option class="custom-pointer" value="male"
                                                {{ isset($user[0]['gender']) && strtolower($user[0]['gender']) == 'male' ? 'selected' : '' }}>
                                                Male</option>
                                            <option class="custom-pointer" value="female"
                                                {{ isset($user[0]['gender']) && strtolower($user[0]['gender']) == 'female' ? 'selected' : '' }}>
                                                Female</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label" for="basic-icon-default-fullname">Date of Birth</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-dob" class="input-group-text"><i
                                                class="bx bxs-calendar-event"></i></span>
                                        <input type="text" name="dob" id="dob"
                                            class="form-control input form-control-line bg-white"
                                            value="{{ dateformatter($user[0]['dob']) }}" readonly autocomplete="off">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label">Class</label>
                                    <div class="input-group">
                                        <select name="class_name" id="class_name"
                                            class="form-select input form-control-line"
                                            {{ $fee_check ? 'disabled' : '' }}>
                                            @if (isset($class_list) && count($class_list) > 0)
                                                <option value=""
                                                    {{ $addInfo->student_class == null || $addInfo->student_class == '' ? 'selected' : '' }}
                                                    disabled>Select Class</option>
                                                @foreach ($class_list as $key => $value)
                                                    <option value="{{ $value }}"
                                                        {{ $addInfo->student_class == $value ? 'selected' : '' }}>
                                                        {{ $value }}</option>
                                                @endforeach
                                            @else
                                                <option value="" selected disabled>No Class Found.</option>
                                            @endif

                                        </select>
                                        @if ($fee_check)
                                            <span>Some fee amount has been paid by the student. Not allowed to change
                                                class.</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label">Teacher</label>
                                    <div class="input-group custom_select12">
                                        @php
                                            $teacherNames_data = [];
                                        @endphp
                                        @foreach ($classes as $key => $value)
                                            @php
                                                // Check if teacher_ids is an array
                                                if (is_array($value->teacher_ids)) {
                                                    // Handle multiple teacher IDs
                                                    foreach ($value->teacher_ids as $teacherId) {
                                                        if (isset($teacher_arr[$teacherId])) {
                                                            $teacherNames_data[] = $teacher_arr[$teacherId];
                                                        }
                                                    }
                                                } else {
                                                    // Handle single teacher ID
                                                    $teacherNames_data[] = $teacher_arr[$value->teacher_ids] ?? null;
                                                }
                                            @endphp
                                        @endforeach
                                        @php
                                            // Filter out null values before imploding
                                            $teacherNames_data = array_filter($teacherNames_data);
                                            $teacherNames = !empty($teacherNames_data)
                                                ? implode(', ', $teacherNames_data)
                                                : 'N.A.';
                                        @endphp
                                        <input type="text" name="teacher_name[]" id="teacher_name"
                                            class="form-control input form-control-line" value="{{ $teacherNames }}"
                                            placeholder="Teacher Name" readonly autocomplete="off" disabled>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label" for="basic-icon-default-fullname">Address</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-dob" class="input-group-text"><i
                                                class='bx bxs-map-pin'></i></span>
                                        <input type="text" class="form-control input form-control-line bg-white"
                                            id="address" placeholder="Enter Address" value="{{ $addInfo->address }}"
                                            autocomplete="off" maxlength="100">
                                    </div>
                                </div>

                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label" for="basic-icon-default-email">Emergency Contact
                                        Number</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-phone2" class="input-group-text"><i
                                                class="bx bx-phone"></i></span>
                                        <input type="text" name="emergency_contact" id="emergency_contact"
                                            value="{{ isset($user[0]['emergency_contact']) ? $user[0]['emergency_contact'] : '' }}"
                                            onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                            class="form-control input form-control-line" minlength="10" maxlength="10"
                                            pattern="[0-9]{1}[0-9]{9}" title="Please Enter Valid 10 digits Phone Number"
                                            autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-12 col-md-6">
                                    <label class="form-label" for="basic-icon-default-fullname">Student Image</label>