@extends('layouts.admin')
@section('title')
    Rapoarte
@endsection
@section('breadcrumbs')
    {{ Breadcrumbs::render('admin.reports.auto') }}
@endsection
@section('content')
    <div>
        <h1>Afișarea Rapoartelor</h1>
    </div>
    <div class="row">
        <div class="col-md-3">
            <label for="filter-vehicle">Filtrare Vehicul</label>
            <input type="text" id="filter-vehicle" class="form-control mb-3">
        </div>
        <div class="col-md-3">
            <label for="filter-start-date">Filtrare Data Start</label>
            <input type="date" id="filter-start-date" class="form-control mb-3">
        </div>
        <div class="col-md-3">
            <label for="filter-end-date">Filtrare Data Stop</label>
            <input type="date" id="filter-end-date" class="form-control mb-3">
        </div>
        <div class="col-md-auto ml-auto">
            <button id="reset-filters" class="btn btn-primary">Șterge Filtre</button>
        </div>
        <div class="col-md-auto ml-auto">
            <button id="apply-filters" class="btn btn-primary">Aplică Filtre</button>
        </div>
    </div>
    <div class="row">
        <div class="card">
            <div class="card-body">
                {{ $dataTable->table(['class' => 'table table-row-bordered gy-5'], true) }}
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{ $dataTable->scripts() }}
    <script>
        $(document).ready(function() {
            var table = $('#reports-auto-table').DataTable();

            $('#apply-filters').on('click', function() {
                table.draw();
            });


            $('#reset-filters').on('click', function() {
                // Resetează câmpurile de filtrare
                $('#filter-vehicle').val('');
                $('#filter-start-date').val('');
                $('#filter-end-date').val('');

                // Resetează și filtrul tabelului
                table.search('').draw();
                table.columns().search('').draw();
            });


            $.fn.dataTable.ext.search.push(
                function(settings, data, dataIndex) {
                    var vehicleFilter = $('#filter-vehicle').val().toLowerCase();
                    var startDateFilter = $('#filter-start-date').val();
                    var endDateFilter = $('#filter-end-date').val();

                    var vehicle = data[0].toLowerCase(); // Coloană vehicul (index 0)
                    var startDate = data[2]; // Coloană Data Start (index 2)
                    var endDate = data[3]; // Coloană Data Stop (index 3)

                    if (vehicleFilter && vehicle.indexOf(vehicleFilter) === -1) {
                        return false;
                    }
                    if (startDateFilter && startDate < startDateFilter) {
                        return false;
                    }
                    if (endDateFilter && endDate > endDateFilter) {
                        return false;
                    }
                    return true;
                }
            );
        });
    </script>
@endpush