@extends('adminlte::page')

@section('title', 'Crear notificación')

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content_header')
    <h1>dashboard</h1>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('makeNotification') }}" method="POST" enctype="multipart/form-data">
                @csrf

                {{-- Usuarios (send_to) --}}
                <div class="form-group">
                    <label for="send_to">Enviar a</label>
                    <select name="send_to[]" id="send_to"
                        class="form-control @error('send_to') is-invalid @enderror select2" multiple="multiple">
                        @foreach ($users as $user)
                            <option value="{{ $user->email }}"
                                {{ collect(old('send_to'))->contains($user->email) ? 'selected' : '' }}>{{ $user->name }}
                                ({{ $user->email }})
                            </option>
                        @endforeach
                    </select>
                    @error('send_to')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Mensaje --}}
                <div class="form-group">
                    <label for="message">Mensaje</label>
                    <textarea name="message" id="message" class="form-control @error('message') is-invalid @enderror" rows="4">{{ old('message') }}</textarea>
                    @error('message')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Imagen --}}
                <div class="form-group">
                    <label for="image">Imagen (opcional) *Experimental, aun puede presentar errores</label>
                    <input type="file" name="image" id="image"
                        class="form-control-file @error('image') is-invalid @enderror">
                    @error('image')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Fecha programada --}
                <div class="form-group">
                    <label for="scheduled_at">Fecha programada (opcional)</label>
                    <input type="date" name="scheduled_at" id="scheduled_at"
                        class="form-control @error('scheduled_at') is-invalid @enderror" value="{{ old('scheduled_at') }}">
                    @error('scheduled_at')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div> --}}

                <button type="submit" class="btn btn-primary">Crear Notificación</button>
                <a href="{{ route('listNotifications') }}" class="btn btn-secondary">Cancelar</a>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "Selecciona uno o varios usuarios...",
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endsection