@extends('layouts.panel')

@section('title', $title)

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

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

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

    <form action="{{ isset($item) ? route('email.template.update', $item->id) : route('email.template.store') }}" method="POST"> @csrf
        @isset($item) @method("PUT") @endisset
        <div class="row">
            <div class="col-md-6 col-lg-3">
                <x-form.input :label="trans('Template Name')" type="text" name="name" :value="$item->name ?? ''"  required/>
            </div>

            <div class="col-md-6 col-lg-3">
                <x-form.select :label="trans('User Type')" name="user_type" :options="$user_types" :value="$item->user_type ?? ''" readonly/>
            </div>
            <div class="col-12"></div>
            <div class="col-lg-6">
                <x-form.input :label="trans('Subject')" type="text" name="subject" :value="$item->subject ?? ''"  required/>
            </div>

            <div class="col-md-12">
                <strong for="template">@lang('Template Parameters')</strong>
                <ul class="list-unstyled">
                    <li><code>{site_name}</code>: @lang('Website Name')</li>
                    <li><code>{recipient_nome}</code>: @lang('Student/Teacher/Tutor First Name')</li>
                    <li><code>{recipient_cognome}</code>: @lang('Student/Teacher/Tutor Last Name')</li>
                    <li><code>{recipient_email}</code>: @lang('Student/Teacher/Tutor Email')</li>
                    <li><code>{titolo}</code>: @lang('Teacher/Tutor Title')</li>
                    <li><code>{student_name}</code>: @lang("Student's Full Name")</li>
                    <li><code>{fiscal_code}</code>: @lang("Student's Fiscal Code")</li>
                </ul>
            </div>
            <div class="col-md-8">
                <x-form.textarea :label="trans('Template Body')" name="template" :value="$item->template ?? null" placeholder="@lang('Write the template')" 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/dselect.min.js') }}"></script>
    <script src="{{ asset('vendor/summernote/summernote-bs5.js') }}"></script>
    <script>
        $(function () {
            $('#template').summernote({
                placeholder: "@lang('Write the template here')",
                tabsize: 2,
                minHeight: 250
            });
        });

        // Enable dropdown-select on all '.dselect'
        for (const el of document.querySelectorAll(".dselect")) {
            dselect(el);
        }
    </script>
@endpush