@extends('base')

@section('content')
    <div class="alert alert-success text-center" id="entete" style="background:#000000 !important; color: white !important">
        <h1>DÉCALAGE DATE BL</h1>
    </div>

    <!-- Div for search modals -->
    <div id="filtre_recherche"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1050;">
    </div>
    <div id="contenu_recherche"
        style="display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; background: white; z-index: 1051; overflow-y: auto; padding: 20px; border-radius: 10px;">
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="row">
                <!-- Filters Column -->
                <div class="col-md-6 border-right">
                    <h5 class="card-title text-success mb-3"><i class="fas fa-filter"></i> Filtres</h5>
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="date_debut">Date début:</label>
                            <input type="date" class="form-control" id="date_debut" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="date_fin">Date fin:</label>
                            <input type="date" class="form-control" id="date_fin" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="societe_id">Société:</label>
                            <select id="societe_id" class="form-control">
                                <option value="">Toutes</option>
                                @foreach($societes as $societe)
                                    <option value="{{ $societe->ID_Societe }}">{{ $societe->Societe_Code }} ->
                                        {{ $societe->Societe_Nom_Societe }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Client:</label>
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control" id="client_nom_afficher" disabled
                                    placeholder="Tous les clients">
                                <input type="hidden" id="client_id" value="">
                                <div class="input-group-append">
                                    <button class="btn btn-success" type="button" id="btn_recherche_client"><i
                                            class="fa fa-search"></i></button>
                                    <button class="btn btn-danger" type="button" id="btn_vider_client"><i
                                            class="fas fa-times-circle"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Chantier:</label>
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control" id="chantier_nom_afficher" disabled
                                    placeholder="Tous les chantiers">
                                <input type="hidden" id="chantier_id" value="">
                                <div class="input-group-append">
                                    <button class="btn btn-success" type="button" id="btn_recherche_chantier"><i
                                            class="fa fa-search"></i></button>
                                    <button class="btn btn-danger" type="button" id="btn_vider_chantier"><i
                                            class="fas fa-times-circle"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-success btn-block" id="btn_filtrer">
                        <i class="fas fa-search"></i> Rechercher les bls
                    </button>
                </div>

                <!-- Shift Column -->
                <div class="col-md-6">
                    <h5 class="card-title text-success mb-3"><i class="fas fa-calendar-alt"></i> Décalage</h5>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="radio" name="type_decalage" id="radio_jours" value="jours"
                            checked>
                        <label class="form-check-label font-weight-bold" for="radio_jours">
                            Décalage par nombre de jours
                        </label>
                    </div>
                    <div id="div_jours" class="mb-4 pl-4">
                        <div class="form-group">
                            <label for="nb_jours">Nombre de jours (+ ou -):</label>
                            <input type="number" class="form-control" id="nb_jours" value="0" placeholder="Ex: 1 ou -1">
                        </div>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="radio" name="type_decalage" id="radio_fixe" value="fixe">
                        <label class="form-check-label font-weight-bold" for="radio_fixe">
                            Définir une date fixe
                        </label>
                    </div>
                    <div id="div_fixe" class="mb-4 pl-4" style="display:none;">
                        <div class="form-group">
                            <label for="date_fixe">Nouvelle date:</label>
                            <input type="date" class="form-control" id="date_fixe">
                        </div>
                    </div>

                    <button class="btn btn-success btn-block" id="btn_appliquer_decalage">
                        <i class="fas fa-check"></i> Appliquer au(x) bl(s) sélectionné(s)
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered" id="table_bl">
            <thead style="background-color:#28a745; color:white">
                <tr>
                    <th width="30px"><input type="checkbox" id="select_all"></th>
                    <th>BL Code</th>
                    <th>Date Ref</th>
                    <th>Client</th>
                    <th>Chantier</th>
                </tr>
            </thead>
        </table>
    </div>

    <script>
        $(document).ready(function () {
            var table = $('#table_bl').DataTable({
                processing: true,
                serverSide: true,
                paging: false,
                dom: 'Bfrtip',
                buttons: [
                    { "extend": 'excel', "text": 'Export excel', "className": 'btn_export_excel', title: 'Liste des bls séléctionnés', "attr": { "style": "color: rgb(255, 255, 255); background-color: rgb(33, 136, 56);" } }
                ],
                ajax: {
                    url: "{{ route('decalege_facturation.table') }}",
                    data: function (d) {
                        d.date_debut = $('#date_debut').val();
                        d.date_fin = $('#date_fin').val();
                        d.societe_id = $('#societe_id').val();
                        d.client_id = $('#client_id').val();
                        d.chantier_id = $('#chantier_id').val();
                    }
                },
                columns: [
                    {
                        data: 'id_bl',
                        orderable: false,
                        searchable: false,
                        render: function (data) {
                            return '<input type="checkbox" class="bl_checkbox" value="' + data + '">';
                        }
                    },
                    { data: 'bl_code' },
                    { data: 'bl_date_ref_formatted', name: 'bl_date_ref' },
                    {
                        data: 'lier_client',
                        render: function (data) {
                            return data ? data.client_code + ' - ' + data.client_nom : '';
                        }
                    },
                    {
                        data: 'lier_chantier',
                        render: function (data) {
                            return data ? data.chantier_code + ' - ' + data.chantier_nom : '';
                        }
                    }
                ],
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json"
                }
            });

            $('#btn_filtrer').click(function () {
                table.ajax.reload();
            });

            $('#select_all').change(function () {
                $('.bl_checkbox').prop('checked', $(this).prop('checked'));
            });

            // Radio buttons logic
            $('input[name="type_decalage"]').change(function () {
                if (this.value === 'jours') {
                    $('#div_jours').show();
                    $('#div_fixe').hide();
                } else {
                    $('#div_jours').hide();
                    $('#div_fixe').show();
                }
            });

            // Search modals logic
            function showModal(content) {
                $('#contenu_recherche').html(content);
                $('#filtre_recherche').show();
                $('#contenu_recherche').show();
            }

            function hideModal() {
                $('#filtre_recherche').hide();
                $('#contenu_recherche').hide();
                $('#contenu_recherche').empty();
            }

            $('#filtre_recherche').click(hideModal);

            $('#btn_recherche_client').click(function () {
                $.get('{{ route('decalege_facturation.search') }}', { fiche_recherche: 'decalege_facturation_client' }, function (retour) {
                    showModal(retour);
                });
            });

            $('#btn_vider_client').click(function () {
                $('#client_id').val('');
                $('#client_nom_afficher').val('');
                $('#btn_vider_chantier').click();
            });

            $('#btn_recherche_chantier').click(function () {
                var clientId = $('#client_id').val();
                if (!clientId) {
                    alert("Veuillez d'abord sélectionner un client.");
                    return;
                }
                $.get('{{ route('decalege_facturation.search') }}', { fiche_recherche: 'decalege_facturation_chantier', client_id: clientId }, function (retour) {
                    showModal(retour);
                });
            });

            $('#btn_vider_chantier').click(function () {
                $('#chantier_id').val('');
                $('#chantier_nom_afficher').val('');
            });

            $('#btn_appliquer_decalage').click(function () {
                var selectedBls = [];
                $('.bl_checkbox:checked').each(function () {
                    selectedBls.push($(this).val());
                });

                if (selectedBls.length === 0) {
                    alert('Veuillez sélectionner au moins un BL.');
                    return;
                }

                var typeDecalage = $('input[name="type_decalage"]:checked').val();
                var nbJours = $('#nb_jours').val();
                var dateFixe = $('#date_fixe').val();

                if (confirm('Êtes-vous sûr de vouloir décaler la date de ' + selectedBls.length + ' BL(s) ?')) {
                    $.post("{{ route('decalege_facturation.decaler') }}", {
                        bl_ids: selectedBls,
                        type_decalage: typeDecalage,
                        nb_jours: nbJours,
                        date_fixe: dateFixe,
                        _token: '{{ csrf_token() }}'
                    }, function (response) {
                        if (response.success) {
                            alert(response.message);
                            table.ajax.reload();
                        } else {
                            alert('Erreur: ' + response.message);
                        }
                    });
                }
            });
        });
    </script>
    <style>
        .excel-btn-custom {
            background-color: #28a745 !important;
            border-color: #28a745 !important;
            color: white !important;
            padding: 5px 15px !important;
            border-radius: 4px !important;
        }

        .excel-btn-custom:hover {
            background-color: #218838 !important;
            border-color: #1e7e34 !important;
        }

        .form-check-label {
            cursor: pointer;
        }

        .border-right {
            border-right: 1px solid #dee2e6;
        }

        #contenu_recherche {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .fermer_affiche {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
@endsection