@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')
    Guichet
@endsection

@section('pagination')
    Guichet
@endsection
@php
    $trajet_price = 0;
    $bus_place = 0;
    $bus_place_passengers = 0;
    $date = request()->input('date');
    $travel_get = request()->input('travel');
@endphp
@section('content')
<div class="row page-titles">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a></li>
        @if (isset($item))
            <li class="breadcrumb-item"><a href="{{ route('get.backend.seller.ticket') }}">Guichet</a></li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Guichet du voyage No {{ $item->tra_ref }}</a></li>
        @else
            @if (isset($date) && !empty($date))
                <li class="breadcrumb-item"><a href="{{ route('get.backend.seller.ticket') }}">Guichet</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Guichet du {{ $date }} ({{ count($data) }})</a></li>
            @else
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Guichet ({{ count($data) }})</a></li>
            @endif
        @endif
    </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-022-copy"></i>
        </div>
    </a>
    @if (isset($date) && !empty($date))
        <a class="btn btn-primary btn-sm active" href="{{ route('get.backend.seller.ticket') }}">
            Guichet
        </a>
    @else
        <a class="btn btn-primary btn-sm active" href="javascript:void(0)">
            Guichet
        </a>
    @endif

</div>
@if(!isset($travel_get) && empty($travel_get))
<div class="row">
    <div class="col-xl-12 col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="basic-form">
                    <form id="get_info" method="get" action="{{ route('get.backend.seller.ticket') }}">
                        <div class="row">
                            <div class="col-sm-10 mb-3">
                                <input type="date" class="form-control" id="date" name="date" value="{{ isset($date) ? $date : date('Y-m-d') }}" required>
                            </div>
                            <div class="col-sm-2 mb-3">
                                <button type="submit" class="btn btn-primary btn_submit">Suivant</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@if (!isset($item))
@php
    $agencyId = request()->get('agency');
