@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}}</h5>
    @endslot

    {{-- {{ $errors }} --}}

    <form action="{{ isset($item) ? route('teacher.update', $item->id) : route('teacher.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" id="name" :value="$item->name ?? ''" />
            </div>

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

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

            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Password')" type="password" name="password" id="password" />
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="mb-3">
                    <label for="class">{{trans("Class")}} <small class="text-danger">*</small></label>
                    <select class="form-select dselect" name="class[]" id="class" required multiple data-dselect-search="true">
                        <option value="">{{trans("Choose classes")}}</option>
                        @foreach($classes as $class)
                            <option value="{{$class["id"]}}" {{in_array($class['id'], old('class', isset($item) ? $item->classes()->pluck('id')->toArray() : []))?"selected":""}}>{{$class["class_name"]}}</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('Title')" type="text" name="title" :value="$item->title ?? ''" />
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.select :label="trans('Types')" name="type" :options="$types" wire:model="type" :value="$item->type ?? null" has-placeholder required/>
            </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>
@endsection

@push('js')
    <script src="{{ asset('vendor/js/flatpickr.min.js') }}"></script>
    <script>
        flatpickr('.datepicker-wrap', {
                allowInput: true,
                clickOpens: false,
                wrap: true,
                default: null
            });
    </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>
@endpush