@extends('layouts.index', ['subHeader' => 'Road Safety Platform'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('road_safety.index') }}" class="text-decoration-none text-dark"> / Road Safety Platform</a>
    <style>
        .filter-header {
            position: relative;
            padding-right: 30px !important;
            min-width: 62px !important;
        }
        .filter-trigger {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.3s;
            font-size: 14px;
        }
        .filter-trigger:hover {
            opacity: 1;
            color: #0d6efd;
        }
        .filter-container {
            position: absolute;
            top: 100%;
            left: 0;
            width: 220px;
            background: white;
            z-index: 100;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            display: none;
        }
        .filter-active {
            color: #0d6efd !important;
            opacity: 1 !important;
        }
        .filter-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #495057;
        }
        .select2-container {
            width: 100% !important;
            margin-bottom: 10px;
        }
        .filter-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .filter-actions .btn-sm {
            font-size: 12px;
        }
        .th-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
@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() {
            const commonExportOptions = {
                exportOptions: {
                    columns: ':not(:last-child)',
                    format: {
                        header: function (data, columnIdx, th) {
                            var $clonedHeader = $(th).clone();
                            $clonedHeader.find('.filter-trigger, .filter-container').remove();
                            return $clonedHeader.text().trim();
                        }
                    }
                }
            };

            var table = $('#tabla_road_safety_platform').DataTable({
                dom: `<'row d-flex align-items-center justify-content-between'
                    <'col-lg-8 d-flex align-items-center'f>
                    <'col-lg-4 d-flex align-items-center justify-content-end'B>>
                <'table-responsive'tr>
                <'row'<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>`,

                buttons: [
                    { ...commonExportOptions, extend: 'print' },
                    { ...commonExportOptions, extend: 'csv' },
                    { ...commonExportOptions, extend: 'excel' },
                    // { ...commonExportOptions, extend: 'pdf' }
                ],
                initComplete: function() {
                    this.api().columns().every(function() {
                        var column = this;
                        var colIndex = column.index();

                        // Actualizar el índice de la columna de acción
                        // La tabla tiene 17 columnas (índices 0 a 16). La última es la 16.
                        if (colIndex === 16) return;

                        var uniqueValues = [];
                        column.data().unique().sort().each(function(d) {
                            if (d) uniqueValues.push(d);
                        });

                        var $filterContainer = $(
                            '<div class="filter-container">' +
                                '<select class="filter-select" multiple="multiple" style="width:100%"></select>' +
                                '<div class="filter-actions">' +
                                    '<button class="btn btn-sm btn-light clear-filter mr-3" style="width: 31px !important; padding: 2px 0 6px 4px !important; height: 32px;"><i class="bi bi-trash2"></i></button>' +
                                    '<button class="btn btn-sm btn-primary apply-filter" style="width: 31px !important; padding: 2px 0 6px 4px !important; height: 32px;"><i class="bi bi-check-circle"></i></button>' +
                                '</div>' +
                            '</div>'
                        );

                        uniqueValues.forEach(function(value) {
                            $filterContainer.find('select').append('<option value="' + value + '">' + value + '</option>');
                        });

                        $(column.header()).addClass('filter-header');
                        $(column.header()).append('<i class="bi bi-funnel filter-trigger"></i>');
                        $(column.header()).append($filterContainer);

                        $filterContainer.find('select').select2({
                            placeholder: "Seleccione opciones",
                            allowClear: true,
                            dropdownParent: $filterContainer
                        });

                        $(column.header()).find('.filter-trigger').on('click', function(e) {
                            e.stopPropagation();
                            $('.filter-container').hide();
                            $(this).toggleClass('filter-active');
                            $filterContainer.toggle();
                        });

                        $filterContainer.find('.apply-filter').on('click', function() {
                            var values = $filterContainer.find('select').val();
                            if (values && values.length > 0) {
                                column.search(values.join('|'), true, false).draw();
                                $(column.header()).find('.filter-trigger').addClass('filter-active');
                            } else {
                                column.search('').draw();
                                $(column.header()).find('.filter-trigger').removeClass('filter-active');
                            }
                            $filterContainer.hide();
                        });

                        $filterContainer.find('.clear-filter').on('click', function() {
                            $filterContainer.find('select').val(null).trigger('change');
                            column.search('').draw();
                            $(column.header()).find('.filter-trigger').removeClass('filter-active');
                            $filterContainer.hide();
                        });
                    });
                }
            });

            $(document).on('click', function(e) {
                if (!$(e.target).closest('.filter-container').length &&
                    !$(e.target).closest('.filter-trigger').length) {
                    $('.filter-container').hide();
                    $('.filter-trigger').removeClass('filter-active');
                }
            });
        });
    </script>
