@extends('layouts.app')
@section('styles')

<link href="{{ asset('plugins/bootstrap-editable/css/bootstrap-editable.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{ asset('css/custom-student-style.css') }}">

<style>
    .custom-file-label{
        border: solid 1px #1a56db;
    }

    #studentFile{
        opacity: 0;
        position: absolute;
        z-index: -1;
        max-width: 200px;
    }

    #editStudentForm .error{
        color: #ff0026;
    }

    textarea {
        resize: none;
    }
</style>

@endsection


@section('content')
<div style="padding-top: 53px;">
    <!-- Modal content -->
    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <!-- Modal header -->
        <div class="flex justify-center items-start p-4 rounded-t border-b dark:border-gray-600">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                {{ __('student.show') ." ". __('student.data') ." ال". __('student.student') }}
            </h3>
        </div>
        <!-- Modal body -->
        <form action="{{ route('student.update', $student->id) }}" method="post" enctype="multipart/form-data" id="editStudentForm">
            @csrf
            @method('put')
            <div class="p-6 space-y-6">
                <div id="accordion-collapse" data-accordion="collapse">
                    <h2 id="accordion-collapse-heading-1">
                        <button type="button" class="flex items-center w-full p-2 text-xl text-left border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
                            <svg data-accordion-icon="" class="w-6 h-6 rotate-180 shrink-0"
                                fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="px-4">
                                {{ __('student.important-data') }}
                            </span>
                        </button>
                    </h2>
                    <div id="accordion-collapse-body-1" class="" aria-labelledby="accordion-collapse-heading-1">
                        <div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
                            <div class="row py-2">
                                <div class="col-12 flex justify-center text-center">
                                    <img id="fileImage" src="{{ asset('files/students/' . $student->image) }}" alt="" style="width: 200px; height: 200px;">
                                    <input type="hidden" name="oldImage" value="{{ $student->image }}">
                                </div>
                            </div>

                            <div class="row py-2">
                                <div class="col-2 pt-2">{{ __('student.serial_number') }}</div>
                                <div class="col-4">
                                    <input type="text" name="student_serial_number" id="studentSerialNumber" placeholder="{{ __('student.id') }}"
                                    value="000000" readonly
                                    placeholder="{{ __('student.serial-number') }}" readonly>
                                </div>
                            </div>


                            <div class="row py-2">
                                <div class="col-2 pt-2">{{ __('student.id') }}</div>
                                <div class="col-4">
                                    <input type="text" name="student_id" id="studentId" value="{{ $student->student_id ? $student->student_id : '' }}"
                                    placeholder="{{ __('student.id') }}" readonly>
                                </div>

                                <div class="col-2 pt-2">{{ __('student.program-fees') }}</div>
                                <div class="col-4">
                                    <input type="text" name="program_fees" id="programFees"
                                        placeholder="{{ __('student.program-fees') }}" value="{{ $student->program_fees ? $student->program_fees : 0 }}" required>
                                </div>
                            </div>

                            <div class="row py-2">
                                <div class="col-2 pt-2">{{ __('student.name') }}</div>
                                <div class="col-4">
                                    <input type="text" name="student_name" id="studentName" value="{{ $student->student_name ? $student->student_name : '' }}"
                                    placeholder="{{ __('student.name') }}" required>
                                </div>

                                <div class="col-2 pt-2">{{ __('student.registration-fees') }}</div>
                                <div class="col-4">
                                    <input type="text" name="registration_fees" id="registrationFees" value="{{ $student->registration_fees ? $student->registration_fees : 0 }}"
                                    placeholder="{{ __('student.registration-fees') }}" required>
                                </div>
                            </div>

                            <div class="row py-2">
                                <div class="col-2 pt-2">النوع</div>
                                    <div class="col-4">
                                        <div class="flex m-2">
                                            <div class="flex items-center">
                                                <input id="gender-1" type="radio" value="1" name="gender" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                                {{ $student->gender == 1 ? 'checked' : ''}}>
                                                <label for="gender-1" class="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">ذكر</label>
                                            </div>
                                            <div class="flex items-center">
                                                <input id="gender-2" type="radio" value="2" name="gender" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                                {{ $student->gender == 2 ? 'checked' : ''}}>
                                                <label for="gender-2" class="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">أنثى</label>
                                            </div>
                                        </div>
                                    </div>

                                <div class="col-2 pt-2">{{ __('student.insurance-fees') }}</div>
                                <div class="col-4">
                                    <input type="text" name="insurance_fees" id="insuranceFees" value="{{ $student->insurance_fees ? $student->insurance_fees : 0 }}"
                                    placeholder="{{ __('student.insurance-fees') }}" required>
                                </div>
                            </div>

                            <div class="row my-2">
                                <div class="col-2 pt-2">{{ __('student.college') }}</div>
                                <div class="col-4">
                                    <select name="college_id" id="collegeId">
                                        <option value="0">{{ __('student.choose-college') }}</option>
                                        @if ($colleges)
                                        @foreach ($colleges as $college)
                                        <option value="{{ $college->id }}" {{ $college->id == $student->college_id ? 'selected' : '' }}>
                                            {{ $college->name }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2">{{ __('student.section') }}</div>
                                <div class="col-4">
                                    <select name="section_id" id="sectionId">
                                        @if ($sections)
                                        @foreach ($sections as $section)
                                        <option value="{{ $section->id }}" {{ $section->id == $student->section_id ? 'selected' : '' }}>
                                            {{ $section->name }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value=""></option>
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="row my-2">
                                <div class="col-2 pt-2">{{ __('student.program') }}</div>
                                <div class="col-4">
                                    <select name="program_id" id="programId">
                                        @if ($programs)
                                        @foreach ($programs as $program)
                                        <option value="{{ $program->id }}" {{ $program->id == $student->program_id ? 'selected' : '' }}>
                                            {{ $program->name }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2">{{ __('student.batch') }}</div>
                                <div class="col-4">
                                    <select name="batch_id" id="batchId">
                                        @if ($batches)
                                        @foreach ($batches as $batch)
                                        <option value="{{ $batch->id }}" {{ $batch->id == $student->batch_id ? 'selected' : '' }}>
                                            {{ $batch->value }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value=""></option>
                                        @endif
                                    </select>
                                </div>
                            </div>

                            {{-- <div class="row py-2">
                                <div class="col-2 pt-2">{{ __('student.program') }}</div>
                                <div class="col-4">
                                    <select name="program_id" id="programId">
                                        @if ($programs)
                                        @foreach ($programs as $program)
                                            <option value="{{ $program->id }}" {{ $program->id == $student->program_id ? 'selected' : '' }}>
                                                {{ __('student.'. $program->name .'') }}
                                            </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2">{{ __('student.section') }}</div>
                                <div class="col-4">
                                    <select name="section_id" id="sectionId">
                                        @if ($sections)
                                        @foreach ($sections as $section)
                                        <option value="{{ $section->id }}" {{ $section->id == $student->section_id ? 'selected' : '' }}>
                                            {{ __('student.'. $section->name .'') }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value=""></option>
                                        @endif
                                    </select>
                                </div>
                            </div> --}}

                            <div class="row py-2">
                                <div class="col-2 pt-2">{{ __('student.national-id') }}</div>
                                <div class="col-4">
                                    <input type="text" name="national_id" id="nationalId" value="{{ $student->national_id ? $student->national_id : '' }}"
                                    placeholder="{{ __('student.national-id') }}" required>
                                </div>

                                <div class="col-2 pt-2">{{ __('student.date-of-birth') }}</div>
                                <div class="col-4">
                                    <input type="date" name="date_of_birth" id="dateOfBirth" value="{{ $student->date_of_birth ? $student->date_of_birth : '' }}"
                                        placeholder="{{ __('student.date-of-birth') }}">
                                </div>
                            </div>

                            <div class="row pt-2">
                                <div class="col-2 pt-2">سنة القبول</div>
                                <div class="col-4">
                                    <select name="academic_year_id" id="admissionId">
                                        <option value="0">إختار سنة القبول</option>
                                        @if ( isset($years) )
                                            @foreach ($years as $year)
                                            @if ($student->academicYear_id == 'not-set')
                                            @else
                                                <option value="{{ $year->id }}" {{ $student->academicYear_id == $year->id ? 'selected' : '' }}>{{ $year->start .' - '. $year->end}}</option>
                                            @endif
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2">الفصل الدراسي</div>
                                <div class="col-4">
                                    <select name="semester_id" id="admissionId">
                                        <option value="0">إختار الفصل الدراسي </option>
                                        @if ( isset($semesters) )
                                            @foreach ($semesters as $semester)
                                            @if ($student->semester_id == 'not-set')
                                            @else
                                                <option value="{{ $semester->id }}" {{ $student->semester_id == $semester->id ? 'selected' : '' }}>{{ $semester->name }}</option>
                                            @endif
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="row py-2">
                                <div class="col-2 pt-2">الولاية</div>
                                <div class="col-4">
                                    <select name="state_id" id="stateId">
                                        @if ($states)
                                        @foreach ($states as $state)
                                        <option value="{{ $state->id }}" {{ $state->id == $student->state_id ? 'selected' : '' }}>
                                            {{ $state->name }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2">المحلية</div>
                                <div class="col-4">
                                    <select name="locality_id" id="localityId">
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-2 pt-2">{{ __('student.admission-type')}}</div>
                                <div class="col-4">
                                    <select name="admission_id" id="admissionId">
                                        @if ($admissions)
                                        @foreach ($admissions as $admission)
                                        <option value="{{ $admission->id }}" {{ $admission->id == $student->admission_id ? 'selected' : '' }}>
                                            {{ $admission->name }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2">نوع السكن</div>
                                <div class="col-4">
                                    <select name="accommodation_type" id="primaryCertificateYear">
                                        <option value="0" disabled selected>
                                            إختار نوع السكن
                                        </option>
                                        <option value="1" {{ $student->accommodation_type == 1 ? 'selected' : '' }}>داخلي</option>
                                        <option value="2" {{ $student->accommodation_type == 2 ? 'selected' : '' }}>خارجي</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row my-2">
                                <div class="col-2 pt-2">{{ __('student.phone-number') }}</div>
                                <div class="col-4">
                                    <input type="text" name="phone_number" id="phoneNumber" value="{{ $student->phone_number ? $student->phone_number : '' }}"
                                        placeholder="{{ __('student.phone-number') }}">
                                </div>

                                <div class="col-2 pt-2">عنوان ولي الامر</div>
                                <div class="col-4">
                                    <input type="text" name="guardian_address" id="guardianAddress" value="{{ $student->guardian_address ? $student->guardian_address : '' }}"
                                        placeholder="عنوان ولي الامر">
                                </div>
                            </div>

                            <div class="row my-2">
                                <div class="col-2 pt-2">إسم ولي الامر</div>
                                <div class="col-4">
                                    <input type="text" name="guardian_name" id="guardianName" value="{{ $student->guardian_name ? $student->guardian_name : '' }}"
                                        placeholder="إسم ولي الامر">
                                </div>
                            </div>

                            <div class="row my-2">
                                <div class="col-2 pt-2">{{ __('student.guardian-phone-number') }}</div>
                                <div class="col-4">
                                    <input type="text" name="guardian_phone_number" id="guardianPhoneNumber" value="{{ $student->guardian_phone_number ? $student->guardian_phone_number : ''  }}"
                                        placeholder="{{ __('student.guardian-phone-number') }}">
                                </div>
                            </div>

                            <div class="flex justify-center my-4 row">
                                <div class="col-2 my-auto text-center">ملحوظة</div>
                                <div class="col-4">
                                    <textarea name="notes" id="notes" cols="50" rows="2">{{ $student->notes ?? '' }}</textarea>
                                </div>
                            </div>

                            <div class="row py-2">
                                <div class="col-12 flex justify-center text-center">
                                    <div class="col-2 pt-2">{{ __('student.image') }}</div>
                                    <div class="col-4">
                                        <label for="studentFile" class="custom-file-label px-4 py-2 rounded">
                                            {{ __('student.upload-image') }}
                                        </label>
                                        <input class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="studentFile" type="file" name="student_image">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h2 id="accordion-collapse-heading-2">
                        <button type="button" class="flex items-center w-full p-2 text-xl text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
                            <svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor"
                                viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="px-4">
                                {{ __('student.optional-data') }}
                            </span>
                        </button>
                    </h2>
                    <div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
                        <div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700">
                            <div class="row my-2">
                                <div class="col-2 pt-2">{{ __('student.phone-number2') }}</div>
                                <div class="col-4">
                                    <input type="number" name="phone_number2" id="phoneNumber2"
                                        placeholder="{{ __('student.phone-number2') }}" value="{{ $student->phone_number2 ? $student->phone_number2 : ''}}">
                                </div>

                                <div class="col-2 pt-2">{{ __('student.certificate-type') }}</div>
                                <div class="col-4">
                                    <select name="primary_certificate_type" id="primaryCertificateType">
                                        <option value="0" disabled selected>
                                            {{ __('student.choose-certificate-type') }}
                                        </option>
                                        @if ( isset($primaryCertificateTypes) )
                                        @foreach ($primaryCertificateTypes as $certificateType)
                                        <option value="{{ $certificateType->id }}" {{ isset($oldPrimaryCertificate) ? $oldPrimaryCertificate->certificate_type_id == $certificateType->id ? 'selected' : '' : '' }}>
                                            {{ $certificateType->name }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="row my-2">
                                <div class="col-2 pt-2">{{ __('student.certificate-year') }}</div>
                                <div class="col-4">
                                    <select name="primary_certificate_year" id="primaryCertificateYear">
                                        <option value="0" disabled selected>
                                            {{ __('student.choose-certificate-year') }}
                                        </option>
                                        @if ( isset($primaryCertificateYears) )
                                        @foreach ($primaryCertificateYears as $certificateYear)
                                        <option value="{{ $certificateYear->id }}" {{ isset($oldPrimaryCertificate) ? $oldPrimaryCertificate->certificate_year_id == $certificateYear->id ? 'selected' : '' : '' }}>
                                            {{ $certificateYear->value }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2"></div>
                                <div class="col-4"></div>
                            </div>

                            <div class="row my-2">
                                <div class="col-2 pt-2">{{ __('student.scholarships') }}</div>
                                <div class="col-4">
                                    <select name="scholarship" id="scholarship">
                                        @if ( isset($scholarships) )
                                        @foreach ($scholarships as $scholarship)
                                        <option value="{{ $scholarship->id }}" {{ isset($oldScholarship) ? $oldScholarship->scholarship_id == $scholarship->id ? 'selected' : '' : '' }}>
                                            {{ $scholarship->name }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2">{{ __('student.scholarship-funding') }}</div>
                                <div class="col-4">
                                    <select name="scholarship_funding" id="scholarshipFunding">
                                        @if ( isset($scholarshipFundings) )
                                        @foreach ($scholarshipFundings as $scholarshipFunding)
                                        <option value="{{ $scholarshipFunding->id }}" {{ isset($oldScholarship) ? $oldScholarship->scholarship_funding_id == $scholarshipFunding->id ? 'selected' : '' : '' }}>
                                            {{ $scholarshipFunding->value }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="row my-2">
                                <div class="col-2 pt-2">{{ __('student.scholarship-donor') }}</div>
                                <div class="col-4">
                                    <select name="scholarship_donor" id="scholarshipDonor">
                                        <option value="0" disabled selected>
                                            {{ __('student.choose-scholarship-donor') }}
                                        </option>
                                        @if ( isset($scholarshipDonors) )
                                        @foreach ($scholarshipDonors as $scholarshipDonor)
                                        <option value="{{ $scholarshipDonor->id }}" {{ isset($oldScholarship) ? $oldScholarship->scholarship_donor_id == $scholarshipDonor->id ? 'selected' : '' : '' }}>
                                            {{ $scholarshipDonor->name }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-2 pt-2">{{ __('student.student-status') }}</div>
                                <div class="col-4">
                                    <select name="education_status" id="educationStatus">
                                        <option value="0" disabled selected>
                                            {{ __('student.choose-student-status') }}
                                        </option>
                                        @if ( isset($educationStatuses) )
                                        @foreach ($educationStatuses as $status)
                                        <option value="{{ $status->id }}" {{ isset($oldStatus) ? $oldStatus->education_status_id == $status->id ? 'selected' : '' : '' }}>
                                            {{ $status->value }}
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="0">not set</option>
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
                <button type="submit"
                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    {{ __('student.save') }}
                </button>
                <a href="{{ route('student.index') }}" type="button"
                    class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
                    {{ __('student.cancel') }}
                </a>

                <button type="button" id="printStudentData" class="px-5 py-2.5 rounded-lg" style="background-color: #a72035; position: absolute; left: 20px; color: white;">
                    {{ __('student.print') }}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Print reciept for student card -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700" style="display: none">
    <!-- Modal header -->
    <div class="flex justify-center items-start p-4 rounded-t border-b dark:border-gray-600">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
            {{ __('student.show') ." ". __('student.data') ." ال". __('student.student') }}
        </h3>
    </div>

    <div id="dataForCard">
        <div class="p-6 space-y-6">
            <div class="row">
                <div class="col-12 flex justify-center text-center">
                    <img id="studentImage" src="{{ $student->image ? asset('img/students/' . $student->image) : asset('img/students/default-student-image.png')}}" alt="" style="width: 150px; height: 150px;">
                </div>
            </div>

            <div class="row">
                <div class="col-2 pt-2">{{ __('student.serial_number') }}</div>
                <div class="col-4">
                    <input type="text" name="" id="studentSerialNumber" placeholder="{{ __('student.id') }}"
                    value="000000" readonly
                    placeholder="{{ __('student.serial-number') }}" readonly>
                </div>
            </div>

            <div class="row">
                <div class="col-2 pt-2">{{ __('student.id') }}</div>
                <div class="col-4">
                    <input type="text" name="" id="studentId" value="{{ $student->student_id ? $student->student_id : '' }}"
                    placeholder="{{ __('student.id') }}" readonly>
                </div>

                <div class="col-2 pt-2">{{ __('student.name') }}</div>
                <div class="col-4">
                    <input type="text" name="" id="studentName" value="{{ $student->student_name ? $student->student_name : '' }}"
                    placeholder="{{ __('student.name') }}" required>
                </div>
            </div>

            <div class="row">
                <div class="col-2 pt-2">{{ __('student.program') }}</div>
                <div class="col-4">
                    <select name="" id="programId">
                        @if ($programs)
                        @foreach ($programs as $program)
                            <option value="{{ $program->id }}" {{ $program->id == $student->program_id ? 'selected' : '' }}>
                                {{ $program->name }}
                            </option>
                        @endforeach
                        @else
                        <option value="0">not set</option>
                        @endif
                    </select>
                </div>

                <div class="col-2 pt-2">{{ __('student.section') }}</div>
                <div class="col-4">
                    <select name="section_id" id="sectionId" style="max-width: 230px;">
                        <option value="0">{{ __('student.choose-section') }}</option>
                        @if ($sections)
                            @foreach ($sections as $section)
                                <option value="{{ $section->id }}" {{ $section->id == $student->section_id ? 'selected' : '' }}>
                                    {{ $section->name }}
                                </option>
                            @endforeach
                        @else
                        <option value="0"></option>
                        @endif
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-2 pt-2">{{ __('student.date-of-birth') }}</div>
                <div class="col-4">
                    <input type="text" name="" id="nationalId" value="{{ $student->national_id ? $student->national_id : '' }}"
                    placeholder="{{ __('student.national-id') }}" required>
                </div>
                <div class="col-2 pt-2">{{ __('student.national-id') }}</div>

                <div class="col-4">
                    <input type="date" name="" id="dateOfBirth" value="{{ $student->date_of_birth ? $student->date_of_birth : '' }}"
                        placeholder="{{ __('student.date-of-birth') }}">
                </div>
            </div>

            <div class="row">
                <div class="col-2 pt-2">{{ __('student.state') }}</div>
                <div class="col-4">
                    <select name="" id="stateId">
                        @if ($states)
                        @foreach ($states as $state)
                        <option value="{{ $state->id }}" {{ $state->id == $student->state_id ? 'selected' : '' }}>
                            {{ $state->name }}
                        </option>
                        @endforeach
                        @else
                        <option value="0">not set</option>
                        @endif
                    </select>
                </div>

                <div class="col-2 pt-2">{{ __('student.phone-number') }}</div>
                <div class="col-4">
                    <input type="text" name="" id="phoneNumber" value="{{ $student->phone_number ? $student->phone_number : '' }}"
                        placeholder="{{ __('student.phone-number') }}">
                </div>
            </div>

            <div class="row">
                <div class="col-2 pt-2">{{ __('student.admission-type') }}</div>
                <div class="col-4">
                    <select name="" id="admissionId">
                        @if ($admissions)
                        @foreach ($admissions as $admission)
                        <option value="{{ $admission->id }}">
                            {{ $admission->name }}
                        </option>
                        @endforeach
                        @else
                        <option value="0">not set</option>
                        @endif
                    </select>
                </div>

                <div class="col-2 pt-2">{{ __('student.guardian-phone-number') }}</div>
                <div class="col-4">
                    <input type="text" name="" id="guardianPhoneNumber" value="{{ $student->guardian_phone_number ? $student->guardian_phone_number : ''  }}"
                        placeholder="{{ __('student.guardian-phone-number') }}">
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('plugins/jQuery.print.min.js') }}"></script>

<script>
    $(document).ready(function () {
        $('#printStudentData').click(function (e) {
            e.preventDefault();

            $('#dataForCard').print({
                append : '<style>#dataForCard{direction: rtl;}</style>',
            });
        });
    });
</script>

<script src="{{ asset('plugins/jquery-validate/js/jquery.validate.min.js') }}"></script>

<script>
    $(document).ready(function () {
        $("#editStudentForm").validate({
            rules: {
                student_name: "required",
                program_fees: {
                    required: true,
                    number: true
                },
                registration_fees: {
                    required: true,
                    number: true
                },
                insurance_fees: {
                    required: true,
                    number: true
                },
                national_id: {
                    required: false,
                    number: true,
                },
            },
            messages: {
                student_name: ".هذا الحقل مطلوب",
                program_fees: {
                    required: ".هذا الحقل مطلوب",
                    number: "هذاالحقل ارقام فقط",
                },
                registration_fees: {
                    required: ".هذا الحقل مطلوب",
                    number: "هذاالحقل ارقام فقط",
                },
                insurance_fees: {
                    required: ".هذا الحقل مطلوب",
                    number: "هذاالحقل ارقام فقط",
                },
                national_id: {
                    required: ".هذا الحقل مطلوب",
                    number: "هذاالحقل ارقام فقط",
                    minlength: "يجب ان لايقل عن ٨ خانات",
                },
            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $(input).next('img').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]); // convert to base64 string
        }
    }


    $("#studentImageInput").change(function() {
        // $('#studentImageNoImage').css('display','none');
        // $('#studentImageOld').css('display','none');
        $('#studentImageLabel').css('display','none');
        $('#studentImage').css('display','block');
        readURL(this);
    });

</script>

<script>
    $(document).ready(function () {
        $('#collegeId').change(function (e) {
            e.preventDefault();

            $.ajax({
                type: "get",
                url: "{{ route('college.sections') }}",
                data: {
                    parent_id: $(this).find(":selected").val(),
                },
                // dataType: "html",
                success: function (response) {
                    $('#sectionId').html('');
                    $(response).each(function (index, element) {
                        $('#sectionId').append($('<option>', {
                            value: element.id,
                            text : element.name
                        }));
                    });
                }
            });
        });

        $('#studentFile').change(function(){
            var input = this;
            var url = $(this).val();
            var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
            if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg"))
            {
                var reader = new FileReader();

                reader.onload = function (e) {
                $('#fileImage').attr('src', e.target.result);
                }
            reader.readAsDataURL(input.files[0]);

            }
            else
            {
                $('#fileImage').attr('src', '{{ asset('img/students/default-student-image.png') }}');
            }
        });

        $('#stateId').change(function (e) {
            e.preventDefault();

            $.ajax({
                type: "get",
                url: "{{ route('state.localities') }}",
                data: {
                    parent_id: $(this).find(":selected").val(),
                },
                // dataType: "html",
                success: function (response) {
                    $('#localityId').html('');
                    $(response).each(function (index, element) {
                        $('#localityId').append($('<option>', {
                            value: element.id,
                            text : element.name
                        }));
                    });
                }
            });
        });
    });
</script>
@endsection