@extends('layouts.panel')

@section('title', $title)

@push('css')
    <link rel="stylesheet" href="{{ asset('vendor/css/flatpickr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/css/dselect.min.css') }}">
@endpush

@section('breadcrumb')
<x-admin.breadcrumb />
@endsection

@section('content')
<x-admin.panel-card>
    @slot('title')
    <h5>{{$title}} <b>{{ $item->name ?? '' }}</b></h5>
    @endslot

    {{-- {{ $errors }} --}}
{{--    @dd($classes)--}}

    <form action="{{ isset($item) ? route('student.update', $item->id) : route('student.store') }}" method="POST" enctype="multipart/form-data"> @csrf
        @isset($item) @method("PUT") @endisset
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6">
                        <x-form.input :label="trans('Photo')" type="file" name="image" id="image" accept=".jpg,.jpeg,.png,.gif,.bmp" />
                    </div>
                    <div class="col-md-6 pt-3">
                        <div class="d-flex">
                            @isset ($user->image_url)
                            <div class='me-3'>
                                @lang('Photo Preview:')
                                <br />
                                <img src="{{ $user->image_url }}" width="110" />
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('First Name')" type="text" name="name" :value="$item->first_name ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Last Name')" type="text" name="last_name" :value="$item->last_name ?? ''"/>
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.datepicker :label="trans('Date of Birth')" name="date_of_birth" value="{{ formatDate($item->date_of_birth ?? '') }}" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.select :label="trans('Gender')" name="gender" :options="$genders" :value="$item->gender ?? ''" has-placeholder/>
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Email')" type="email" name="email" :value="$item->email ?? ''" :placeholder="trans('Email Address')" />
            </div>
            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Password')" type="password" name="password" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Fiscal Code')" type="text" name="fiscal_code" :value="$item->fiscal_code ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Moodle Id')" type="text" name="moodle_id" :value="$item->moodle_id ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Common Birth')" type="text" name="birth_common" :value="$item->birth_common ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Initial Province of Birth')" type="text" name="birth_province" :value="$item->birth_province ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Birth Region')" type="text" name="birth_region" :value="$item->birth_region ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('State of Birth')" type="text" name="birth_state" :value="$item->birth_state ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Birth Location')" type="text" name="birth_location" :value="$item->birth_location ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
{{--                <x-form.input :label="trans('Class')" type="text" name="class" id="class" :value="$item->class ?? ''" />--}}
                <div class="mb-3">
                    <label for="class">{{trans("Class")}} <small class="text-danger">*</small></label>
                    <select class="form-control" name="class" id="class" required>
                        <option value="">{{trans('Select Class')}}</option>
                        @foreach($classes as $class)
                            <option value="{{$class}}" {{old('class', $item->class ?? null)==$class?"selected":""}}>{{$class}}</option>
                        @endforeach
                    </select>
                    @error('class') <div class="text-danger">{{$message}}</div> @enderror
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Tag')" type="text" name="tag" id="tag" :value="$item->tag ?? ''" />
            </div>

            <div class="col-md-12">
                <div class="my-3">
                    <button type="submit" class="btn btn-primary d-inline-flex align-items-center">
                        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        @lang('Submit')
                    </button>
                </div>
            </div>
        </div>
    </form>

</x-admin.panel-card>

@isset($item)
<livewire:student::student-email :student="$item"/>
<livewire:documents::document-upload :student="$item"/>
@endisset

@endsection

@push('js')
    <script src="{{ asset('vendor/js/flatpickr.min.js') }}"></script>
    <script>
        flatpickr('.datepicker-wrap', {
                allowInput: true,
                clickOpens: false,
                wrap: true,
                default: '',
                dateFormat: '{{ DATE_FORMAT }}'
            });
    </script>
    <script src="{{ asset('vendor/js/dselect.min.js') }}"></script>
    <script>
        // Enable dropdown-select on all '.dselect'
            for (const el of document.querySelectorAll(".dselect")) {
                dselect(el);
            }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            $(function(){
                function sendEmailLoader() {
                    $("#sendEmailForm").on('submit', function() {
                        $("#loadingModal").css({display: 'block'});
                        $("#loadingModal").addClass("show");
                    });
                }

                sendEmailLoader();
            });
        });
    </script>
@endpush