@endsection

@section('content')
    <div class="row">
        <div class="d-flex w-100 voltearv" style="flex-direction: row-reverse;">
            <div class="w-s">
                <div class="btn-group mb-2" role="group">
                    <a href="{{ route('road_safety.dashboard.index') }}" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-clipboard-data"></i> Reportes
                    </a>
                </div>
                <div class="btn-group mb-2" role="group">
                    <a href="{{ route('road_safety.createView') }}" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-file-earmark-plus"></i> Nuevo registro
                    </a>
                </div>
                <div class="btn-group mb-2">
                    <a href="{{ route('leading.index') }}" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="container-fluid">
        <div class="shadow-s p-4">
            <div class="table-responsive">
                <table id="tabla_road_safety_platform" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" class="grayt filter-header">Site</th>
                            <th scope="col" class="grayt filter-header">Type</th>
                            <th scope="col" class="grayt filter-header">Year</th>
                            <th scope="col" class="grayt filter-header">Month</th>
                            <th scope="col" class="grayt filter-header">Gasoil Cars</th>
                            <th scope="col" class="grayt filter-header">Hybrid Cars</th>
                            <th scope="col" class="grayt filter-header">Total Cars</th>
                            <th scope="col" class="grayt filter-header">Preventable Accidents</th>
                            <th scope="col" class="grayt filter-header">Non-Preventable Acc.</th>
                            <th scope="col" class="grayt filter-header">Frequent Drivers</th>
                            <th scope="col" class="grayt filter-header">Occasional Drivers</th>
                            <th scope="col" class="grayt filter-header">High Risk Drivers</th>
                            <th scope="col" class="grayt filter-header">Annual Training</th>
                            <th scope="col" class="grayt filter-header">BTW Certifications</th>
                            <th scope="col" class="grayt filter-header">RSC</th>
                            <th scope="col" class="grayt filter-header">Avg. CO2 Emission</th>
                            <th scope="col" class="grayt">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($registros as $item)
                            <tr>
                                <td>{{ $item->site_name }}</td>
                                <td>{{ $item->type_name }}</td>
                                <td>{{ $item->year }}</td>
                                <td>{{ $item->month_name }}</td>
                                <td>{{ $item->gasoil_cars }}</td>
                                <td>{{ $item->hybrid_cars }}</td>
                                <td>{{ $item->total_cars }}</td>
                                <td>{{ $item->preventable_accidents }}</td>
                                <td>{{ $item->non_preventable_accidents }}</td>
                                <td>{{ $item->frequent_drivers_count }}</td>
                                <td>{{ $item->occasional_drivers_count }}</td>
                                <td>{{ $item->high_risk_drivers_count }}</td>
                                <td>{{ $item->annual_training_count }}</td>
                                <td>{{ $item->btw_certifications_count }}</td>
                                <td>{{ $item->rsc_count }}</td>
                                <td>{{ $item->average_co2_emission }}</td>
                                <td>
                                    <a href="{{ route('road_safety.editView', $item->id) }}" class="btn btn-outline-p">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="17" class="text-center">No hay registros para mostrar</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection