@extends('client/layouts/contentNavbarLayout')

@section('title')
{{ __('vehicles.title') }}
@endsection

@section('content')
<div class="col-12">
    @include('client.responses.messages')

    <div class="card">
        <h5 class="card-header">{{ __('client.technical_control_list') }}</h5>

        <div class="row px-4 mb-3">
            <div class="col">
                <label for="conveyorFilter" class="form-label">{{  __('client.transporter')  }}</label>
                <select id="conveyorFilter" class="form-select">
                    <option value="">{{ __('client.all') }}</option>
                    <option value="Arval-trasport">Arval-trasport</option>
                    <option value="My-trasporter">My-trasporter</option>
                </select>
            </div>
            <div class="col">
                <label for="providerFilter" class="form-label">{{  __('client.parks')  }}</label>
                <select id="providerFilter" class="form-select">
                    <option value="">{{ __('client.all') }}</option>
                    @foreach ($providers as $provider)
                        <option value="{{ $provider['name'] }}">{{ $provider['name'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col">
                <label for="statusFilter" class="form-label">{{  __('client.status')  }}</label>
                <select id="statusFilter" class="form-select">
                    <option value="">{{ __('client.all') }}</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>
                    {{-- <option value="{{ Vehicle::STATUS_DELIVERED }}">{{ __('client.delivered') }}</option> --}}
                </select>
            </div>
            <div class="col">
                <label for="searchInput" class="form-label">{{ __('client.search') }}</label>
                <input type="text" id="searchInput" class="form-control" placeholder="Search" style="max-width: 200px">
            </div>
        </div>  

        <div class="table-responsive">
            <table class="table" id="appointmentsTable">
                <thead>
                    <tr>
                        <th>N°d Immatriculation</th>
                        <th>{{ __('client.vehicle') }}</th>
                        <th>{{ __("client.client") }}</th>
                        <th>{{ __("client.status") }}</th>
                        <th>{{ __("client.transporter") }}</th>
                        <th>{{ __("client.parks") }}</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    <!-- This part will be dynamically replaced by the AJAX call -->
                </tbody>
            </table>
        </div>
    </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").on("input change", function() {
            var providerFilter = $("#providerFilter").val();
            var conveyorFilter = $("#conveyorFilter").val();
            var statusFilter = $("#statusFilter").val();
            var searchInput = $("#searchInput").val();
            loadAppointments(providerFilter, conveyorFilter, statusFilter, searchInput);
        });
    });

    function loadAppointments(providerFilter = '', conveyorFilter = '', statusFilter = '', search = '') {
        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();

            // Check if the appointment matches the selected status (if any)
            var statusMatches = !statusFilter || appointment.status === statusFilter;
            var providerMatches = !providerFilter || appointment.provider === providerFilter;
            var conveyorMatches = !conveyorFilter || appointment.conveyor === conveyorFilter;

            return (
                statusMatches && providerMatches && conveyorMatches &&
                (vehicleNumberplate.includes(searchTerm) ||
                clientCompany.includes(searchTerm) ||
                vehicle.includes(searchTerm))
            );
        });

        var tableRows = filteredAppointments.map(function(appointment) {
            return `
                <tr>
                    <td>${appointment.vehicle_numberplate}</td>
                    <td>${appointment.vehicle}</td>
                    <td>${appointment.client_company}</td>
                    <td>${appointment.status_view}</td>
                    <td>${appointment.conveyor}</td>
                    <td>${appointment.provider}</td>
                </tr>
            `;
        });

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