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

@section('title')
Demander un service
@endsection


@section('page-script')
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('css/fleet/fleet-edit.css') }}">
@endsection

@section('content')
<div class="col-12">
    <div class="card">
        <div class="card-header text-center">
            <h1 class="fw-bold h4 text-dark">Demender un service</h1>
            <p>Demandez un service pour votre véhicule auprès d'une gamme des meilleurs garages</p>
        </div>

        <form action="{{ route('fleet.service.booking', $vehicle->id) }}" method="POST">
            @csrf

            <div class="card-body">
                <input type="text" name="service_id" value="{{ $service['id'] }}" hidden>
                <input type="text" name="vendor_id" value="{{ $vendor['id'] }}" hidden>
                <div class="row">
                    @foreach ($service['subServices'] as $subService)
                        <div class="col-4 p-3">
                            <div class="card" style="min-height: 180px">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-11">
                                            <h5 class="card-title">{{ $subService['name'] }}</h5>
                                            <ul>
                                                @foreach ($subService['options'] as $option)
                                                <li>{{ $option['name'] }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <div class="col-1">
                                            <input class="form-check-input" type="radio" value="{{ $subService['id'] }}" name="sub_service_id">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="p-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="form-control">
                                <label for="note" class="form-label">Commentaire</label>
                                <textarea name="note" id="note" class="form-control" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex gap-4 mt-4 w-100 justify-content-end">
                    <a class="btn btn-outline-primary rounded-pill text-primary btn-lg w-25" href="{{ route('fleet.service.create') }}">Annuler</a>
                    <button type="button" class="btn btn-primary btn-lg rounded-pill w-25">Demender un service</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')

@endsection