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

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


@section('styles')
<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.search') }}" method="GET">
            @csrf
            <div class="card-body pt-0">
                @include('client.responses.messages')
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="query" class="form-label">Rechercher par nom ou par Email</label>
                        <div class="row">
                            <div class="col-10">
                                <input type="text" class="form-control" id="query" name="query" value="{{ $query }}" placeholder="Garage XXX" required minlength="2" maxlength="255">
                            </div>
                            <div class="col">
                                <button type="submit" class="btn btn-primary">Rechercher</button>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        @foreach($vendors as $vendor)
                            <div class="col-6 mb-4">
                                <Button class="btn w-100 text-start" type="button" data-bs-toggle="modal" id="link-btn" data-bs-target="#link-vendor" onclick="linkVendor('{{ route('fleet.vendor.link', $vendor['id']) }}')">
                                    <div class="card border border-blue">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-auto">
                                                    <img src="{{ asset('assets/images/logo.png') }}" alt="Garage picture" style="width: 150px">
                                                </div>
                                                <div class="col">
                                                    <h5 class="card-title">{{ $vendor['name'] }}</h5>
                                                    <small>Propriétaire</small>
                                                    <p>{{ $vendor['first_name'] . ' ' . $vendor['last_name'] }}</p>
                                                </div>
                                            </div>
                                            <div class="row mt-4">
                                                <div class="col">
                                                    <div class="row">
                                                        <div class="col-auto">
                                                            <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect x="0.49707" y="0.34375" width="57" height="57" rx="4" fill="#0F82EA"/>
                                                                <path d="M29.8877 20.012C28.7704 19.8235 27.6221 19.995 26.6086 20.5017C25.5952 21.0085 24.769 21.8243 24.2495 22.8313C23.73 23.8382 23.5441 24.9843 23.7185 26.1039C23.8929 27.2235 24.4187 28.2586 25.2199 29.0599C26.0212 29.8611 27.0563 30.3869 28.1759 30.5613C29.2955 30.7357 30.4416 30.5498 31.4485 30.0303C32.4555 29.5108 33.2713 28.6846 33.7781 27.6712C34.2848 26.6577 34.4563 25.5094 34.2678 24.3921" stroke="white" stroke-width="3" stroke-linecap="round"/>
                                                                <path d="M16.5283 34.5722C15.3759 31.6261 14.7471 28.4893 14.7471 25.536C14.7471 17.5257 21.1275 11.0312 28.9971 11.0312C36.8666 11.0312 43.2471 17.5257 43.2471 25.536C43.2471 33.4839 38.6995 42.7607 31.603 46.0756C30.7874 46.4575 29.8977 46.6555 28.9971 46.6555C28.0964 46.6555 27.2068 46.4575 26.3911 46.0756C24.1254 45.0175 22.1179 43.3503 20.4364 41.3125" stroke="white" stroke-width="3" stroke-linecap="round"/>
                                                            </svg> 
                                                        </div>
                                                        <div class="col">
                                                            <p class="fw-bold">Adresse</p>
                                                            <p>{{ $vendor['address'] }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </Button>    
                            </div>
                        @endforeach
                        @if ($is_searched)
                            <div class="col-12 text-center">
                                <a href="{{ route('fleet.vendor.create') }}" class="text-primary h5" style="text-decoration-line: underline">{{ __('client.add_new_vendor') }}</a>
                            </div>
                        @endif
                        <div class="mt-4 text-center">
                            <a href="{{ route('fleet.vendors') }}" class="btn btn-outline-primary btn-lg w-50">{{ __('client.cancel') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@include('v2.fleet.vendors.modals.link')
@endsection

@section('scripts')
<script>
    function linkVendor(route) {
        $("#link-vendor-form").attr("action", route);
    }
</script>
@endsection