@extends('main.main_back')
@section('style-up')
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet">      
    <link rel="stylesheet" href="{{ asset('css/jquery-ui.min.css') }}">
@endsection
@section('title')
    Ajouter un voyage
@endsection

@section('pagination')
    Voyage
@endsection

@section('content')
<div class="row page-titles">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('get.backend.list.travel') }}">Liste</a></li>
        <li class="breadcrumb-item active"><a href="javascript:void(0)">Ajouter un voyage </a></li>
    </ol>
</div>
<div class="d-flex align-items-center mb-4 flex-wrap justify-content-between">
    <a href="javascript:voiud(0);">
        <div class="card p-3 me-2 mb-0 filter">
            <i class="flaticon-381-transfer"></i>
        </div>
    </a>	
    <a class="btn btn-primary btn-sm" href="{{ route('get.backend.list.travel') }}">
        Liste
    </a>
</div>
<!-- row -->
<div class="row">
    <!-- --column-- -->
    <div class="col-xl-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Enregistrements des informations</h4>
            </div>
            <div class="card-body">
                <div class="basic-form">
                    <form id="add_travel" method="post" action="{{ route('post.backend.add.travel') }}" onsubmit="SendDataAnimation(event,'add_travel')">
                        <div class="row">
                            <div class="col-sm-9 mb-3">
                                <label class="form-label">Passager (Nom ou No Téléphone)</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="MMMR">
                                <input type="hidden" class="form-control" id="user" name="user">
                            </div>
                            <div class="col-sm-3 mb-3">
                                <label class="form-label">CliQuez dessus pour ajouter un passager</label>
                                <a class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal_add_passenger" href="javascript:void(0);">Nouveau passager </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-5 mb-3">
                                <label class="form-label">Bus</label>
                                <select class="form-control select2" name="bus" onchange="getPlaceByBus(this.value)">
                                    <option value="">Selectionner un bus</option>
                                    @if(isset($bus) && COUNT($bus) > 0)
                                        @foreach ($bus as $key => $value)
                                            <option value="{{ $value->id }}">
                                                {{ $value->bus_number }} / {{ $value->bus_brand }} / {{ $value->bus_model }} 
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-sm-5 mb-3">
                                <label class="form-label">Trajet</label>
                                <select class="form-control select2" name="trajet" onchange="getNumSiege(this.value)">
                                    <option value="">Selectionner un Trajet</option>
                                    @if(isset($trajets) && COUNT($trajets) > 0)
                                        @foreach ($trajets as $key => $value)
                                        @php
                                            $name = $value->tr_place_start. " - ".$value->tr_place_end;
                                        @endphp
                                            <option value="{{ $value->id }}">
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    @endif
                                    <option value="other">AUTRES</option>
                                </select>
                            </div>
                            <div class="col-sm-2 mb-3">
                                <label class="form-label">No Siège</label>
                                <select class="form-control select2" name="num_siege" id="select_num_siege">
                                    <option value="">0</option>
                                </select>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Prix En F CFA</label>
                                <input type="number" class="form-control" id="price" placeholder="3000">
                            </div>
                            <div class="col-sm-4 mb-3" id="destination_second" style="display:none">
                                <label class="form-label">Autres Destination</label>
                                <input type="text" class="form-control" id="destination_second" name="destination_second" placeholder="NYOKON">
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Type Ticket</label>
                                <select class="selectpicker nice-select default-select form-control wide mh-auto" name="type_ticket">
                                    <option value="CLASSIQUE">CLASSIQUE</option>
                                    <option value="VIP">VIP</option>
                                </select>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Date Depart</label>
                                <input type="datetime-local" class="form-control" name="time_depart" min="{{ date('Y-m-d H:i:s') }}" value="{{ date('Y-m-d H:i:s') }}">
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Date Arrivée</label>
                                <input type="datetime-local" class="form-control" name="time_arrived" min="{{ date('Y-m-d H:i:s') }}" value="{{ date('Y-m-d H:i:s') }}">
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Type de Voyage</label>
                                    <div class=" d-flex align-items-center justify-content-between pt-3">
                                        <div class="form-check custom-checkbox mb-3">
                                            <input type="radio" class="form-check-input" value="DISPONIBLE" id="customCheckBox1" name="status" checked>
                                            <label class="form-check-label" for="customCheckBox1">DISPONIBLE</label>
                                        </div>
                                        <div class="form-check custom-checkbox mb-3">
                                            <input type="radio" class="form-check-input" value="RESERVE" id="customCheckBox2" name="status">
                                            <label class="form-check-label" for="customCheckBox2">RESERVE</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Mode de Voyage</label>
                                    <div class="d-flex align-items-center justify-content-between pt-3">
                                        <div class="form-check custom-checkbox mb-3">
                                            <input type="radio" class="form-check-input" value="ALLER SIMPLE" id="customCheckBox3" name="mode" checked>
                                            <label class="form-check-label" for="customCheckBox3">ALLER SIMPLE</label>
                                        </div>
                                        <div class="form-check custom-checkbox mb-3">
                                            <input type="radio" class="form-check-input" value="ALLER ET RETOUR" id="customCheckBox4" name="mode">
                                            <label class="form-check-label" for="customCheckBox4">ALLER ET RETOUR</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 mb-4">
                                <button type="submit" class="btn btn-primary btn_submit mt-3">Enregistrer</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!----/column-- -->
