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

@section('title')
{{ __('client.add_new_vendor') }}
@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') }}">
@endsection

@section('content')
<div class="card">
    <div class="card-header pb-2">
        <h1 class="fw-bold mt-3 h4">{{ __('client.add_new_vendor') }}</h1>
    </div>
    <div class="card-body">
        <form action="{{ route('fleet.vendor.store') }}" method="POST">
            @csrf
            <div class="card-body pt-0">
                @include('client.responses.messages')
                <div class="card border border-custom-blue rounded-0">
                    <div class="card-header">
                        <h5 class="fw-bold">{{ __('client.add_new_vendor') }}</h5>
                    </div>

                    <div class="card-body px-4">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Nom Garage</label>
                                    <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" placeholder="Nom Garage" required minlength="2" maxlength="255">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="first_name" class="form-label">{{ __('client.first_name') }}</label>
                                    <input type="text" class="form-control" id="first_name" name="first_name" placeholder="{{ __('client.first_name') }}" value="{{ old('first_name') }}" required minlength="2" maxlength="255">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="last_name" class="form-label">{{ __('client.last_name') }}</label>
                                    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="{{ __('client.last_name') }}" value="{{ old('last_name') }}" required minlength="2" maxlength="255">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label">{{ __('client.email') }}</label>
                                    <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="{{ __('client.email') }}" class="form-control" required minlength="3" maxlength="255">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="phone" class="form-label">{{ __('client.phone') }}</label>
                                    <input type="text" id="phone" name="phone_number" value="{{ old('phone_number') }}" placeholder="{{ __('client.phone') }}" class="form-control" required minlength="10" maxlength="10">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="rcs_number" class="form-label">RSC</label>
                                    <input type="text" class="form-control" id="rcs_number" name="rcs_number" placeholder="{{ __('client.number') . ' RSC' }}" value="{{ old('rcs_number') }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="siret_number" class="form-label">{{ __('client.siret') }}</label>
                                    <input type="text" class="form-control" id="siret_number" name="siret_number" placeholder="{{ __('client.siret_number') }}" value="{{ old('siret_number') }}">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="address" class="form-label">{{ __('client.address') }}</label>
                                    <select class="address-autocomplete form-control" required>
                                        @if (old('address'))
                                        <option value="0">{{ old('address') }}</option>
                                        @endif
                                    </select>
                                    <input type="text" id="address" name="address" value="{{ old('address') }}" class="form-control" hidden>
                                    <input type="text" id="lat" name="lat" value="{{ old('lat') }}" class="form-control" hidden>
                                    <input type="text" id="long" name="lng" value="{{ old('lng') }}" class="form-control" hidden>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="city" class="form-label">{{ __('client.city') }}</label>
                                    <input type="text" id="city" name="city" value="{{ old('city') }}" class="form-control" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="postal-code" class="form-label">{{ __('client.postal_code') }}</label>
                                    <input type="text" id="postal-code" name="postal_code" value="{{ old('postal_code') }}" class="form-control" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <div class="row gap-3">
                            <div class="col">
                                <a href="{{ route('fleet.vendors') }}" class="btn btn-outline-primary btn-xl w-100">{{ __('client.cancel') }}</a>
                            </div>
                            <div class="col">
                                <button type="submit" class="btn btn-primary btn-xl w-100">{{ __('client.save') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </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>
    $(document).ready(function() {
        $('.address-autocomplete').select2({
            placeholder: "Chercher l'adresse du garage"
            , 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