@extends('v2/fleet/layouts/contentNavbarLayout')

@section('title')
La list des services
@endsection


@section('page-script')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')

<div class="row py-3 mb-4">
    <div class="col-md-12">
        <h4 class="fw-bold text-dark">Services</h4>
        <p>Effortlessly manage your fleet of vehicles on the Cars page. Add or import cars, monitor technical controls</p>
    </div>
</div>

@include('client.responses.messages')

<div class="col-12">
    <div class="row mb-3">
        <div class="col">
            <input type="text" id="searchInput" class="form-control" placeholder="{{ __('client.search') }}" style="max-width: 200px">
        </div>
        <div class="col">
            <select id="statusFilter" class="form-select">
                <option value="">Par Status</option>
                <option value="{{ Vehicle::NOT_PAID_STATUS }}">{{ __('client.not_paid') }}</option>
                <option value="{{ Vehicle::PENDING_STATUS }}">{{ __('client.pending') }}</option>
                <option value="{{ Vehicle::ACCEPTED_STATUS }}">{{ __('client.in_progress') }}</option>
                <option value="{{ Vehicle::TECHNICAL_CONTROL_OK_STATUS }}">{{ __('client.technical_control_ok') }}</option>
                <option value="{{ Vehicle::READY_FOR_DELIVERY_STATUS }}">{{ __('client.ready_for_delivery') }}</option>
            </select>
        </div>
        <div class="col">
            <select id="providerFilter" class="form-select">
                <option value="">Par Garage</option>
                @foreach ($providers as $provider)
                    <option value="{{ $provider['name'] }}">{{ $provider['name'] }}</option>
                @endforeach
            </select>
        </div>
        <div class="col">
            <select id="conveyorFilter" class="form-select">
                <option value="">Par Trasport</option>
                <option value="Arval-trasport">Arval-trasport</option>
                <option value="My-trasporter">My-trasporter</option>
            </select>
        </div>
        <div class="col">
            <input type="date" id="appointmentDateFilter" class="form-control">
        </div>
    </div>  
    <div class="table-responsive">
        <table id="appointmentsTable" class="table table-borderless" style="border-collapse: separate;border-spacing:0 10px;">
            <thead>
                <tr class="text-center">
                    <th>Service</th>
                    <th>Immatriculation</th>
                    <th>{{ __('client.vehicle') }}</th>
                    <th>{{ __("client.client") }}</th>
                    <th style="min-width: 120px">{{ __("client.created_at") }}</th>
                    <th>{{ __("client.transporter") }}</th>
                    <th>{{ __("client.parks") }}</th>
                    <th>{{ __("client.status") }}</th>
                </tr>
            </thead>
            <tbody class="table-border-bottom-0">
                <!-- This part will be dynamically replaced by the AJAX call -->
            </tbody>
        </table>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function() {
        loadAppointments();

        $("#providerFilter, #conveyorFilter, #statusFilter, #searchInput, #appointmentDateFilter").on("input change", function() {
            var providerFilter = $("#providerFilter").val();
            var conveyorFilter = $("#conveyorFilter").val();
            var statusFilter = $("#statusFilter").val();
            var searchInput = $("#searchInput").val();
            var appointmentDateFilter = $("#appointmentDateFilter").val();
            loadAppointments(providerFilter, conveyorFilter, statusFilter, searchInput, appointmentDateFilter);
        });
    });

    function loadAppointments(providerFilter = '', conveyorFilter = '', statusFilter = '', search = '', appointmentDateFilter = '') {
        var appointments = {!! json_encode($appointments) !!};

        var filteredAppointments = appointments.filter(function(appointment) {
            var searchTerm = search.toLowerCase();
            var vehicleNumberplate = appointment.vehicle_numberplate?.toLowerCase();
            var clientCompany = appointment.client_company?.toLowerCase();
            var vehicle = appointment.vehicle_mark?.toLowerCase() + ' ' + appointment.vehicle_model?.toLowerCase() + ' ' + appointment.vehicle_version?.toLowerCase();

            var statusMatches = !statusFilter || appointment.status === statusFilter;
            var providerMatches = !providerFilter || appointment.provider === providerFilter;
            var conveyorMatches = !conveyorFilter || appointment.conveyor === conveyorFilter;
            var appointmentDateMatches = !appointmentDateFilter || (appointment.appointment_date && appointment.appointment_date == appointmentDateFilter);

            appointmentDateFilter? console.log(appointmentDateFilter):null;
            (appointment.appointmentDate && appointmentDateFilter) ? console.log(appointment.appointmentDate.indexOf(appointmentDateFilter)) : null;
            return (
                statusMatches && providerMatches && conveyorMatches && appointmentDateMatches &&
                (vehicleNumberplate.includes(searchTerm) ||
                clientCompany.includes(searchTerm) ||
                vehicle.includes(searchTerm))
            );
        });

        var tableRows = filteredAppointments.map(function(appointment) {
            return `
                <tr class="text-center rounded bg-white">
                    <td>${appointment.service}</td>
                    <td>${appointment.vehicle_numberplate}</td>
                    <td>${appointment.vehicle}</td>
                    <td>${appointment.client_company}</td>
                    <td>${appointment.appointment_date}</td>
                    <td>${appointment.conveyor}</td>
                    <td>${appointment.provider}</td>
                    <td>${appointment.status_view}</td>
                </tr>
            `;
        });

        $("#appointmentsTable tbody").html(tableRows.join(''));
    }
</script>
@endsection