@extends('layouts.user')
@section('page-title', 'Ticket Details')
@section('page-title-body', 'Ticket Details')
@section('active-link-3', 'active-link')

@section('main-theme')
    <div id="dashboard-container-view">
        <h2>
            <span>Ticket Details</span>

            <button type="button" class="btn-h2" id="btnaddBoarding"><i class="fas fa-print" style="margin:0px 8px 0px 0px"></i>Print Ticket</button>

        </h2>
        <div class="block-cont"></div>
        
        <article class="display-block" id="staff-list" style="width:100% !important;">
            ticket details
        </article>
        <div class="block-cont"></div>
    </div>


@endsection

<!-- js script -->
@push('scripts')
<script>

    $(function(){

        //add-staff

        $(document).on('click', '#btnaddstaff', function(){
            $('#add-staff').css({"display":"block"});
            $('#staff-list, #buses-list, #boarding-list, #boarding-add').css({"display":"none"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("New Aifola Express Route");
        });

        
        $(document).on('click', '#btnstafflist', function(){
            $('#add-staff, #buses-list, #boarding-list, #boarding-add').css({"display":"none"});
            $('#staff-list').css({"display":"block"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("Aifola Express Routes");
        });


        $(document).on('click', '#btnaddBoarding', function(){

        });

        
        $(document).on('click', '#btnBoarding', function(){
            $('#add-staff, #buses-list, #boarding-add, #staff-list').css({"display":"none"});
            $('#boarding-list').css({"display":"block"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("Boarding Points");
        });

        $(document).on('click', '#btnbuses', function(){
            $('#add-staff, #boarding-list, #boarding-add, #staff-list').css({"display":"none"});
            $('#buses-list').css({"display":"block"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("Buses Schedules");
        });
        
        



        $(document).on('change', '#region', function(){

            let region_id = $(this).val();
            $.ajax({
                url:"../get-districts/"+region_id,
                method:"get",
                dataType:"text",
                success:function(data){
                    //console.log(data);
                    var json = $.parseJSON(data);
                    $('#district').empty();
                    $('#district').append("<option value='invalid-1'>Select district</option>");
                    for (var i = 0; i < json.length; ++i) {
                        $('#district').append("<option value=" + json[i].id + ">" + json[i].name + "</option>");
                    }
                }
            });

        });




        var db = $('#table-first').dataTable({
                columnDefs: [ 
                { 
                    type: 'date',
                    'targets':[0]
                }],
            order: [[ 0, 'desc' ]]
            });


        var db = $('#table-second').dataTable({
            columnDefs: [ 
            { 
                type: 'date',
                'targets':[0]
            }],
        order: [[ 0, 'desc' ]]
        });



    let status_bn = 0;
    let id_bp = 0;

    $(document).on('click', '.btnBan', function(){
        status_bn = $(this).data('status');
        id_bp = $(this).data('id');
        let msg = "";
        if(status_bn == 1){
            msg = "Do you real want to ban this boading point from customer to be hiden that mean customer can not select?";
        }else{
           msg = "Do you real want to unban this boarding point to be available that mean customer can select?"; 
        }

        $("#ban-all-modal #bodymod").text(msg);
        $('#ban-all-modal').modal('show');

    });

    $(document).on('click', '#ban-all-modal #btnComplete', function(){
        $.ajax({
                url:"../../ban-boarding/"+id_bp+"/"+status_bn,
                method:"get",
                dataType:"text",
                success:function(data){
                    location.reload();
                }
            });
    });


    $(document).on('click', '.btnDelete', function(){

        id_bp = $(this).data('id');
        let msg =  "Do you real want to remove this boading point from customer to be hiden that mean customer can not select?";
        $("#delete-all-modal #bodymod").text(msg);
        $('#delete-all-modal').modal('show');

    });

    $(document).on('click', '#delete-all-modal #btnComplete', function(){
        $.ajax({
                url:"../../remove-boarding/"+id_bp,
                method:"get",
                dataType:"text",
                success:function(data){
                    location.reload();
                }
            });
    });




    $(document).on('click', '.btnBanSchedule', function(){
        status_bn = $(this).data('status');
        id_bp = $(this).data('id');
        let msg = "";
        if(status_bn == 1){
            msg = "Do you real want to ban this bus schedules?";
        }else{
           msg = "Do you real want to unban this bus schedule to be available that mean customer can select?"; 
        }

        $("#ban-all-modal #bodymod").text(msg);
        $('#ban-all-modal').modal('show');

    });

    $(document).on('click', '#ban-all-modal #btnComplete', function(){
        $.ajax({
                url:"../../ban-schedules/"+id_bp+"/"+status_bn,
                method:"get",
                dataType:"text",
                success:function(data){
                    location.reload();
                }
            });
    });


    $(document).on('click', '#btnDeleteSchedule', function(){

        id_bp = $(this).data('id');
        console.log(id_bp);
        let msg =  "Do you real want to remove this bus schedules from the system?";
        $("#delete-all-modal #bodymod").text(msg);
        $('#delete-all-modal').modal('show');

    });

    $(document).on('click', '#delete-all-modal #btnComplete', function(){
        $.ajax({
            url:"../../remove-schedules/"+id_bp,
            method:"get",
            dataType:"text",
            success:function(data){
                location.reload();
            }
        });
    });

    //remove-boarding

});
</script>
@endpush