@extends('backend.layouts.master')
@section('title', 'Nouvelle liste de diffusion')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/monokai.min.css">
    <style>
        .CodeMirror {
            border: 1px solid #ced4da;
            border-radius: .25rem;
            height: auto;
            min-height: 300px;
            max-height: 600px;
            font-size: 13px;
            overflow-x: hidden;
        }

        .CodeMirror-scroll {
            overflow-x: hidden !important;
        }
    </style>
@endsection

@section('content')
    <div class="page-title-box">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h6 class="page-title">Nouvelle liste de diffusion</h6>
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('backend.diffusion-lists.index') }}">Listes</a></li>
                    <li class="breadcrumb-item active">Création</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <form action="{{ route('backend.diffusion-lists.store') }}" method="POST" id="list-form">
                @csrf

                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-4">Informations</h4>
                        <div class="mb-3">
                            <label for="name" class="form-label">Nom de la liste <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name"
                                value="{{ old('name') }}" required placeholder="Ex: Médecins généralistes Tunisie">
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="2">{{ old('description') }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Mode toggle --}}
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-3">Mode de ciblage</h4>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="query_mode" id="mode-filters" value="filters"
                                checked>
                            <label class="btn btn-outline-primary" for="mode-filters"><i class="fas fa-filter"></i>
                                Filtres</label>
                            <input type="radio" class="btn-check" name="query_mode" id="mode-custom" value="custom">
                            <label class="btn btn-outline-warning" for="mode-custom"><i class="fas fa-code"></i> Requête
                                personnalisée</label>
                        </div>
                    </div>
                </div>

                {{-- Custom query card --}}
                <div class="card d-none" id="card-custom-query">
                    <div class="card-body">
                        <h4 class="card-title mb-3"><i class="fas fa-code"></i> Requête Eloquent personnalisée</h4>
                        <p class="text-muted small mb-2">Écrivez votre requête User:: (sans <code>->get()</code> à la fin).
                            Ex :</p>
                        <pre class="bg-light p-2 small mb-3">User::whereExists(function ($query) {
    $query->select(DB::raw(1))
        ->from('participants')
        ->whereColumn('participants.user_id', 'users.id')
        ->where('participants.event_id', 47);
})</pre>
                        <textarea class="d-none" id="custom_query" name="custom_query"></textarea>
                        <script>
                            document.getElementById('custom_query').value = @json(old('custom_query', ''));
                        </script>
                        <div id="query-editor-wrapper"></div>

                        <div class="alert alert-info mt-3">
                            <i class="fas fa-users"></i> Destinataires estimés : <strong
                                id="estimate-count-custom">--</strong>
                            <button type="button" class="btn btn-sm btn-outline-primary ms-2"
                                id="btn-estimate-custom">Estimer</button>
                        </div>
                    </div>
                </div>

                <div class="card" id="card-filters">
                    <div class="card-body">
                        <h4 class="card-title mb-4"><i class="fas fa-filter"></i> Filtres</h4>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Pays</label>
                                <select class="form-select" name="filter_country">
                                    <option value="">-- Tous --</option>
                                    @foreach ($countries as $c)
                                        <option value="{{ $c }}"
                                            {{ old('filter_country') == $c ? 'selected' : '' }}>{{ $c }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Domaine</label>
                                <select class="form-select" name="filter_domain">
                                    <option value="">-- Tous --</option>
                                    @foreach ($domains as $d)
                                        <option value="{{ $d }}"
                                            {{ old('filter_domain') == $d ? 'selected' : '' }}>{{ $d }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Spécialité</label>
                                <select class="form-select" name="filter_specialty[]" multiple>
                                    @foreach ($specialties as $s)
                                        <option value="{{ $s }}">{{ $s }}</option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Ctrl+clic pour sélection multiple</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Gouvernorat</label>
                                <select class="form-select" name="filter_gouvernorat[]" multiple>
                                    @foreach ($gouvernorats as $g)
                                        <option value="{{ $g }}">{{ $g }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Mode</label>
                                <select class="form-select" name="filter_mode">
                                    <option value="">-- Tous --</option>
                                    @foreach ($modes as $m)
                                        <option value="{{ $m }}">{{ $m }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Limiter à (nombre)</label>
                                <input type="number" class="form-control" name="filter_take" min="1"
                                    placeholder="Pas de limite">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox"
                                        id="filter_event_participated_enabled" name="filter_event_participated_enabled"
                                        value="1">
                                    <label class="form-check-label" for="filter_event_participated_enabled">A participé
                                        à</label>
                                </div>
                                <select class="form-select" id="filter_event_participated"
                                    name="filter_event_participated[]" multiple disabled>
                                    @foreach ($events as $ev)
                                        <option value="{{ $ev->id }}">{{ $ev->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox"
                                        id="filter_event_not_participated_enabled"
                                        name="filter_event_not_participated_enabled" value="1">
                                    <label class="form-check-label" for="filter_event_not_participated_enabled">N'a PAS
                                        participé à</label>
                                </div>
                                <select class="form-select" id="filter_event_not_participated"
                                    name="filter_event_not_participated[]" multiple disabled>
                                    @foreach ($events as $ev)
                                        <option value="{{ $ev->id }}">{{ $ev->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="filter_email_valid"
                                        value="1" checked>
                                    <label class="form-check-label">Email valide</label>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="filter_not_mailbox_full"
                                        value="1" checked>
                                    <label class="form-check-label">Exclure boîtes pleines</label>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="filter_not_unsubscribed"
                                        value="1" checked>
                                    <label class="form-check-label">Exclure désabonnés</label>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <i class="fas fa-users"></i> Destinataires estimés : <strong
                                id="estimate-count-filters">--</strong>
                            <button type="button" class="btn btn-sm btn-outline-primary ms-2"
                                id="btn-estimate-filters">Estimer</button>
                        </div>
                    </div>
                </div>

                <div class="mb-4">
                    <button type="submit" class="btn btn-success btn-lg"><i class="fas fa-save"></i> Créer la
                        liste</button>
                    <a href="{{ route('backend.diffusion-lists.index') }}" class="btn btn-secondary btn-lg">Annuler</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/clike/clike.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/php/php.min.js"></script>
    <script>
        (function() {
            var textarea = document.getElementById('custom_query');
            var editor = CodeMirror(document.getElementById('query-editor-wrapper'), {
                value: textarea.value,
                mode: 'php',
                theme: 'monokai',
                lineNumbers: true,
                lineWrapping: true,
                viewportMargin: Infinity
            });
            editor.on('change', function() {
                textarea.value = editor.getValue();
            });

            // Mode toggle
            var cardFilters = document.getElementById('card-filters');
            var cardCustom = document.getElementById('card-custom-query');
            var radios = document.querySelectorAll('input[name="query_mode"]');

            radios.forEach(function(radio) {
                radio.addEventListener('change', function() {
                    if (this.value === 'custom') {
                        cardFilters.classList.add('d-none');
                        cardCustom.classList.remove('d-none');
                        editor.refresh();
                    } else {
                        cardFilters.classList.remove('d-none');
                        cardCustom.classList.add('d-none');
                        editor.setValue('');
                        textarea.value = '';
                    }
                });
            });

            // Toggle event participation filter selects
            document.getElementById('filter_event_participated_enabled').addEventListener('change', function() {
                document.getElementById('filter_event_participated').disabled = !this.checked;
            });
            document.getElementById('filter_event_not_participated_enabled').addEventListener('change', function() {
                document.getElementById('filter_event_not_participated').disabled = !this.checked;
            });

            // Estimate for filters mode
            document.getElementById('btn-estimate-filters').addEventListener('click', function() {
                var form = document.getElementById('list-form');
                var formData = new FormData(form);
                var params = new URLSearchParams();
                for (var pair of formData.entries()) {
                    if (pair[0].startsWith('filter_') && pair[1]) params.append(pair[0], pair[1]);
                }
                fetch('{{ route('backend.diffusion-lists.estimate') }}?' + params.toString(), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(data) {
                        document.getElementById('estimate-count-filters').textContent = data.error ?
                            'Erreur: ' + data.error : data.count;
                    })
                    .catch(function() {
                        document.getElementById('estimate-count-filters').textContent = 'Erreur';
                    });
            });

            // Estimate for custom query mode
            document.getElementById('btn-estimate-custom').addEventListener('click', function() {
                var customQuery = editor.getValue();
                if (!customQuery.trim()) return;
                fetch('{{ route('backend.diffusion-lists.estimate') }}?custom_query=' + encodeURIComponent(
                        customQuery), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(data) {
                        document.getElementById('estimate-count-custom').textContent = data.error ?
                            'Erreur: ' + data.error : data.count;
                    })
                    .catch(function() {
                        document.getElementById('estimate-count-custom').textContent = 'Erreur';
                    });
            });
        })();
    </script>
@endsection