@extends('backend.layouts.app')

@section('title', 'Send Email')

@section('content')
    @php
        $pageTitle = 'Send Email';
        $indexRoute = 'email-template.index';
        $indexLabel = 'Email Templates';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-5">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Manual Email</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Choose any active template, fill its variables, then send it to one recipient.</p>
            </div>

            <form method="GET" action="{{ route('email-send.create') }}" class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Template</label>
                <select name="template_id" class="js-email-template-select w-full"
                    data-placeholder="Select an active template...">
                    <option value=""></option>
                    @foreach ($templates as $template)
                        <option value="{{ $template->id }}" @selected((string) old('template_id', request('template_id')) === (string) $template->id)>
                            {{ $template->template_name }} ({{ $template->template_key }})
                        </option>
                    @endforeach
                </select>
            </form>
        </div>

        @if ($selected)
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="flex flex-wrap items-start justify-between gap-3 px-5 py-4 sm:px-6 sm:py-5">
                    <div>
                        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">{{ $selected->template_name }}</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Subject: {{ $selected->subject }}</p>
                    </div>
                    <div class="flex w-full flex-wrap gap-2 sm:w-auto">
                        <a href="{{ route('email-template.preview', $selected) }}" target="_blank"
                            class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">Preview Template</a>
                        <a href="{{ route('email-template.edit', $selected) }}"
                            class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">Edit Template</a>
                    </div>
                </div>

                <form action="{{ route('email-send.store') }}" method="POST" class="space-y-5 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                    @csrf
                    <input type="hidden" name="template_id" value="{{ $selected->id }}">

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Recipient Email <span class="text-error-500">*</span></label>
                        <input type="email" name="recipient" value="{{ old('recipient') }}" placeholder="recipient@example.com"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('recipient') border-error-300 dark:border-error-700 @enderror">
                        @error('recipient')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    </div>

                    @if ($tokens !== [])
                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                            @foreach ($tokens as $token)
                                <div class="{{ in_array($token, ['message'], true) ? 'sm:col-span-2' : '' }}">
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                        {{ $labels[$token] ?? $token }}
                                        <code class="ml-1 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400">[[{{ $token }}]]</code>
                                    </label>
                                    @if ($token === 'message')
                                        <textarea name="variables[{{ $token }}]" rows="4"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">{{ old('variables.'.$token) }}</textarea>
                                    @else
                                        <input type="{{ $token === 'action_url' || $token === 'login_url' ? 'url' : 'text' }}"
                                            name="variables[{{ $token }}]" value="{{ old('variables.'.$token) }}"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-sm text-gray-500 dark:text-gray-400">This template has no extra variables. It will use the application name and site URL automatically.</p>
                    @endif

                    @error('variables')<p class="text-theme-xs text-error-500">{{ $message }}</p>@enderror

                    <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                        <a href="{{ route('email-template.index') }}"
                            class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 sm:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">Cancel</a>
                        <button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-theme-sm font-medium text-white hover:bg-brand-600 sm:w-auto">Send Email</button>
                    </div>
                </form>
            </div>
        @endif
    </div>
@endsection

@push('styles')
    <link href="{{ asset('vendor/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .js-email-template-select + .select2-container {
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single {
            min-height: 44px;
            border-radius: 0.5rem;
            border-color: rgb(209 213 219);
            background-color: transparent;
            padding: 4px 8px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 34px;
            color: rgb(31 41 55);
            padding-left: 8px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px;
        }

        .select2-container--default .select2-selection--single .select2-selection__clear {
            color: rgb(107 114 128);
            cursor: pointer;
            font-size: 18px;
            font-weight: 500;
            line-height: 32px;
            margin-right: 14px;
        }

        .dark .select2-container--default .select2-selection--single,
        .dark .select2-dropdown {
            border-color: rgb(55 65 81);
            background-color: rgb(17 24 39);
            color: rgb(243 244 246);
        }

        .dark .select2-container--default .select2-selection--single .select2-selection__clear {
            color: rgb(156 163 175);
        }

        .dark .select2-container--default .select2-selection--single .select2-selection__rendered,
        .dark .select2-container--default .select2-search--dropdown .select2-search__field,
        .dark .select2-results__option {
            color: rgb(243 244 246);
        }

        .dark .select2-container--default .select2-search--dropdown .select2-search__field {
            border-color: rgb(55 65 81);
            background-color: rgb(17 24 39);
        }
    </style>
@endpush

@push('scripts')
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('.js-email-template-select').select2({
                width: '100%',
                placeholder: function() {
                    return $(this).data('placeholder');
                },
                allowClear: true
            }).on('change', function() {
                this.form.submit();
            });
        });
    </script>
@endpush