@extends('client/layouts/contentNavbarLayout')

@section('title')
    DADYCAR GARAGES
@endsection


@section('page-script')

@endsection

@section('content')
<h4 class="fw-bold py-3 mb-4">La list des DADYCAR garages</h4>
<div class="row">

    <div class="col-md-8">
        @if($vendors)
            @foreach ($vendors['data'] as $vendor )
                <div class="card mb-3" style="min-height: 200px">
                    <div class="row g-0">
                        <div class="col-md-4">
                            <img class="card-img card-img-left" src="{{ url('img/garage.jpg') }}" alt="Garage image" style="height: 200px">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-10">
                                        <h4 class="font-weight-bold" style="color: black; font-weight: 600">{{ $vendor['name'] }}</h4>
                                    </div>
                                    <div class="col-2 text-color menu-link gap-2">
                                        <div>{{ $vendor['reviews'] }}</div>
                                        <i class='bx bxs-star'></i>
                                    </div>
                                </div>
                                <p class="card-text">
                                    {{ $vendor['address'] }}
                                </p>

                                <hr class="dropdown-divider my-4">
                                <div class="row">
                                    <div class="col-6">
                                        {{-- <a href="{{ route('client.vendor.show', $vendor['id'] ) }}" class="btn btn-primary">Reserver</a> --}}
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#info">Reserver</button>
                                    </div>
                                    {{-- <div class="col-6">
                                    <p class="card-text"><small class="text-muted">Distance:3375.19 Kilomètres</small></p>
                                </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="mt-4 d-flex flex-row-reverse card pt-3 px-2">
                @include('client.pagination', ['route' => 'client.vendors', 'data' => $vendors])
            </div>
        @endif
    </div>

    <div class="col-md-4">
        <div class="card p-4 div-sticky">
            <div class="mb-2">
                <h3 class="text-color">Filters</h3>
                <p>Choisissez le véhicule ou la marque puis choisissez le service que vous souhaitez</p>
            </div>

            <label for="vehicle" class="h4">Véhicules</label>
            <select class="form-select" name="vehicle" id="vehicle">
                <option selected="">Sélectionner</option>
                @if($vehicles)
                    @foreach ($vehicles as $vehicle)
                        <option class="px-2" value="{{ $vehicle['id'] }}">{{ $vehicle->mark . ' ' . $vehicle->model . ' ' . $vehicle->version }}</option>
                    @endforeach
                @endif
            </select>

            <div class="divider">
                <div class="divider-text">OU</div>
            </div>

            <label for="mark" class="h4">Marque</label>
            <select class="form-select" name="mark" id="mark">
                <option selected="">Sélectionner</option>
                @if($marks)
                    @foreach ($marks as $mark)
                        <option class="px-2" value="{{ $mark['id'] }}">{{ $mark['name'] }}</option>
                    @endforeach
                @endif
            </select>

            <hr class="dropdown-divider mb-4 mt-5">

            <label for="service" class="h4">Service</label>
            <select class="form-select" name="service" id="service">
                <option selected="">Sélectionner</option>
                @if($services)
                    @foreach ($services as $service)
                        <option class="px-2" value="{{ $service['id'] }}">{{ $service['name'] }}</option>
                    @endforeach
                @endif
            </select>

            <div class="text-center mt-4">
                {{-- <button class="btn btn-primary">Appliquer</button> --}}
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#info">Appliquer</button>
            </div>
        </div>
    </div>

<div class="modal fade" id="info" tabindex="-1" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel1">Information..</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p class="h5">
                Cette fonctionnalité sera mise en service prochainement, vous recevrez un email dès qu'elle sera disponible.
            </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __("client.close") }}</button>
        </div>
      </div>
    </div>
</div>
</div>
@endsection

@section('scripts')

@endsection