@endphp
@if(isAgency() === false)
<div class="row">
    <div class="col-xl-12 col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="basic-form">
                    <select class="form-control select2" name="agency" id="agencySelect">
                        <option value="">Selectionner une agence</option>
                        @if(isset($agencies) && COUNT($agencies) > 0)
                            @foreach ($agencies as $key => $value)
                                <option value="{{ $value->id }}" {{ $value->id == $agencyId ? 'selected' : '' }}>
                                    {{ $value->ag_name }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<div class="row">
    @isset($data)
    @if (count($data) > 0)
        @foreach ($data as $value)
        @php
            $value_id = $value->id;
            $ref = $value->tra_ref;
            $date_depart = $value->tra_date_depart;
            $date_depart_format = Carbon\Carbon::parse($date_depart)->format('d/m/Y');
            $time_depart_format = Carbon\Carbon::parse($date_depart)->format('H:i:s');
            $bus = isset($value->bus) ? $value->bus->bus_number : "";
            $bus_place = isset($value->bus) ? $value->bus->bus_place : "";
            $bus_type = isset($value->bus) ? $value->bus->bus_type : "";
            $bus_place_passengers = isset($value->bus) ? $value->bus->bus_place_passengers : "";
            $trajet_start = isset($value->trajet) ? $value->trajet->tr_place_start : "";
            $trajet_end = isset($value->trajet) ? $value->trajet->tr_place_end : "";
            $trajet = $trajet_start. " - ".$trajet_end;
            $agency = isset($value->agency) ? $value->agency->ag_name : "";

            $place_available = $value->tra_place_available;
            $type = $value->tra_type;
            $bordereau_ref = isset($value->bordereau) ? $value->bordereau->bor_ref : null;
        @endphp
        <div class="col-xl-4 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title">Trajet : {{ $trajet }}</h6>
                </div>
                <div class="card-body">
                    <form class="order-lg-2" action="{{ route('get.backend.seller.ticket') }}">
                        <ul class="list-group mb-3">
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <h6 class="my-0">No Bus</h6>
                                </div>
                                <span class="text-muted">{{ $bus }} ({{ $bus_type }})</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <h6 class="my-0">Date de Depart</h6>
                                </div>
                                <span class="text-muted">{{ $date_depart_format }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <h6 class="my-0">Heure</h6>
                                </div>
                                <span class="text-muted">{{ $time_depart_format }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <h6 class="my-0">Nombre de place</h6>
                                </div>
                                <span class="text-muted">{{ $bus_place_passengers }}</span>
                            </li>

                            <input type="hidden" value="{{ $ref }}" name="travel">

                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <h6 class="my-0">Nombre de place disponible</h6>
                                </div>
                                <span class="text-muted">{{ $place_available }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <h6 class="my-0">Type</h6>
                                </div>
                                <span class="badge badge-dark">{{ $type }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <h6 class="my-0">Agence</h6>
                                </div>
                                <span class="badge badge-dark">{{ $agency }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <h6 class="my-0">Passagers</h6>
                                </div>
                                <a class="badge badge-primary" href="{{ route('get.backend.passengers.travel', $value_id) }}" target="_blank">{{ "Voir Tickets" }}</a>
                            </li>
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                    <button class="btn btn-primary btn-sm" type="submit" {{ $place_available ==  0 ? 'enabled': ""  }} {{ !is_null($bordereau_ref) ? 'enabled' : '' }}>
                                        Tickets
                                    </button>
                                    @if(is_null($bordereau_ref))
                                    <a class="btn btn-primary btn-sm" href="{{ route('get.backend.add.bordereau', $ref) }}">
                                        Dépenses
                                    </a>
                                    @else
                                    <a class="btn btn-primary btn-sm" target="_blank" href="{{ route('get.backend.pdf.bordereau', $bordereau_ref) }}" >
                                        Bordereau
                                    </a>
                                    <a class="btn btn-primary btn-sm" href="{{ route('get.backend.add.expense.bordereau', $value_id) }}" >
                                        Dépenses
                                    </a>
                                    @endif
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    @else
    <div class="col-md-12">
        <h2 class="text-center">Data not found</h2>
    </div>
    @endif
@endisset
</div>
<!-- /row -->
@else
@php
    $value_id = $item->id;
    $ref = $item->tra_ref;
    $bus_id = isset($item->bus) ? $item->bus->id : "";
    $bus_number = isset($item->bus) ? $item->bus->bus_number : "";
    $bus_brand = isset($item->bus) ? $item->bus->bus_brand : "";
    $bus_model = isset($item->bus) ? $item->bus->bus_model : "";
    $bus_place = isset($item->bus) ? $item->bus->bus_place : 0;
    $bus_type = isset($item->bus) ? $item->bus->bus_type : "";
    $bus_place_passengers = isset($item->bus) ? $item->bus->bus_place_passengers : 0;
    $trajet_start = isset($item->trajet) ? $item->trajet->tr_place_start : "";
    $trajet_end = isset($item->trajet) ? $item->trajet->tr_place_end : "";
    $trajet_price = isset($item->trajet) ? $item->trajet->tr_price : "";
    $trajet = $trajet_start. " - ".$trajet_end;

    $place_available = $item->tra_place_available;
    $type = $item->tra_type;
@endphp
<!-- row -->
<div class="row">
    <!-- --column-- -->
    <div class="col-xl-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Vente des Tickets :  <span id="divPlace"></span></h4>
            </div>
            <div class="card-body">
                <div class="basic-form">
                    <form id="add_ticket" method="post" data-id="{{ $value_id }}" action="{{ route('post.backend.add.ticket',$value_id) }}" onsubmit="SendDataAnimation(event,'add_ticket')">
                        <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">Nouveau 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-4 mb-3">
                                <label class="form-label">Bus</label>
                                <input type="text" class="form-control" id="bus" name="bus" disabled value="{{ $bus_number }} / {{ $bus_brand }} / {{ $bus_model }} ">
                                <input type="hidden" name="bus_id" value="{{ $bus_id }}">
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Trajet</label>
                                <select class="form-control" name="trajet" onchange="getNumSiege(this.value)">
                                    <option value="{{ $trajet }}">{{ $trajet }}</option>
                                    <option value="other">AUTRES</option>
                                </select>
                            </div>
                            <div class="col-sm-4 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" name="price" placeholder="3000" value="{{ $trajet_price }}">
                            </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" {{ $bus_type == "CLASSIQUE" ? "selected" : "" }}>CLASSIQUE</option>
                                    <option value="VIP" {{ $bus_type == "VIP" ? "selected" : "" }}>VIP</option>
                                </select>
                            </div>
                            <div class="col-sm-2 mb-3" id="destination_second">
                                <label class="form-label">Nombre de tickets</label>
                                <input type="number" class="form-control" id="num_tickets" name="num_tickets" value="1">
                            </div>
                            <div class="col-sm-2 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 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="col-md-6 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="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" onchange="showInputDoc(this.value)">
                                <option value="CNI">CNI</option>
                                <option value="RECEPISSE">RECEPISSE</option>
                                <option value="PASSEPORT">PASSEPORT</option>
                                <option value="AUTRES">AUTRES</option>
                            </select>
                        </div>
                        <div class="col-sm-6 mb-3" id="no_document">
                            <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>
@endif
@endsection
@section("script-up")
<script src="{{ asset('vendor/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
@endsection
@section("script-down")
{{-- <script>
    window.onload = function() {
        window.print();
    };
</script> --}}
<script>
    function getNumSiege(travel){
        if(travel != "other"){
            $('#destination_second').hide();
            $('#price').val("{{ $trajet_price }}")
        }else{
            $('#destination_second').show();
            $('#price').val("")
        }

    }
    function showInputDoc(value){
        if(value != "AUTRES"){
            $('#no_document').show();
        }else{
            $('#no_document').hide();
        }
    }
    function getPlaceByBus() {
        let selectBox = $('#select_num_siege');
        selectBox.empty();
        selectBox.append('<option value="" selected>No de siège</option>');

        // Assurez-vous que la variable 'data' est bien un entier
        var data = parseInt("{{ $bus_place_passengers }}", 10);

        if (!isNaN(data) && data > 0) {
            for (let index = 1; index <= data; index++) {
                selectBox.append(`<option value="${index}">${index}</option>`);
            }
        }
    }

    function updateUrlParameter(url, param, paramValue) {
        var newAdditionalURL = "";
        var tempArray = url.split("?");
        var baseURL = tempArray[0];
        var additionalURL = tempArray[1];
        var temp = "";
        if (additionalURL) {
            tempArray = additionalURL.split("&");
            for (i = 0; i < tempArray.length; i++) {
                if (tempArray[i].split('=')[0] !== param) {
                    newAdditionalURL += temp + tempArray[i];
                    temp = "&";
                }
            }
        }

        var newParam = temp + param + "=" + paramValue;
        return baseURL + "?" + newAdditionalURL + newParam;
    }
    const path_place = "{{ route('get.backend.remaining.ticket.by.travel') }}";

    function getPlaceRemaining(){
        $.ajax({
            url: path_place,
            type: "GET",
            data: {
                travel : $('#add_ticket').attr('data-id'),
            },
            dataType: "json",
            success: function (data) {
                if(data.code == 200) {
                    console.log(data.place, 'Place restant');
                    $("#divPlace").text("Nombre de place disponible : "+data.place);
                }
            },
            error: function (xhr) {
                if (xhr.status == 419) {
                    var errorMessage = JSON.parse(xhr.responseText).message;
                    Swal.fire({
                        type: "error",
                        text: errorMessage,
                        showConfirmButton: false,
                        timer : 4000
                    });
                }else{
                    Swal.fire({
                        type: "error",
                        text: "Une erreur est survenue lors du traitement de la requete",
                        showConfirmButton: false,
                        timer : 4000
                    });
                }
            }

        });
    }
    getPlaceByBus();
    setInterval(() => {
        getPlaceRemaining();
    }, 1000);
    $(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].trim());
                $("#user").val(content[2].trim());
                console.log(ui.item);
                return false;
            },
        });
        $('#agencySelect').on('change', function() {
            var selectedValue = $(this).val();
            if (selectedValue) {
                // Récupérer l'URL actuelle
                var currentUrl = window.location.href;

                // Ajouter ou mettre à jour le paramètre "agency" dans l'URL
                var newUrl = updateUrlParameter(currentUrl, 'agency', selectedValue);

                // Rediriger vers la nouvelle URL
                window.location.href = newUrl;
            }
            else if(selectedValue == ""){
                window.location = "{{ route('get.backend.seller.ticket') }}";
            }
        });
    });
</script>
@endsection