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

@section('title')
Demander un service
@endsection


@section('page-script')
@endsection

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/fleet/fleet-edit.css') }}">
<style>
    .img-size {
        height: 140px;
        width: 100%;
    }
    .bg-primary {
        color: #fff;
        background-color: #0F82EA!important;
        border: 1px solid #0F82EA!important;
    }
</style>
@endsection

@section('content')
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h1 class="fw-bold h4 text-dark">Demander un service</h1>
            <p>Demandez un service pour votre véhicule auprès d'une gamme des meilleurs garages</p>
        </div>

        <div class="card-body">
            <form action="{{ route('fleet.services.search') }}" method="GET">
                @csrf

                <input type="text" name="vendors_type" id="vendors-type-input" hidden>
                <div class="row">
                    <div class="col mt-2">
                        <div class="form-group">
                            <label for="vehicle">{{ __('client.vehicle') }}</label>
                            <select name="vehicle_id" id="vehicle" class="form-control" required>
                                <option value="">{{ __('client.select') }}</option>
                                @foreach($vehicles as $vehicle)
                                    <option value="{{ $vehicle->id }}" @if (($old_values['vehicle_id'] == $vehicle->id || $vehicleId == $vehicle->id)) selected @endif
                                        data-address="{{ $vehicle->site?->address }}" data-city="{{ $vehicle->site?->city }}" data-postal_code="{{ $vehicle->site?->postal_code }}" data-lat="{{ $vehicle->site?->lat }}" data-long="{{ $vehicle->site?->long }}">
                                        {{ $vehicle->numberplate }} - {{ $vehicle->mark . ' ' . $vehicle->model . ' ' . $vehicle->version }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col">
                        <label for="address" class="form-label">{{ __('client.address') }}</label>
                        <select id="address-autocomplete" class="address-autocomplete form-control" required>
                            @if ($old_values['address'])
                                <option value="0">{{ $old_values['address'] }}</option>
                            @endif
                        </select>
                        <input type="text" id="address" name="address" value="{{ $old_values['address'] }}" hidden>
                        <input type="text" id="city" name="city" value="{{ $old_values['city'] }}" hidden>
                        <input type="text" id="postal-code" name="postal_code" value="{{ $old_values['postal_code'] }}" hidden>
                        <input type="text" id="lat" name="lat" value="{{ $old_values['lat'] }}" hidden>
                        <input type="text" id="long" name="long" value="{{ $old_values['long'] }}" hidden>
                    </div>
                    <div class="col mt-2">
                        <div class="form-group">
                            <label for="service">Service</label>
                            <select name="service_id" id="service" class="form-control" required>
                                <option value="">{{ __('client.select') }}</option>
                                @foreach($services as $service)
                                    <option value="{{ $service['id'] }}" @if($old_values['service_id'] == $service['id']) selected @endif>{{ $service['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col mt-4">
                        <button type="submit" class="btn btn-primary mt-1 w-75">{{ __('client.search') }}</button>
                    </div>
                </div>
            </form>

            @include('client.responses.messages')

            @if($dadycarVendors)
                <div class="d-flex flex-row mt-4">
                    <div>
                        <div class="btn btn-secondary py-2" id="user-vendors-btn" onclick="showVendors('user')">Mes garages</div>
                    </div>
                    <div class="mx-4">
                        <div class="btn btn-secondary py-2" id="dadycar-vendors-btn" onclick="showVendors('dadycar')">Dady garages</div>
                    </div>
                </div>
                <div class="row mt-4" id="user-vendors" style="display: none">
                    @php $count = 0; @endphp
                    @foreach($vendors as $vendor)
                        @if ($count < 6)
                            <div class="col-6 mb-4">
                                @include('v2.fleet.services.components.vendor-card', ['vendor' => $vendor])
                            </div>
                        @else
                            <div class="col-6 mb-4 extra-vendor" style="display: none;">
                                @include('v2.fleet.services.components.vendor-card', ['vendor' => $vendor])
                            </div>
                        @endif
                        @php $count++; @endphp
                    @endforeach
                    @if ($count > 6)
                        <div class="text-center">
                            <button id="see-more-user-vendors" class="btn btn-primary mb-3">Voir tout</button>
                        </div>
                    @endif
                </div>
                <div class="row mt-4" id="dadycar-vendors" style="display: none">
                    @php $dadycarVendorsCount = 0; @endphp
                    @foreach($dadycarVendors as $vendor)
                        @if ($dadycarVendorsCount < 6)
                            <div class="col-6 mb-4">
                                @include('v2.fleet.services.components.vendor-card', ['vendor' => $vendor])
                            </div>
                        @else
                            <div class="col-6 mb-4 extra-dadycar-vendor" style="display: none;">
                                @include('v2.fleet.services.components.vendor-card', ['vendor' => $vendor])
                            </div>
                        @endif
                        @php $dadycarVendorsCount++; @endphp
                    @endforeach
                    @if ($dadycarVendorsCount > 6)
                        <div class="text-center">
                            <button id="see-more-dadycar-vendors" class="btn btn-primary mb-3">Voir tout</button>
                        </div>
                    @endif
                </div>
                @include('v2.fleet.services.modals.request-service')
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/i18n/fr.js"></script>

<script>
    $('#see-more-user-vendors').on('click', function() {
        $('.extra-vendor').show();
        $(this).hide();
    });
    $('#see-more-dadycar-vendors').on('click', function() {
        $('.extra-dadycar-vendor').show();
        $(this).hide();
    });
    document.addEventListener("DOMContentLoaded", function() {
        var today = new Date();
        today.setDate(today.getDate() + 2);
        var twoDaysLater = today.toISOString().split('T')[0];

        document.getElementById("date")?.setAttribute("min", twoDaysLater);
    });

    async function requestService(route, vendorName, vendorId, vendorLat, vendorLng) {
        const latAndLng = {
            latDeparture: {{ $old_values['lat'] ?? 0 }}, 
            lngDeparture: {{ $old_values['long'] ?? 0 }}, 
            latArrival: vendorLat, 
            lngArrival: vendorLng
        };

        const response = await calculeDistancesAndPrices(latAndLng, {{ $old_values['vehicle_id'] }});

        $('#conveying-checkbox').prop('checked', true);
        $('#coming-conveying-status').val(1);
        $("#request-service-form").attr("action", route);
        $("#vendor-name").text(vendorName);
        $("#vendor-id").val(vendorId);
        $("#conveying-price-value").val(response.forwardPrice);
        $("#conveying-price").text(response.forwardPrice*2);
        $('#request-service-btn').trigger('click');
    }

    document.getElementById('conveying-checkbox')?.addEventListener('change', function() {
        const price = $('#conveying-price-value').val();

        if (this.checked){
            $("#conveying-price").text(price*2);
            $('#coming-conveying-status').val(1);
        } else {
            $("#conveying-price").text(price);
            $('#coming-conveying-status').val(0);
        }
    });

    function chooseContact(id) {
        var e = document.getElementById(id + "-contact");
        var contact= e.options[e.selectedIndex];

        if(!contact.value) {
            return;
        }

        document.getElementById('contact-' + id).value = contact.value;

        if(contact.value == '-1') {
            document.getElementById(id + '-contact-div').style.display = 'block';
            document.getElementById(id + '-first-name-contact').value = null;
            document.getElementById(id + '-last-name-contact').value = null;
            document.getElementById(id + '-phone-contact').value = null;
            document.getElementById(id + '-email-contact').value = null;
        } else {
            document.getElementById(id + '-contact-div').style.display = 'none';
            document.getElementById('contact-' + id + '-type').value = contact.dataset.type;
            document.getElementById(id + '-first-name-contact').value = contact.dataset.first_name;
            document.getElementById(id + '-last-name-contact').value = contact.dataset.last_name;
            document.getElementById(id + '-phone-contact').value = contact.dataset.phone;
            document.getElementById(id + '-email-contact').value = contact.dataset.email;
        }
    }

    function calculeDistancesAndPrices(latAndLng, vehicleId) {
        url = '{{ route('client.address.distance-price', ":id") }}' + '/?departure_lat=' + latAndLng.latDeparture + '&departure_lng=' + latAndLng.lngDeparture + '&arrival_lat=' + latAndLng.latArrival + '&arrival_lng=' + latAndLng.lngArrival;
        url = url.replace(':id', vehicleId);
        return getFetchCall(url);
    }

    function getFetchCall(url) {
        return fetch(url).then(function(response) {
            return response.json();
        }).then(function(data) {
            return data;
        }).catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function showVendors(type) {
        const url = new URL(document.location.href);
        const params = new URLSearchParams(url.search);

        if (type === 'dadycar') {
            showDadycarvendors();
            updateURL('dadycar');
        } else {
            showUservendors();
            updateURL('user');
        }

        function updateURL(type) {
            if (!params.has('vendors_type')) {
                params.append('vendors_type', type);
            } else {
                params.set('vendors_type', type);
            }
            url.search = params.toString();
            history.pushState({ path: url.href }, '', url.href);
        }
    }

    function showDadycarvendors(){
        $('#dadycar-vendors').show();
        $('#user-vendors').hide();
        $('#dadycar-vendors-btn').addClass('btn-primary').removeClass('btn-secondary');
        $('#user-vendors-btn').removeClass('btn-primary').addClass('btn-secondary');
        $('#vendors-type-input').val('dadycar');
    }

    function showUservendors(){
        $('#dadycar-vendors').hide();
        $('#user-vendors').show();
        $('#user-vendors-btn').addClass('btn-primary').removeClass('btn-secondary');
        $('#dadycar-vendors-btn').removeClass('btn-primary').addClass('btn-secondary');
        $('#vendors-type-input').val('user');
    }


    $(document).ready(function() {
        const url = new URL(document.location.href);
        const params = new URLSearchParams(url.search);

        if (params.has('vendors_type') && params.get('vendors_type') === 'dadycar')
            showDadycarvendors();
        else 
            showUservendors();


        $("#vehicle").on( "change", function() {
            const addressData = $("#vehicle").find(":selected").data();

            document.getElementById('address').value = addressData?.address;
            document.getElementById('city').value = addressData?.city;
            document.getElementById('postal-code').value = addressData?.postal_code;
            document.getElementById('lat').value = addressData?.lat;
            document.getElementById('long').value = addressData?.long;
            $('#address-autocomplete').empty().append('<option value="' + addressData.address + '">' + addressData.address + '</option>').trigger('change');
        } );

        $('.address-autocomplete').select2({
            placeholder: "Votre adresse",
            minimumInputLength: 3,
            language: "fr",
            ajax: {
                url: 'https://api-adresse.data.gouv.fr/search/',
                data: function(params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function(response) {
                    features = response.features;
                    addresses = [];
                    for (let i = 0; i < response.features.length; i++) {
                        addresses.push({
                            'id': response.features[i].properties.id,
                            'text': response.features[i].properties.label,
                        })
                    }
                    return {
                        results: addresses
                    };
                },
                cache: true
            }
        }).on("change", function() {
            if (features) {
                const feature = features.find(e => e.properties.id === this.value);
                if (feature) {
                    document.getElementById('address').value = feature['properties']['label'];
                    document.getElementById('city').value = feature['properties']['city'];
                    document.getElementById('postal-code').value = feature['properties']['postcode'];
                    document.getElementById('lat').value = feature['geometry']['coordinates'][1];
                    document.getElementById('long').value = feature['geometry']['coordinates'][0];
                }
            }
        });
    });
</script>

@endsection