@extends('layouts.base')

@section('title')
    Senecartours - Réservations
@endsection

@push('css')
<link href="{{ asset('admin/assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />
@endpush

@section('content')

        <div class="row">
            <div class="col-xl-6">
                <div class="card">
                    <div class="card-body">

                        <h4 class="header-title mb-3">Réservation</h4>

                        <form enctype="multipart/form-data" method="POST" action="{{URL::Route('reservation.store')}}">
                            @csrf
                            <div id="progressbarwizard">

                                <ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-3">
                                    <li class="nav-item">
                                        <a href="#account-2" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
                                            <i class="mdi mdi-account-circle me-1"></i>
                                            <span class="d-none d-sm-inline">Réservation</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#profile-tab-2" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
                                            <i class="mdi mdi-face-profile me-1"></i>
                                            <span class="d-none d-sm-inline">Profil</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#finish-2" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
                                            <i class="mdi mdi-checkbox-marked-circle-outline me-1"></i>
                                            <span class="d-none d-sm-inline">Terminé</span>
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content b-0 mb-0 pt-0">

                                    <div id="bar" class="progress mb-3" style="height: 7px;">
                                        <div class="bar progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
                                    </div>

                                    <div class="tab-pane" id="account-2">

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <label class="col-md-3 col-form-label" for="type_reservation"><b>Type de Réservation:</b></label>
                                                    <div class="col-md-9">
                                                        <input type="hidden" id="vehicule_id" name="vehicule_id" value="{{$vehicule->id}}" class="form-control" />
                                                        <select  name="type_reservation" id="type_reservation" class="form-control">
                                                            <option value="">Selectionner</option>
                                                            @foreach (TypeReservations as $key => $value)
                                                                <option value="{{ $key }}">{{ $value }}</option>
                                                            @endforeach
                                                        </select>
                                                        @if ($errors->has('type_reservation'))
                                                            <span class="text-danger">{{ $errors->first('type_reservation') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <label class="col-md-3 col-form-label" for="prix"><b>Prix de la réservation:</b></label>
                                                    <div class="col-md-9">
                                                        <input type="text" id="prix" name="prix" class="form-control" readonly />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3" >
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="date_debut"> Date début</label>
                                                        <input type="datetime-local" id="date_debut" name="date_debut" class="form-control" {{old('date_debut')}}>
                                                        @if ($errors->has('date_debut'))
                                                            <span class="text-danger">{{ $errors->first('date_debut') }}</span>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="date_retour"> Date retour</label>
                                                        <input type="datetime-local" id="date_retour" name="date_retour" class="form-control" {{old('date_retour')}}>
                                                        @if ($errors->has('date_retour'))
                                                            <span class="text-danger">{{ $errors->first('date_retour') }}</span>
                                                        @endif
                                                    </div>
                                                     <span id="errorDate" class="text-danger"></span>
                                                </div>
                                            </div> <!-- end col -->
                                        </div> <!-- end row -->

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3" >
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="lieu"> Lieu de mise à disposition</label>
                                                        <input type="text" id="lieu" name="lieu" class="form-control" {{old('lieu')}}>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="mode_reglement"> Mode de réglement</label>
                                                        <select  name="mode_reglement" class="form-control" {{old('mode_reglement')}}>
                                                            <option value="" selected="selected">Mode de réglement</option>
                                                            @foreach (ModePayments as $value)
                                                                <option value="{{ $value }}">{{ $value }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" id="view_aller_retour">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <label class="col-md-3 col-form-label" for="aller_retour"><b>Avec Aller/Retour :</b>
                                                        <input type="checkbox" id="aller_retour" name="aller_retour"  {{old('aller_retour')}}>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="aerocab1">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row mb-3">
                                                        <div class="col-md-6">
                                                                <label class="form-label" for="point_depart"> Point de départ:</label>
                                                            <input type="text" id="point_depart" name="point_depart" class="form-control" {{old('point_depart')}}>
                                                        </div>
                                                        <div class="col-md-6">
                                                                <label class="form-label" for="point_arrive"> Point de d'arrivée:</label>
                                                            <input type="text" id="point_arrive" name="point_arrive" class="form-control" {{old('point_arrive')}}>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row mb-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label" for="nbr_valises"> Nombre de valises:</label>
                                                            <input type="number" id="nbr_valises" name="nbr_valises"  {{old('nbr_valises')}} class="form-control" >
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label" for="nbre_places"> Nombre de Place(s):</label>
                                                            <input type="number" id="nbre_places" name="nbre_places" class="form-control" {{old('nbr_valises')}} >
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row mb-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label" for="trajet_id">Trajet</label>
                                                            <select  name="trajet_id"  id="trajet_id" class="form-control" {{old('trajet_id')}} >
                                                                <option value="" selected="selected">Trajet</option>
                                                                @foreach ($trajets as $value)
                                                                    <option value="{{ $value->id }}">{{ $value->libelle }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                    <div class="tab-pane" id="profile-tab-2">

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <label class="col-md-3 col-form-label" for="is_chauffeur"><b>Avec chauffeur :</b>
                                                        <input type="checkbox" id="is_chauffeur" name="is_chauffeur"  {{old('is_chauffeur')}}/>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="first_name"> Prénom</label>
                                                        <input type="text" id="first_name" name="first_name" class="form-control" {{old('first_name')}}>
                                                        @if ($errors->has('first_name'))
                                                            <span class="text-danger">{{ $errors->first('first_name') }}</span>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="last_name"> Nom</label>
                                                        <input type="text" id="last_name" name="last_name" class="form-control" {{old('last_name')}}>
                                                        @if ($errors->has('last_name'))
                                                            <span class="text-danger">{{ $errors->first('last_name') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="email">Email</label>
                                                        <input type="email" id="email" name="email" class="form-control" {{old('email')}}>
                                                        @if ($errors->has('email'))
                                                            <span class="text-danger">{{ $errors->first('email') }}</span>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="phone">Téléphone</label>
                                                        <input type="text" id="phone" name="phone" class="form-control" {{old('phone')}}>
                                                        @if ($errors->has('phone'))
                                                            <span class="text-danger">{{ $errors->first('phone') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="birth_date">Date de naissance</label>
                                                        <input type="date" id="birth_date" name="birth_date" class="form-control" {{old('birth_date')}}>
                                                        @if ($errors->has('birth_date'))
                                                            <span class="text-danger">{{ $errors->first('birth_date') }}</span>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="adresse">Adresse</label>
                                                        <input type="text" id="adresse" name="adresse" class="form-control" {{old('adresse')}}>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" id="permis">
                                            <div class="col-12">
                                                <div class="row mb-3" >
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="numero_permis">Numéro permis</label>
                                                        <input type="text" id="numero_permis" name="numero_permis" class="form-control" {{old('numero_permis')}}>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="date_permis">Date permis</label>
                                                        <input type="date" id="date_permis" name="date_permis" class="form-control" {{old('date_permis')}}>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" id="aerocab2">
                                            <div class="col-12">
                                                <div class="row mb-3" >
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="compagnie">Compagnie</label>
                                                        <input type="text" id="compagnie" name="compagnie" class="form-control" {{old('compagnie')}}>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="numero_vol">Numéro de vol</label>
                                                        <input type="date" id="numero_vol" name="numero_vol" class="form-control" {{old('numero_vol')}}>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                                {{-- <div class="row">
                                                    <div class="col-12">
                                                        <div class="text-center">
                                                            <div class="mb-3">
                                                                <div class="form-check d-inline-block">
                                                                    <input type="checkbox" class="form-check-input" id="compte_id">
                                                                    <label class="form-check-label" for="compte_id">Utilisez mes informations pour creer un compte</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row mb-3" id="password_compte">
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="password">Mot de passe</label>
                                                        <input type="password" id="password" name="password" class="form-control" >
                                                        @if ($errors->has('password'))
                                                            <span class="text-danger">{{ $errors->first('password') }}</span>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" for="password-password_confirmation">Confirmation</label>
                                                        <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" >
                                                        @if ($errors->has('password_confirmation'))
                                                            <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                                        @endif
                                                    </div>
                                                </div> --}}
                                    </div>

                                    <div class="tab-pane" id="finish-2">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="text-center">
                                                    <h2 class="mt-0"><i class="mdi mdi-check-all"></i></h2>
                                                    <h3 class="mt-0">Validation !</h3>

                                                    {{-- <p class="w-75 mb-2 mx-auto">Votre reservation est bien pris en compte.</p> --}}

                                                    <div class="mb-3">
                                                        <div class="form-check d-inline-block">
                                                            <input type="checkbox" class="form-check-input" id="condition" name="condition" required>
                                                            <label class="form-check-label" for="condition">Je suis d'accord avec les termes et conditions</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <!-- end col -->
                                            <button type="submit" class="btn btn-success mb-3 ml-20 mr-20" id="save"> Enregistrer</button>
                                        </div> <!-- end row -->
                                    </div>

                                    <ul class="list-inline mb-0 wizard">
                                        <li class="previous list-inline-item">
                                            <a href="javascript: void(0);" class="btn btn-secondary" type="button">Précédent</a>
                                        </li>
                                        <li class="next list-inline-item float-end">
                                            <a href="javascript: void(0);" class="btn btn-secondary" type="button">Suivant</a>
                                        </li>
                                    </ul>

                                </div> <!-- tab-content -->
                            </div> <!-- end #progressbarwizard-->
                        </form>

                    </div> <!-- end card-body -->
                </div> <!-- end card-->
            </div> <!-- end col -->

            <div class="col-xl-6" id="id_voiture">
                <div class="card">
                    <div class="card-body">

                        <h4 class="header-title mb-3"> VOTRE CHOIX </h4>
                        <div id="rootwizard">
                            <ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-3">
                                <li class="nav-item" data-target-form="#accountForm">
                                    <a href="#first" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
                                        <i class="mdi mdi-account-circle me-1"></i>
                                        <span class="d-none d-sm-inline">Voiture</span>
                                    </a>
                                </li>
                                <li class="nav-item" data-target-form="#profileForm">
                                    <a href="#second" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
                                        <i class="mdi mdi-face-profile me-1"></i>
                                        <span class="d-none d-sm-inline">Détails</span>
                                    </a>
                                </li>

                            </ul>

                            <div class="tab-content mb-0 b-0 pt-0">

                                <div class="tab-pane " id="first">
                                    <div class="col-lg-12">
                                        <img class="img-fluid" src="{{ asset('storage/' . $vehicule->image) }}" width="300" height="300" alt="{{ $vehicule->libelle }}">
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="second">

                                    <div class="opening_hour_widgets p30 bdr_none pl0 pr0">
                                        <div class="wrapper">
                                            <h4 class="title">{{__('messages.overview')}}</h4>
                                            <ul class="list-group">
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Fabriquant</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->modele->libelle }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Modele</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->modele->libelle }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Couleur</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->couleur }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Type de véhicule</div>
                                                    </div>
                                                    <span class="schedule">4x4</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Transmission</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->type_transmission }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Année</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->annee }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Nombre de Places</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->places }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Type de carburant</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->type_carburant }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Nombre de Portes</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->portes }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Nombre de Cylindres</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->cylindres }}</span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="me-auto">
                                                        <div class="day">Confort</div>
                                                    </div>
                                                    <span class="schedule">{{ $vehicule->confort }}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>

                            </div> <!-- tab-content -->
                        </div> <!-- end #rootwizard-->

                    </div> <!-- end card-body -->
                </div> <!-- end card-->
            </div> <!-- end col -->
        </div>
        <!-- end row -->

    @push('scripts')
 <!-- Vendor js -->
    <script src="{{ asset('js/customs/home.js') }}"></script>
    <script src="{{ asset('admin/assets/libs/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js')}}"></script>
    <script src="{{ asset('admin/assets/js/pages/form-wizard.init.js')}}"></script>
    <script>
        var vehicule=