@props(['clients'])

@php
    $isSending = old('_notification') === 'send';
    $receiver = old('receiver', '');
@endphp

<dialog id="send-notification-dialog" class="vpm-dialog vpm-dialog--notification-send" aria-labelledby="send-notification-dialog-title">
    <form
        method="POST"
        action="{{ route('admin.notifications.store') }}"
        class="vpm-dialog__panel"
        data-vpm-notification-send
    >
        @csrf
        <input type="hidden" name="_notification" value="send">

        <button type="button" class="vpm-dialog__close vpm-dialog__close--corner" data-vpm-dialog-close aria-label="Close">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
            </svg>
        </button>

        <div class="vpm-dialog__scroll">
            <div class="vpm-dialog__content vpm-admin-notification-send">
                <header class="vpm-dialog__header vpm-dialog__header--form">
                    <h2 id="send-notification-dialog-title" class="vpm-dialog__title">Send notification</h2>
                </header>

                <div class="vpm-dialog__fields">
                    <div class="vpm-field vpm-admin-notification-receiver">
                        <label class="vpm-field__label" for="notification-receiver">Receiver(s)</label>
                        <div class="vpm-admin-notification-receiver__wrap">
                            <select
                                id="notification-receiver"
                                name="receiver"
                                class="vpm-input vpm-admin-notification-receiver__select"
                                required
                                data-vpm-notification-receiver
                            >
                                <option value="" @selected($receiver === '') disabled>Select receiver(s)</option>
                                <option value="all" @selected($receiver === 'all')>All users</option>
                                @foreach ($clients as $client)
                                    <option
                                        value="user:{{ $client->id }}"
                                        @selected($receiver === 'user:'.$client->id)
                                    >
                                        {{ $client->name }} — {{ $client->email }}
                                    </option>
                                @endforeach
                            </select>
                            <svg class="vpm-admin-notification-receiver__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                <path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>
                            </svg>
                        </div>
                        @if ($isSending)
                            @error('receiver')
                                <p class="vpm-auth-float__error" role="alert">{{ $message }}</p>
                            @enderror
                        @endif
                    </div>

                    <x-vpm.auth-field
                        name="subject"
                        label="Subject"
                        :value="$isSending ? old('subject') : ''"
                        required
                        maxlength="120"
                    />

                    <div class="vpm-auth-float">
                        <div class="vpm-auth-float__control">
                            <textarea
                                id="notification-message"
                                name="message"
                                class="vpm-auth-float__input vpm-auth-float__input--textarea @error('message') vpm-auth-float__input--error @enderror"
                                placeholder=" "
                                maxlength="2000"
                                required
                            >{{ $isSending ? old('message') : '' }}</textarea>
                            <label class="vpm-auth-float__label" for="notification-message">Message</label>
                        </div>
                        @if ($isSending)
                            @error('message')
                                <span class="vpm-auth-float__error" role="alert">{{ $message }}</span>
                            @enderror
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <footer class="vpm-dialog__footer vpm-dialog__footer--form vpm-admin-notification-send__footer">
            <x-vpm.button type="button" variant="secondary" data-vpm-dialog-close>Cancel</x-vpm.button>
            <x-vpm.button type="submit" variant="primary">Send</x-vpm.button>
        </footer>
    </form>
</dialog>