@extends('client/layouts/contentNavbarLayout')

@section('title')
{{ __('client.edit_driver') }}
@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')
<h4 class="fw-bold py-3 mb-4">{{ __('client.edit_driver') }}</h4>


<div class="card mb-5">
    @include('client.responses.messages')

    <form action="{{ route('client.driver.update', $user->id) }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="card-body px-4">
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="first-name" class="form-label">{{ __('client.first_name') }}</label>
                    <input type="text" id="first-name" name="first_name" value="{{ $user->first_name }}" placeholder="{{ __('client.first_name') }}" class="form-control" required minlength="2" maxlength="255">
                </div>
                <div class="col mb-4">
                    <label for="last-name" class="form-label">{{ __('client.last_name') }}</label>
                    <input type="text" id="last-name" name="last_name" value="{{ $user->last_name }}" placeholder="{{ __('client.last_name') }}" class="form-control" required minlength="2" maxlength="255">
                </div>
            </div>
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="title" class="form-label">{{ __('client.title') }}</label>
                    <input type="text" id="title" name="title" value="{{ $user->driver?->title }}" placeholder="{{ __('client.title') }}" class="form-control" required minlength="2" maxlength="255">
                </div>
                <div class="col mb-4">
                    <label for="phone" class="form-label">{{ __('client.phone') }}</label>
                    <input type="text" id="phone" name="phone" value="{{ $user->phone }}" placeholder="{{ __('client.phone') }}" class="form-control" required minlength="10" maxlength="10">
                </div>
            </div>
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="email" class="form-label">{{ __('client.email') }}</label>
                    <input type="email" id="email" name="email" value="{{ $user->email }}" placeholder="{{ __('client.email') }}" class="form-control" required minlength="2" maxlength="255">
                </div>
                <div class="col mb-4">
                    <label for="password" class="form-label">{{ __('client.password') }}</label>
                    <input type="password" id="password" name="password" placeholder="{{ __('client.password') }}" class="form-control" minlength="8" maxlength="255">
                </div>
            </div>
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="sites" class="form-label">{{ __('client.sites') }}</label>
                    <select name="sites[]" class="form-control sites-select" data-dropup-auto="false" data-live-search="true" size="10" multiple required>
                        @if ($user->driver?->driverSites)
                            @foreach($sites->whereIn('id', $user->driver?->driverSites->pluck('site_id')) as $site)
                                <option value="{{$site->id}}" selected>{{$site->name}}</option>
                            @endforeach
                            @foreach($sites->whereNotIn('id', $user->driver?->driverSites->pluck('site_id')) as $site)
                                <option value="{{$site->id}}">{{$site->name}}</option>
                            @endforeach
                        @else
                            @foreach($sites as $site)
                                <option value="{{$site->id}}">{{$site->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="siren" class="form-label">{{ __('client.address') }}</label>
                    <select class="address-autocomplete form-control" required>
                        @if ($user->address)
                        <option value="0">{{ $user->address }}</option>
                        @endif
                    </select>
                    <input type="text" id="address" name="address" value="{{ $user->address }}" class="form-control" hidden>
                    <input type="text" id="lat" name="lat" value="{{ $user->lat }}" class="form-control" hidden>
                    <input type="text" id="long" name="long" value="{{ $user->long }}" class="form-control" hidden>
                </div>
            </div>
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="siren" class="form-label">{{ __('client.city') }}</label>
                    <input type="text" id="city" name="city" value="{{ $user->city }}" class="form-control" readonly>
                </div>
                <div class="col mb-4">
                    <label for="siret" class="form-label">{{ __('client.postal_code') }}</label>
                    <input type="text" id="postal-code" name="postal_code" value="{{ $user->postal_code }}" class="form-control" readonly>
                </div>
            </div>
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="driver_license_number" class="form-label">{{ __('client.driver_license_number') }}</label>
                    <input type="text" id="driver_license_number" name="driver_license_number" value="{{ $user->driver?->driver_license_number }}" placeholder="{{ __('client.driver_license_number') }}" class="form-control" minlength="12" maxlength="12">
                </div>
                <div class="col mb-4">
                    <label for="license-categories" class="form-label">{{ __('client.license_categories') }}</label>
                    <select name="license_categories[]" class="form-control license-categories-select" data-dropup-auto="false" data-live-search="true" multiple>
                        @if ($user->driver?->driverLicenseCategories)
                            @foreach($license_categories->whereIn('id', $user->driver?->driverLicenseCategories->pluck('license_category_id')) as $license_category)
                                <option value="{{$license_category->id}}" selected>{{$license_category->category}}</option>
                            @endforeach
                            @foreach($license_categories->whereNotIn('id', $user->driver?->driverLicenseCategories->pluck('license_category_id')) as $license_category)
                                <option value="{{$license_category->id}}">{{$license_category->category}}</option>
                            @endforeach
                        @else
                            @foreach($license_categories as $license_category)
                                <option value="{{$license_category->id}}">{{$license_category->category}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="issue_date" class="form-label">{{ __('client.issue_date') }}</label>
                    <input type="date" id="issue_date" name="driving_license_issue_date" value="{{ $user->driver?->driving_license_issue_date }}" placeholder="{{ __('client.issue_date') }}" class="form-control">
                </div>
                <div class="col mb-4">
                    <label for="issue_place" class="form-label">{{ __('client.issue_place') }}</label>
                    <input type="text" id="issue_place" name="driving_license_issue_place" value="{{ $user->driver?->driving_license_issue_place }}" placeholder="{{ __('client.issue_place') }}" class="form-control" minlength="3" maxlength="255">
                </div>
            </div>
            <div class="row g-2 gap-3">
                <div class="col mb-4">
                    <label for="driver_license_picture" class="form-label">{{ __('client.driver_license_picture') }}</label>
                    <div class="row">
                        <div class="col-lg-8 mb-2 mb-lg-0">
                            <input type="file" id="driver_license_picture" name="driver_license_picture" class="form-control">
                        </div>
                        @if ($user->driver?->driver_license_picture)
                            <div class="col-lg">
                                <a class="btn btn-primary" href="{{ asset($user->driver?->driver_license_picture ) }}" target="_blank">{{ __('client.consult') }}</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer text-end">
            <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
        </div>
    </form>
</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() {
        $(document).ready(function() {
            $('.sites-select').select2({
                placeholder: "Sélectionnez un ou plusieurs sites",
            });
        });
        $(document).ready(function() {
            $('.license-categories-select').select2({
                placeholder: "Sélectionnez un ou plusieurs catégories de permis de conduire",
            });
        });
        $('.address-autocomplete').select2({
            placeholder: "Chercher l'adresse du conducteur"
            , 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