@extends('layouts.backend.main')

@section('contents')
    <div class="row justify-content-center">
        <div class="col col-xl-8">
            <div class="card shadow-none border-0">
                <div class="card-body p-5 py-3">
                    <form method="post" action="{{ route('invitation.compose') }}">
                        @csrf
                        <input type="hidden" name="event_id" value="{{ $event->id }}" />
                        <input type="hidden" name="rsvp" value="{{ $event->rsvp }}" />
                        {{-- <div class="mb-3">
                            <label class="text-gray-600 small" for="contact_id">To:</label>
                            <select name="contact_id[]" class="form-select form-control-solid" id="contact_id" multiple>
                                @foreach ($contact as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div> --}}
                        <div class="mb-3">
                            <label class="text-gray-600 small" for="to">To:</label>
                            <input type="text" class="form-control form-control-solid" id="to" value="All Contact" readonly />
                        </div>
                        <div class="mb-3">
                            <label class="text-gray-600 small" for="subject">Subject:</label>
                            <input type="text" value="{{ $event->name }} Invitation" name="subject"
                                class="form-control form-control-solid" id="subject"
                                readonly />
                        </div>
                        <div class="mb-4">
                            <label class="text-gray-600 small" for="email">Message:</label>
                            <textarea class="form-control" name="body" id="tiny">
                            {!! $meta['invitation_template'] !!}
                            </textarea>
                        </div>
                        <div class="text-end">
                            <button class="btn btn-light text-primary px-5" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('headers')
    <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
        <div class="container-fluid px-4">
            <div class="page-header-content">
                <div class="row align-items-center justify-content-between pt-3">
                    <div class="col-auto mb-3">
                        <h1 class="page-header-title">
                            {{ $title }}
                        </h1>
                    </div>
                    <div class="col-auto mb-3">
                        <a class="btn btn-sm btn-light text-primary" href="{{ route('contact') }}">
                            <i class="me-1" data-feather="arrow-left"></i>
                            Back
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
@endsection


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ asset('assets/backend/vendor/tinymce/tinymce.min.js') }}"></script>
    <script>
        tinymce.init({
            selector: 'textarea#tiny',
            readonly: true,
            toolbar: false,
            menubar: false,
            statusbar: false,
        });
        $(".form-select").select2({
            theme: "bootstrap-5",
            selectionCssClass: "select2--small",
            dropdownCssClass: "select2--small",
        });
    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />
@endpush