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

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

<div class="row py-3">
    <div class="col-md-8">
        <h4 class="fw-bold text-dark">{{ __('client.vendors') }}</h4>
        <p>Gérez sans effort votre garage sur la page Garages. Ajoutez des garages, surveillez vos activités</p>
    </div>
    <div class="col-md text-md-end">
        <a href="{{ route('fleet.vendor.search') }}" class="border-0 p-3 text-white bg-main-blue rounded">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_233_13057)">
                    <path d="M9.99996 18.3332C14.6023 18.3332 18.3333 14.6022 18.3333 9.99984C18.3333 5.39746 14.6023 1.6665 9.99996 1.6665C5.39759 1.6665 1.66663 5.39746 1.66663 9.99984C1.66663 14.6022 5.39759 18.3332 9.99996 18.3332Z" stroke="white" stroke-width="1.5" />
                    <path d="M12.5 10H10M10 10H7.5M10 10V7.5M10 10V12.5" stroke="white" stroke-width="1.5" stroke-linecap="round" />
                </g>
                <defs>
                    <clipPath id="clip0_233_13057">
                        <rect width="20" height="20" fill="white" />
                    </clipPath>
                </defs>
            </svg>
            &nbsp;
            {{ __('client.add') }}
        </a>
    </div>
</div>

@include('v2.fleet.partials.offcanvas-right', [
    'title' => __('client.add_new_vendor'),
    'form' => view('v2.fleet.vendors.forms.create')->render()
    ])

<div class="form-group w-25">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                @include('v2.fleet.partials.icons.search')
              </span>        
        </div>
        <input type="text" class="form-control" id="searchInput" placeholder="{{ __('client.search') }}">
    </div>
</div>

<div class="col-12">
    @include('client.responses.messages')
    <div id="table-layout" class="table-responsive">
        <table class="table table-borderless" style="border-collapse: separate;border-spacing:0 10px;">
            <thead>
                <tr class="text-center">
                    <th>{{ __('client.name') }}</th>
                    <th>{{ __('client.email') }}</th>
                    <th>{{ __('client.phone') }}</th>
                    <th>{{ __('client.address') }}</th>
                    {{-- <th>{{ __('client.actions') }}</th> --}}
                </tr>
            </thead>
            <tbody class="table-border-bottom-0">
                @if ($vendors)
                @foreach ($vendors as $vendor)
                <tr class="text-center rounded bg-white">
                    <td>{{ $vendor['name'] }}</td>
                    <td>{{ $vendor['email'] }}</td>
                    <td>{{ $vendor['phone_number'] }}</td>
                    <td>{{ $vendor['address'] }}</td>
                    {{-- <td>
                        <div class="d-flex justify-content-center">
                            <a class="border-0 p-2 text-dark bg-secondary-green rounded d-flex" href="{{ route('fleet.vendor.edit', $vendor->id) }}">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M22 10.5V12C22 16.714 22 19.071 20.535 20.535C19.072 22 16.714 22 12 22C7.286 22 4.929 22 3.464 20.535C2 19.072 2 16.714 2 12C2 7.286 2 4.929 3.464 3.464C4.93 2 7.286 2 12 2H13.5" stroke="#0F82EA" stroke-width="1.5" stroke-linecap="round"/>
                                    <path d="M16.6519 3.45512L17.3009 2.80612C17.8173 2.28988 18.5176 1.99991 19.2478 2C19.978 2.00009 20.6782 2.29024 21.1944 2.80662C21.7107 3.323 22.0007 4.0233 22.0006 4.75347C22.0005 5.48365 21.7103 6.18388 21.1939 6.70012L20.5439 7.34912C20.5439 7.34912 19.1659 7.26812 17.9499 6.05112C16.7329 4.83512 16.6519 3.45612 16.6519 3.45612L10.6869 9.42012C10.2829 9.82412 10.0809 10.0261 9.90694 10.2491C9.70194 10.5111 9.52694 10.7961 9.38294 11.0971C9.26194 11.3521 9.17194 11.6231 8.99094 12.1651L8.41194 13.9001M8.41194 13.9001L8.03794 15.0221C7.99395 15.153 7.98735 15.2935 8.01886 15.4279C8.05037 15.5623 8.11875 15.6853 8.21631 15.7829C8.31388 15.8806 8.43676 15.9491 8.57113 15.9808C8.7055 16.0124 8.84604 16.006 8.97694 15.9621L10.0999 15.5881M8.41194 13.9001L10.0999 15.5881M20.5449 7.34812L14.5799 13.3131C14.1759 13.7171 13.9739 13.9191 13.7509 14.0931C13.4881 14.2981 13.2038 14.4738 12.9029 14.6171C12.6479 14.7381 12.3769 14.8281 11.8349 15.0091L10.0999 15.5881" stroke="#0F82EA" stroke-width="1.5"/>
                                </svg>
                                <span class="px-1">{{ __('client.edit') }}</span>
                            </a>
                        </div>
                    </td> --}}
                </tr>
                @endforeach
                @endif
            </tbody>
        </table>
    </div>

    {{-- <div class="d-flex flex-row-reverse">
        {{ $vendors->links() }}
    </div> --}}
</div>

@include('v2.fleet.vendors.modals.delete')
@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({
            dropdownParent: $("#offcanvasRight"),
            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];
                }
            }
        });
    });

    function deleteVendor(route) {
        $("#delete-vendor-form").attr("action", route);
        $('#delete-btn').trigger('click');
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('searchInput');

        searchInput.addEventListener('input', function () {
            const filter = searchInput.value.toUpperCase();
            const tableRows = document.querySelectorAll('#table-layout tbody tr');

            tableRows.forEach(function (row) {
                let found = false;
                row.querySelectorAll('td').forEach(function (cell) {
                    const textValue = cell.textContent || cell.innerText;
                    if (textValue.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                });

                if (found) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    });
</script>
@endsection