@extends('base')

@section('content')
    <style>
        .nav-tabs {
            border-bottom: none;
            margin-bottom: 25px;
            display: flex;
            gap: 15px;
        }

        .nav-tabs>li>a {
            border: none !important;
            background: white !important;
            color: #333 !important;
            font-size: 16px;
            font-weight: 500;
            padding: 10px 25px;
            border-radius: 8px !important;
            transition: all 0.3s ease;
            text-decoration: none !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* Style pour l'onglet actif */
        .nav-tabs>li.active>a,
        .nav-tabs>li.active>a:hover,
        .nav-tabs>li.active>a:focus {
            background-color: #28a745 !important;
            color: white !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            text-decoration: none !important;
        }

        .nav-tabs>li>a:hover {
            background-color: #f8f9fa !important;
            text-decoration: none !important;
        }

        /* Style spécifique pour les actions du dropdown */
        .dropdown-menu>li>a.action-generer {
            transition: background-color 0.2s ease, opacity 0.2s ease;
            color: #333 !important;
            /* Couleur de base */
        }

        .dropdown-menu>li>a.action-generer:hover {
            background-color: #e2e6ea !important;
            /* S'assombrit subtilement sans surligner en bleu */
            color: #000 !important;
            text-decoration: none !important;
        }
    </style>

    <div class="alert alert-success text-center">EDITION MAILING</div>

    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#generation" aria-controls="generation" role="tab"
                data-toggle="tab">Génération</a></li>
        <li role="presentation"><a href="#historique" aria-controls="historique" role="tab" data-toggle="tab">Historique des
                fichiers</a></li>
    </ul>

    <div class="tab-content" style="padding-top: 20px;">
        <!-- Onglet Génération -->
        <div role="tabpanel" class="tab-pane active" id="generation">
            <div class="row">
                <!-- Section Modèles -->
                <div class="col-md-5">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Gestion des modèles</h3>
                        </div>
                        <div class="panel-body">
                            <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalUpload">
                                <i class="fas fa-plus"></i> Nouveau modèle
                            </button>
                            <hr>
                            <div class="table-responsive">
                                <table class="table table-condensed table-bordered" id="table_templates"
                                    style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>Nom</th>
                                            <th>Fichier</th>
                                            <th style="width: 40px;">Sél.</th>
                                            <th style="width: 40px;">Sup.</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section Génération -->
                <div class="col-md-7">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Sélection des clients & Génération</h3>
                        </div>
                        <div class="panel-body">
                            <div class="alert alert-warning" id="status_generation" style="display:none;"></div>

                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label>Modèle sélectionné :</label>
                                    <input type="text" id="selected_template_name" class="form-control" readonly
                                        placeholder="Modèle sélectionné">
                                    <input type="hidden" id="selected_template_id">
                                </div>
                                <div class="col-md-6">
                                    <label for="recherche_centrale">Centrale (Modèle/Envoyeur) :</label>
                                    <select id="recherche_centrale" class="form-control" style="width: 100%;">
                                        <option value="0">Aucune</option>
                                        @foreach ($centrales as $centrale)
                                            <option value="{{$centrale->id_centrale}}"> {{ $centrale->centrale_code }} -> {{ $centrale->centrale_nom }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered" id="table_clients_mailing"
                                    style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th style="width: 20px;"><input type="checkbox" id="check_all_clients"></th>
                                            <th>Code</th>
                                            <th>Nom</th>
                                            <th>Ville</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                            <hr>
                            <div class="btn-group btn-block" style="width: 100%; display: flex;">
                                <button type="button" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false" id="btn_generer_groupe"
                                    style="flex: 1; border-radius: 6px;" disabled>
                                    <i class="fas fa-cogs"></i> GENERER LES MAILLINGS <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="btn_generer_groupe"
                                    style="width: 100%; text-align: center;">
                                    <li>
                                        <a href="#" class="action-generer" data-send-email="0"
                                            style="font-size: 16px; padding: 12px; display: block;">
                                            Générer uniquement (Créer les PDF)
                                        </a>
                                    </li>
                                    <li role="separator" class="divider" style="margin: 0;"></li>
                                    <li>
                                        <a href="#" class="action-generer" data-send-email="1"
                                            style="font-size: 16px; padding: 12px; display: block;">
                                            Générer ET Envoyer par e-mail
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Onglet Historique -->
        <div role="tabpanel" class="tab-pane" id="historique">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Historique des documents générés</h3>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered" id="table_history" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Modèle</th>
                                    <th>Client</th>
                                    <th>Utilisateur</th>
                                    <th>Fichier</th>
                                    <th>Sél.</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('mailing.form')

    <script>
        $(function () {
            $('title').text("EDITION MAILING - SMART CENTRAL");

            // Gestion manuelle des onglets pour assurer le changement de classe active
            $('.nav-tabs a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                $(this).closest('ul').find('li').removeClass('active');
                $(this).parent('li').addClass('active');
            });

            function checkGenererState() {
                var templateId = $('#selected_template_id').val();
                if (templateId && selectedClients.length > 0) {
                    $('#btn_generer_groupe').prop('disabled', false);
                } else {
                    $('#btn_generer_groupe').prop('disabled', true);
                }
            }

            // DataTable Modèles
            var tableTemplates = $('#table_templates').DataTable({
                ajax: "{{ route('mailing.table_templates') }}",
                columns: [
                    { data: 'nom' },
                    { data: 'filename', visible: false },
                    {
                        data: null,
                        render: function (data) {
                            var btnClass = ($('#selected_template_id').val() == data.id) ? 'btn-success' : 'btn-default';
                            return '<button class="btn ' + btnClass + ' btn-xs btn-select-template" data-id="' + data.id + '" data-name="' + data.nom + '"><i class="fas fa-check"></i></button>';
                        }
                    },
                    { data: 'actions', orderable: false, searchable: false }
                ],
                paging: false,
                searching: false,
                info: false
            });

            var selectedClients = [];

            // DataTable Clients
            var tableClients = $('#table_clients_mailing').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('client.table') }}",
                    type: "POST",
                    data: { _token: "{{ csrf_token() }}" }
                },
                columns: [
                    {
                        data: 'DT_RowId',
                        render: function (data) {
                            var checked = selectedClients.indexOf(data.toString()) !== -1 ? 'checked' : '';
                            return '<input type="checkbox" class="client-checkbox" value="' + data + '" ' + checked + '>';
                        },
                        orderable: false,
                        searchable: false
                    },
                    { data: '0' }, // client_code
                    { data: '3' }, // client_nom
                    { data: '8' }  // commune_ville
                ],
                iDisplayLength: 10,
                drawCallback: function () {
                    var allChecked = $('.client-checkbox').length > 0 && $('.client-checkbox:not(:checked)').length === 0;
                    $('#check_all_clients').prop('checked', allChecked);
                }
            });

            // DataTable Historique
            var tableHistory = $('#table_history').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('mailing.history_data') }}",
                columns: [
                    { data: 'created_at' },
                    { data: 'template.nom', defaultContent: '-' },
                    { data: 'client.client_nom', defaultContent: '-' },
                    { data: 'utilisateur.name', defaultContent: '-' },
                    { data: 'filename' },
                    { data: 'action', orderable: false, searchable: false }
                ],
                order: [[0, 'desc']]
            });

            // Sélection modèle
            $('#table_templates').on('click', '.btn-select-template', function () {
                var id = $(this).data('id');
                var name = $(this).data('name');

                if ($(this).hasClass('btn-success')) {
                    // Désélection (le bouton était déjà actif)
                    $('#selected_template_id').val('');
                    $('#selected_template_name').val('');
                    $(this).removeClass('btn-success').addClass('btn-default');
                } else {
                    // Sélection
                    $('#selected_template_id').val(id);
                    $('#selected_template_name').val(name);
                    $('.btn-select-template').removeClass('btn-success').addClass('btn-default');
                    $(this).removeClass('btn-default').addClass('btn-success');
                }
                checkGenererState();
            });

            // Suppression modèle
            $('#table_templates').on('click', '.btn-delete-template', function () {
                if (confirm('Supprimer ce modèle ?')) {
                    var id = $(this).data('id');
                    $.ajax({
                        url: "/mailing/" + id + "/supprimer",
                        type: 'DELETE',
                        data: { _token: "{{ csrf_token() }}" },
                        success: function () { tableTemplates.ajax.reload(); }
                    });
                }
            });

            // Check All Clients
            $('#check_all_clients').click(function () {
                var isChecked = this.checked;
                $('.client-checkbox').prop('checked', isChecked).trigger('change');
            });

            // Gestion de la sélection individuelle pour conserver l'état
            $('#table_clients_mailing').on('change', '.client-checkbox', function () {
                var value = $(this).val().toString();
                if ($(this).is(':checked')) {
                    if (selectedClients.indexOf(value) === -1) {
                        selectedClients.push(value);
                    }
                } else {
                    selectedClients = selectedClients.filter(function (item) {
                        return item !== value;
                    });
                }

                var allChecked = $('.client-checkbox').length > 0 && $('.client-checkbox:not(:checked)').length === 0;
                $('#check_all_clients').prop('checked', allChecked);
                checkGenererState();
            });

            // Upload Template
            $('#form_upload_template').submit(function (e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: "{{ route('mailing.upload') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        $('#modalUpload').modal('hide');
                        tableTemplates.ajax.reload();
                        $('#form_upload_template')[0].reset();
                    },
                    error: function (xhr) {
                        alert('Erreur lors de l\'upload');
                    }
                });
            });

            // Réinitialiser le formulaire à la fermeture du modal
            $('#modalUpload').on('hidden.bs.modal', function () {
                $('#form_upload_template')[0].reset();
            });

            // Génération
            $('.action-generer').click(function (e) {
                e.preventDefault();
                var templateId = $('#selected_template_id').val();
                var clientIds = selectedClients;
                var sendEmail = $(this).data('send-email');

                if (!templateId) { alert('Veuillez sélectionner un modèle.'); return; }
                if (clientIds.length === 0) { alert('Veuillez sélectionner au moins un client.'); return; }

                $('#btn_generer_groupe').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Génération en cours...');
                $('#status_generation').hide().text('');

                $.ajax({
                    url: "{{ route('mailing.generate') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        template_id: templateId,
                        client_ids: clientIds,
                        send_email: sendEmail,
                        centrale_id: $('#recherche_centrale').val()
                    },
                    success: function (res) {
                        $('#status_generation').addClass('alert-success').removeClass('alert-danger')
                            .html('Terminé ! ' + res.success + ' PDF générés. ' + res.errors + ' erreurs. <br><br>' +
                                '<button class="btn btn-primary btn-sm" id="btn_telecharger_zip"><i class="fas fa-file-archive"></i> TELECHARGER LE ZIP DES PDF</button>')
                            .show();

                        if (res.messages.length > 0) {
                            $('#status_generation').append('<br><small>' + res.messages.join('<br>') + '</small>');
                        }

                        tableHistory.ajax.reload();
                    },
                    error: function () {
                        $('#status_generation').addClass('alert-danger').removeClass('alert-success')
                            .text('Erreur technique lors de la génération.')
                            .show();
                    },
                    complete: function () {
                        $('#btn_generer_groupe').prop('disabled', false).html('<i class="fas fa-cogs"></i> GENERER LES MAILLINGS <span class="caret"></span>');
                    }
                });
            });

            // Téléchargement ZIP
            $(document).on('click', '#btn_telecharger_zip', function () {
                var templateId = $('#selected_template_id').val();
                var clientIds = selectedClients;
                var centraleId = $('#recherche_centrale').val();

                var form = $('<form>', {
                    action: "{{ route('mailing.download_zip') }}",
                    method: "POST"
                });

                form.append($('<input>', {
                    type: 'hidden',
                    name: '_token',
                    value: "{{ csrf_token() }}"
                }));

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'template_id',
                    value: templateId
                }));

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'centrale_id',
                    value: centraleId
                }));

                $.each(clientIds, function (i, id) {
                    form.append($('<input>', {
                        type: 'hidden',
                        name: 'client_ids[]',
                        value: id
                    }));
                });

                $('body').append(form);
                form.submit();
                form.remove();
            });
        });
    </script>
@endsection