</div>
<!-- /row -->
<div class="modal fade" id="modal_add_passenger">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <form action="{{ route('post.backend.add.passenger') }}"  id="add_passenger" method="post" onsubmit="SendDataAnimation(event, 'add_passenger')">
                <div class="modal-header">
                    <h5 class="modal-title">Enregistrement des passagers</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 mb-3">
                            <label class="form-label">Genre</label>
                            <div class="d-flex align-items-center justify-content-around pt-3">
                                <div class="form-check custom-checkbox mb-3">
                                    <input type="radio" class="form-check-input" value="MASCULIN" id="customCheckBox5" name="gender" checked>
                                    <label class="form-check-label" for="customCheckBox5">MASCULIN</label>
                                </div>
                                <div class="form-check custom-checkbox mb-3">
                                    <input type="radio" class="form-check-input" value="FEMININ" id="customCheckBox6" name="gender">
                                    <label class="form-check-label" for="customCheckBox6">FEMININ</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">Nom</label>
                            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="MMMR">
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">Prénom</label>
                            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="MMMR">
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">No Téléphone</label>
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="659158486">
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">Adresse</label>
                            <input type="text" class="form-control" id="address" name="address" placeholder="MANGUIERS">
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">Document</label>
                            <select class="selectpicker nice-select default-select form-control wide mh-auto" name="document">
                                <option value="CNI">CNI</option>
                                <option value="RECEPISSE">RECEPISSE</option>
                                <option value="PASSEPORT">PASSEPORT</option>
                            </select>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label">No Document</label>
                            <input type="text" class="form-control" name="document_id" placeholder="500354578">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-sm">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section("script-up")
<script src="{{ asset('vendor/select2/js/select2.full.min.js') }}"></script>
{{-- <script src="{{ asset('js/plugins-init/select2-init.js') }}"></script> --}}
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $(".select2").select2({
            width: '100%',
        });
    })
</script>
@endsection
@section("script-down")
<script>
    function getNumSiege(travel){
        if(travel != "other"){
            $('#destination_second').hide();
            $.ajax({
                url: "{{ route('ajax.get.backend.info.travel') }}",
                type: 'post',
                data: {
                    travel : travel,
                },
                headers  : {
                    'X-CSRF-TOKEN':    $('meta[name="csrf-token"]').attr('content'),
                    'contentType' :   "application/json; charset=utf-8",
                    "accept":         "application/json",
                },
                dataType : "json",
                success: function(data) {
                    $('#siege').val(data.value)
                    $('#num_siege').val(data.value)
                    $('#price').val(data.price)
                },
                error: function(xhr, status, error) {
                    console.error('Erreur lors du chargement des données :', error);
                }
            });
        }else{
            $('#destination_second').show();
            $('#price').val("")
        }
        
    }
    function getPlaceByBus(value){
        let selectBox = $('#select_num_siege');
        selectBox.empty();

        $.ajax({
            url: "{{ route('ajax.get.backend.place.by.bus', 'id') }}".replace('id', value),
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                var data = data.value;
                for (let index = 1; index <= data; index++) {
                    selectBox.append('<option value="' +index+ '">' +index+ '</option>');
                }
            },
            error: function(xhr, status, error) {
                console.error('Erreur lors du chargement des données :', error);
            }
        });
    }

    $(document).ready(function(){
        var path = "{{ route('get.backend.search.passenger.by.name') }}";
            //alert(path)
        $("#name").autocomplete({
            source: function (request, response) {
                //console.log(request.term);
                $.ajax({
                    url: path,
                    type: "GET",
                    dataType: "json",
                    data: {
                        user: request.term,
                    },
                    success: function (data) {
                        response(data);
                        //alert(data)
                    },
                });
            },
            select: function (event, ui) {
                var content = ui.item.label;
                content = content.split("/");
                $("#name").val(content[1]);
                $("#user").val(content[2].trim());
                console.log(ui.item);
                return false;
            },
        });
    });
</script>
@endsection