@extends('layout')

@section('content')
    <div class=" page-header-light " style="border-radius: 0px;">

        <div class="d-flex justify-content-between align-items-center mx-3 my-2">

            <div class="d-flex flex-column tailwind-scope mt-1">

                <h4 class="text-white text-2xl font-bold mb-1">Clients & Engagement</h4>
                <p class="text-white text-base">Gestion des newsletter</p>
            </div>
            @include('shared.navbar')
        </div>
        {{-- @include('laundry.bons._search') --}}
    </div>

    <div class="content tailwind-scope h-screen">
        <div class="shadow-md rounded-2xl p-3 m-1">

            <a class="flex items-center mb-4 text-lg " href="/newsletter">
                <i class="fa-solid fa-arrow-left pr-2"></i> <span class="font-semibold">Nouvelle newsletter</span>
            </a>
            <!-- Form to create and send newsletter -->
            <form action="{{ route('sendNewsletter') }}" method="POST">
                @csrf
                <x-form-group label="Titre:">
                    <div class="w-1/2">
                        <input type="text" name="title" id="title" class="form-control custom-input"
                            value="{{ old('title') }}">
                        @error('title')
                            <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                        @enderror
                    </div>
                </x-form-group>

                <x-form-group label="Les propriétaires:">
                    <div class="w-1/2">


                        <div class=" flex items-center">

                            <div>
                                <input type="checkbox" title="Sélectionner tout" class="mr-2" id="select-all-properties">
                            </div>
                            <select name="properties[]" id="properties"
                                class="form-control select-search overflow-y-auto h-32 custom-input @error('properties') alert-danger @enderror"
                                multiple="multiple">
                                @foreach($owners as $property)
                                    <option value="{{ $property->id }}" {{ in_array($property->id, old('properties', [])) ? 'selected' : '' }}>
                                        {{ $property->name }} {{ $property->last_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('properties')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </x-form-group>
                <x-form-group label="Les clients:">
                    <div class="w-1/2">


                        <div class=" flex items-center">
                            <div>
                                <input type="checkbox" id="select-all-clients" title="Sélectionner tout" class="mr-2">
                            </div>
                            <select name="clients[]" id="clients"
                                class="form-control select-search custom-input @error('clients') alert-danger @enderror"
                                multiple="multiple">
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}" {{ in_array($client->id, old('clients', [])) ? 'selected' : '' }}>
                                        {{ $client->f_name }} {{ $client->l_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('clients')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </x-form-group>
                <div class="form-group">
                    <label for="content">Contenu</label>
                    <textarea name="content" id="content"
                        class="form-control @error('content') alert-danger @enderror">{{ old('content') }}</textarea>
                    @error('content')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="w-full flex">
                    <button type="submit" class="w-full bg-[#1F9878] font-bold py-2 text-white">
                        <i class="icon-box-add mr-2"></i>
                        Sauvegarder
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Initialize TinyMCE and Select2 -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            tinymce.init({
                selector: '#content',
                height: 500,
                plugins: 'link image code',
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
            });

            $('#properties').select2({
                placeholder: 'Sélectionner les propriétaires',
                allowClear: true
            });

            // Select all properties
            $('#select-all-properties').on('click', function () {
                if ($(this).is(':checked')) {
                    $('#properties > option').prop('selected', true);
                    $('#properties').trigger('change');
                } else {
                    $('#properties > option').prop('selected', false);
                    $('#properties').trigger('change');
                }
            });

            $('#clients').select2({
                placeholder: 'Sélectionner les clients',
                allowClear: true
            });

            // Select all clients
            $('#select-all-clients').on('click', function () {
                if ($(this).is(':checked')) {
                    $('#clients > option').prop('selected', true);
                    $('#clients').trigger('change');
                } else {
                    $('#clients > option').prop('selected', false);
                    $('#clients').trigger('change');
                }
            });
        });
    </script>
@endsection