@extends('client/layouts/contentNavbarLayout')

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


@section('page-script')
<script src="{{asset('assets/js/pages-account-settings-account.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
@endsection

@section('content')
<div class="row py-3">
    <div class="col-md">
        <h4 class="fw-bold py-3">{{ __('client.vehicles') }}</h4>
    </div>
    <div class="col-md text-md-end" id="display-search-form-btn">
        <Button class="btn btn-primary" onclick="displaySearchForm()">{{ __('client.add_vehicle') }}</Button>
    </div>
</div>

<div class="card mb-5" id="search-form" style="display: none">
    <div class="crad-body px-4 py-3">
        <form action="javascript:void(0)" onsubmit="handleSubmitMatriculationForm()">
            @csrf
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6">
                        <div class="col col-lg-10">
                            <label for="models">{{ __('client.numberplate') }}</label>
                            <input type="text" id="matriculation" class="form-control" required minlength="7" maxlength="7" placeholder="AB-123-CD">
                        </div>
                        <p class="text-danger" id="matriculationError"></p>
                    </div>
                    <div class="col-md-4">
                        <div class="col-2">
                            <button class="btn btn-primary ml-4 mt-4" type="submit">{{ __('client.search') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="divider">
            <div class="divider-text">{{ __('client.or') }}</div>
        </div>
        @if ($marks)
        <form action="javascript:void(0)" onsubmit="handleSubmit()">
            @csrf
            <div class="row">
                <div class="col-md-4 col-lg-3 mb-2 mt-lg-2">
                    <label for="models">{{ __('client.search') }}</label>
                    <select class="form-select mt-1 w-75" style="width: 200px" onchange="getModels(event.target.value)" id="marks" name="mark_id" required>
                        <option value="">{{ __('client.select') }}</option>
                        @foreach ($marks as $mark)
                        <option class="px-2" value="{{ $mark['id'] }}">{{ $mark['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 col-lg-3 mb-2 mt-lg-2">
                    <label for="models">{{ __('client.model') }}</label>
                    <select class="form-select mt-1 w-75" style="width: 200px" onchange="getVehicles(event.target.value)" id="models" name="model_id" required>
                        <option class="px-2" value="">{{ __('client.select') }}</option>
                    </select>
                </div>
                <div class="col-md-4 col-lg-3 mb-2 mt-lg-2">
                    <label for="models">{{ __('client.version') }}</label>
                    <select class="form-select mt-1 w-75" style="width: 200px" id="vehicles" name="car_id" required>
                        <option value="">{{ __('client.select') }}</option>
                    </select>
                </div>
                <div class="col-2 pt-2">
                    <button class="btn btn-primary ml-4 mt-4" type="submit">{{ __('client.add') }}</button>
                </div>
            </div>
        </form>
        @endif
    </div>
    <button type="button" class="btn btn-primary" id="store-vehicle-button" data-bs-toggle="modal" hidden data-bs-target="#exLargeModal"></button>
    <div class="modal fade" id="exLargeModal" aria-hidden="true" tabindex="-1" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="{{ route('client.vehicle.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="number" name="id" id="vehicle-id" hidden>
                    <input type="text" name="search_method" id="search-method" hidden>
                    <div class="modal-body px-4">
                        <div class="row g-2 gap-3">
                            <div class="col mb-3">
                                <label for="emailExLarge" class="form-label">{{ __('client.vehicle_type') }}</label>
                                <select class="form-select" id="vehicle-type" name="type" disabled>
                                    <option selected="">{{ __('client.select') }}</option>
                                    <option value="P">Passager</option>
                                    <option value="O">Commercial</option>
                                    <option value="B">Moto</option>
                                    <option value="L">Commercial léger</option>
                                    <option value="M">Moteur</option>
                                    <option value="A">Essieux</option>
                                    <option value="K">Type de corps</option>
                                    <option value="U">Universel</option>
                                </select>
                            </div>
                            <div class="col mb-3">
                                <label for="emailExLarge" class="form-label">{{ __('client.numberplate') }}</label>
                                <input type="text" id="vehicle-numberplate" name="numberplate" class="form-control" required minlength="7" maxlength="9" placeholder="AB123CD">
                            </div>
                        </div>
                        <div class="row g-2 gap-3">
                            <div class="col-6 mb-3">
                                <label for="emailExLarge" class="form-label">{{ __('client.model') }}</label>
                                <input type="text" id="vehicle-model" name="model" class="form-control" readonly>
                            </div>
                            <div class="col mb-3">
                                <label for="dobExLarge" class="form-label">{{ __('client.gearbox') }}</label>
                                <select class="form-select" id="vehicle-gearbox" name="gearbox" required>
                                    <option value="">Sélectionner</option>
                                    <option value="A">Automatique</option>
                                    <option value="M">Manuel</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-2 gap-3">
                            <div class="col-6 mb-3">
                                <label for="emailExLarge" class="form-label">{{ __('client.version') }}</label>
                                <input type="text" id="vehicle-version" name="version" class="form-control" readonly>
                            </div>
                            <div class="col mb-3">
                                <label for="dobExLarge" class="form-label">{{ __('client.number_of_places') }}</label>
                                <input type="number" id="number-of-places" name="author_document" class="form-control" required>
                            </div>
                        </div>
                        <div class="row g-2 gap-3">
                            <div class="col-6 mb-3">
                                <label for="dobExLarge" class="form-label">{{ __('client.mark') }}</label>
                                <input type="text" id="vehicle-mark" name="mark" class="form-control" readonly>
                            </div>
                            <div class="col mb-3">
                                <label for="dobExLarge" class="form-label">{{ __('client.serial_number') }}</label>
                                <input type="text" id="vehicle-serial-number" name="serial_number" class="form-control">
                            </div>
                        </div>
                        <div class="row g-2 gap-3" >
                            <div class="col-6 mb-3">
                                <label for="emailExLarge" class="form-label">{{ __('client.horse_power') }}</label>
                                <input type="number" id="vehicle-power" name="horse_power" class="form-control" readonly required min="50" max="2000">
                            </div>
                            <div class="col mb-3">
                                <label for="construction-year" class="form-label">{{ __('client.construction_year') }}</label>
                                <input type="date" class="form-control" id="construction-year" name="construction_year" required/>
                                <p id="construction-year-warning" class="text-warning"></p>
                            </div>
                        </div>
                        <div class="row g-2 gap-3">
                            <div class="col-6 mb-3">
                                <label for="emailExLarge" class="form-label">{{ __('client.engine_type') }}</label>
                                <input type="text" id="engine-type" name="engine_type" class="form-control" readonly>
                            </div>
                            <div class="col mb-3">
                                <label for="technical-inspection-date" class="form-label">{{ __('client.technical_inspection_date') }}</label>
                                <input type="date" id="technical-inspection-date" name="technical_inspection_date" class="form-control"  max="{{ date('Y-m-d') }}">
                            </div>
                        </div>

                        <div class="row g-2 gap-3">
                            <div class="col mb-3">
                                <label for="emailExLarge" class="form-label">{{ __('client.site') }}</label>
                                <select class="form-select" id="sites" name="site_id" required>
                                    <option value="">{{ __('client.select') }}</option>
                                    @foreach ($sites as $site)
                                    <option value="{{ $site->id }}">{{ $site->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col mb-3">
                                <label for="technical-inspection-date" class="form-label">{{ __('client.revision_date') }}</label>
                                <input type="date" id="revision-date" name="revision_date" class="form-control"  max="{{ date('Y-m-d') }}">
                            </div>  
                        </div>
                        <div class="row g-2 gap-3">
                            <div class="col mb-3">
                                <label for="technical-inspection-date" class="form-label">{{ __('client.park_number') }}</label>
                                <input type="text" id="park-number" name="park_number" class="form-control" maxlength="255">
                            </div>
                            <div class="col"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('client.cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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

    <div class="card">
        <h5 class="card-header">{{ __('client.vehicle_list') }}</h5>
        <div class="table-responsive text-nowrap">
            <table class="table" style="white-space: normal">
                <thead>
                    <tr>
                        <th>{{ __('client.numberplate') }}</th>
                        <th style="width: 300px">{{ __('client.vehicle') }}</th>
                        <th style="width: 150px">{{ __('client.site') }}</th>
                        <th style="width: 125px">{{ __('client.year') }}</th>
                        <th>{{ __("client.actions") }}</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @if($vehicles)
                    @foreach ($vehicles as $vehicle)
                    <tr>
                        <td>{{ $vehicle->numberplate }}</td>
                        <td>{{ $vehicle->mark . ' ' . $vehicle->model . ' ' . $vehicle->version }}</td>
                        <td>{{ $vehicle->site()->withTrashed()->first()->name }}</td>
                        <td>{{ $vehicle->construction_year }}</td>
                        <td>
                            <div class="dropdown">
                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="{{ route('client.vehicle.show', $vehicle->id) }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="12">
                                            <path fill="#697a8d" d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM80 64h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16s7.2-16 16-16zm16 96H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V256c0-17.7 14.3-32 32-32zm0 32v64H288V256H96zM240 416h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H240c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
                                        </svg> 
                                        <span class="mx-2">{{ __('client.consult') }}</span>
                                      </a>
                                    {{-- <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>{{ __('client.edit') }}</a> --}}
                                        <button class="dropdown-item" type="button" onclick="deleteVehicle('{{ route('client.vehicle.delete', $vehicle->id) }}')"><i class="bx bx-trash me-1"></i>{{ __('client.delete') }}</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>

<button hidden type="button" data-bs-toggle="modal" id="delete-btn" data-bs-target="#delete-vehicle"></button>
<div class="modal fade" id="delete-vehicle" tabindex="-1" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel1">{{ __("client.validation_window") }}</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p class="h5">
                {{ __("client.delete_vehicle_validation") }}
            </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __("client.close") }}</button>
          <form id="delete-vehicle-form" method="POST">
            @csrf
            <button type="submit" class="btn btn-danger">{{ __("client.delete") }}</button>
          </form>
        </div>
      </div>
    </div>
</div>
<form method="POST" id="payment-vehicle-form">
    @csrf
    <input type="text" name="payment_id" id="payment-id" hidden>
</form>    

<button type="button" id="payment-btn" data-bs-toggle="modal" data-bs-target="#paymentModel" hidden></button>
<div class="modal fade" id="paymentModel" tabindex="-1" role="dialog" aria-labelledby="paymentModelLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="paymentModelLabel">Confirmation of your order</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Please select your preferred payment method for completing your order:</p>
          <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#stripeModal">Payment by credit card</button>
          <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#paymentPictureModal">Payment by bank transfer</button>
        </div>
      </div>
    </div>
</div>
<div class="modal fade" id="stripeModal" tabindex="-1" role="dialog" aria-labelledby="stripeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title h3" id="stripeModalLabel">Confirmation of your order</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="mb-2 h6">
            In order to finalize your order and confirm the technical inspection of your vehicles, please pay by credit card by completing the payment information below.
          </p>
          <p class="mb-4 h6">
            Price: 250 € 
          </p>
          <div id="card-element" class="form-control mb-3"></div>
          <div id="card-errors" role="alert" class="text-danger mb-3"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="card-button">{{ __("client.confirm") }}</button>
        </div>
      </div>
    </div>
</div>

<div class="modal fade" id="paymentPictureModal" tabindex="-1" role="dialog" aria-labelledby="paymentPictureModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-primary h3" id="paymentPictureModalLabel">Confirmation de votre commande</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form id="payment-vehicle-picture-form" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-body">
                <p class="mb-2 h6">
                    Thank you for choosing Bank Transfer (Virement) as your payment method.
                    To facilitate the processing of your transaction, please follow these steps:
                </p>

                <h5 class="text-primary mb-2">1. Make the Transfer:</h5>
                <p class="h6" style="line-height: 1.4;">
                    IBAN: FR7630004008310001037231481
                    <br>
                    BIC: BNPAFRPPXXX
                    <br>
                    Account Holder: DadycarSAS
                    <br>
                    Price: 250 € 
                </p>
             
                <h5 class="text-primary mb-2">2. Upload Confirmation:</h5>
                <p class="h6 mb-2">
                    After completing the transfer, kindly upload a confirmation of the transaction.
                    <br>
                    This could be a screenshot or a scanned copy of the payment receipt.  
                </p>
                <label for="payment-picture" class="h6">Payment picture</label>
                <input type="file" id="payment-picture" name="payment_picture" class="form-control" required>
                <p class="text-warning">Maximum size of file is 2048 octet</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __("client.close") }}</button>
                <button type="submit" class="btn btn-primary">{{ __("client.confirm") }}</button>
            </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
 
<script>
    function displaySearchForm() {
        $("#search-form").show();
        $('#display-search-form-btn').hide();
    }

    function paymentVehicle(route, routePicture) {
        $("#payment-vehicle-form").attr("action", route);
        $("#payment-vehicle-picture-form").attr("action", routePicture);
        $('#payment-btn').trigger('click');
    }
    function deleteVehicle(route) {
        $("#delete-vehicle-form").attr("action", route);
        $('#delete-btn').trigger('click');
    }

    function handleSubmitMatriculationForm() {
        const matriculation = document.getElementById('matriculation').value.toUpperCase();
        const matriculationError = document.getElementById('matriculationError');
        const pattern = /^[A-Z]{2}\d{3}[A-Z]{2}$/;

        matriculationError.textContent = '';

        console.log(matriculation)
        if (pattern.test(matriculation)) {
            const url = '{{ env('DADYCAR_URL') }}' + '/api/v1/sivin/search/number-plate?number_plate=' + matriculation;

            fetch(url).then(function(response) {
                if(response.status === 200){
                    return response.json();
                }
                if(response.status === 404){
                    matriculationError.textContent = "Désolé, nous avons pas trouvé votre plaque d'immatriculation . Veuillez réessayer ou utiliser la fonctionnalité de recherche par marques.";
                    return false;
                }
                if(response.status !== 200 && response.status !== 404) {
                    throw new Error(response.status);
                    return;
                }
            }).then(function(response){
                if(response === false) {
                    return;
                }
                const data = response.data;

                document.getElementById("vehicle-id").value = data['id'];
                document.getElementById("search-method").value = 'M';
                document.getElementById("vehicle-numberplate").value = data['number_plate'];
                document.getElementById("vehicle-type").value = data['vehicle_type'];
                document.getElementById("vehicle-mark").value = data['mark'];
                document.getElementById("vehicle-model").value = data['model'];
                document.getElementById("construction-year").value = data['first_circulation'];
                document.getElementById("vehicle-version").value = data['version'];
                document.getElementById("engine-type").value = data['energy'];

                document.getElementById("construction-year-warning").style.display = "none";
                document.getElementById("construction-year").readOnly = true;
                document.getElementById("vehicle-numberplate").readOnly = true;
                document.getElementById("vehicle-power").readOnly = false;
                document.getElementById("store-vehicle-button").click();
            }).catch(function() {
                matriculationError.textContent = "Quelque chose s'est mal passé, veuillez réessayer plus tard, ou utilisez la méthode de recherche avec les marques.";
            });
        } else {
            matriculationError.textContent = "Le format de votre plaque d'immatriculation est invalide";
        }
    }

    function handleSubmit() {
        vehicle_id = document.getElementById("vehicles").value;

        dadycar_url = '{{ env('DADYCAR_URL') }}'
        var url = dadycar_url + '/api/v1/vehicles/' + vehicle_id

        fetch(url).then(function(response) {
            return response.json();
        }).then(function(data) {
            const thisYear = new Date().getFullYear();
            const year_of_constr_from = data['year_of_constr_from'] ? data['year_of_constr_from'].toString().substr(0, 4) : 1950;
            const year_of_constr_to = data['year_of_constr_to'] ? data['year_of_constr_to'].toString().substr(0, 4) : thisYear;
            const minDate = new Date(year_of_constr_from + '-01-01');
            const maxDate = year_of_constr_to === thisYear ? new Date() : new Date(year_of_constr_to + '-12-31');

            console.log(data['motor_type'])
            document.getElementById("vehicle-id").value = vehicle_id;
            document.getElementById("search-method").value = 'S';
            document.getElementById("vehicle-type").value = data['car_type'];
            document.getElementById("vehicle-mark").value = data['manu_name'];
            document.getElementById("vehicle-model").value = data['model_name'];
            document.getElementById("vehicle-power").value = data['power_hp_from'];
            document.getElementById("construction-year").setAttribute("min", minDate.toISOString().split("T")[0]);
            document.getElementById("construction-year").setAttribute("max", maxDate.toISOString().split("T")[0]);
            document.getElementById("construction-year-warning").textContent = 'La date doit etre entre ' + year_of_constr_from + ' et ' + year_of_constr_to;
            document.getElementById("engine-type").value = data['motor_type'];
            document.getElementById("vehicle-version").value = data['type_name'];

            document.getElementById("construction-year-warning").style.display = "block";
            document.getElementById("construction-year").readOnly = false;
            document.getElementById("vehicle-numberplate").readOnly = false;
            document.getElementById("vehicle-power").readOnly = true;
            document.getElementById("store-vehicle-button").click();

        }).catch(function(err) {
            return;
        });
    }

    function getModels(mark_id) {
        models = document.getElementById("models");
        vehicles = document.getElementById("vehicles");

        if (models.options.length > 0) {
            removeOptions(models);
        }
        if (vehicles.options.length > 0) {
            removeOptions(models);
        }

        dadycar_url = '{{ env('DADYCAR_URL') }}'
        var url = dadycar_url + '/api/v1/models/filter/' + mark_id

        fetch(url).then(function(response) {
            return response.json();
        }).then(function(data) {
            var opt = document.createElement("option");
            opt.value = '';
            opt.textContent = 'Sélectionner';
            models.appendChild(opt);
            for (var i = 0; i < data.length; i++) {
                var opt = document.createElement("option");
                opt.value = data[i].id;
                opt.textContent = data[i].name;
                models.appendChild(opt);
            }
        }).catch(function(err) {
            return;
        });
    }

    function getVehicles(model_id) {
        vehicles = document.getElementById("vehicles");

        if (vehicles.options.length > 0) {
            removeOptions(vehicles);
        }

        dadycar_url = '{{ env('DADYCAR_URL') }}'
        var url = dadycar_url + '/api/v1/vehicles/filter/' + model_id

        fetch(url).then(function(response) {
            return response.json();
        }).then(function(data) {
            var opt = document.createElement("option");
            opt.value = '';
            opt.textContent = 'Sélectionner';
            vehicles.appendChild(opt);
            for (var i = 0; i < data.length; i++) {
                var opt = document.createElement("option");
                opt.value = data[i].id;
                opt.textContent = data[i].name;
                vehicles.appendChild(opt);
            }
        }).catch(function(err) {
            return;
        });
    }

    function removeOptions(models) {
        for (i = models.options.length - 1; i >= 0; i--) {
            models.remove(i);
        }
    }

    $(document).ready(function() {
        $("#marks").select2();
        $("#models").select2();
        $("#vehicles").select2();
    });

</script>

@endsection