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

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

            <button type="button" class="btn-h2" id="btnaddstaff"><i class="far fa-plus-square" style="margin:0px 8px 0px 0px"></i>Customer Tickets</button>
            <button type="button" class="btn-h2 btn-h2-active" id="btnstafflist"><i class="far fa-list-alt" style="margin:0px 8px 0px 0px"></i>Customer Details</button>

        </h2>
        <div class="block-cont"></div>
        <article class="display-block" id="staff-list">
            <table class="table-view-details">
                <tr>
                    <td><h2>Customer Name</h2>{{$customer->name}}</td>
                    <td><h2>Phone Number</h2>{{$customer->phone_number}}</td>
                </tr>
                <tr>
                    <td><h2>Relative Phone Number</h2>{{$customer->relative_number}}</td>
                    <td><h2>Email Address</h2>{{$customer->email}}</td>
                </tr>
                <tr>
                    <td><h2>Customer Code</h2>CCID/{{$customer->id}}</td>
                    <td><h2>Join At</h2>{{ date_format(date_create($customer->created_at), 'd M, Y H:i:s') }}</td>
                </tr>
            </table>
        </article>

        <div class="display-none" id="add-staff">
            @foreach ($tickets as $data)
              <article class="min-view-bus-info bg-fff8f8">
                <section class="bus-info-route">
                    <h2>{{$data->start_from}} - {{$data->end_to}}</h2>
                    <h3><br>BUS TYPE</h3>
                    <p>{{$data->bus_type}}</p>
                </section>
                <section class="bus-info-dep">
                    <h3>Departure</h3>
                    <h2>{{date_format(date_create($data->date_depature), 'd M Y')}}</h2>
                    <h4>{{date_format(date_create($data->depature_time), 'H:i A')}}</h4>
                </section>
             
 
                <section class="bus-info-dep-via">
                    VIA<br>{{$data->via}}
                </section>
                <section class="bus-info-price">
                    <h3>Fare</h3>
                    <h2>{{number_format($data->fare, 2)}} TZS</h2>
                </section>
                <section class="bus-info-btn">
                    <h6>Boarding Point: {{$data->boarding_point}}</h6>
                    <h6>Seat Number: {{$data->sit_number}}</h6>
                    <h6>Ticket Number: {{$data->ticket_number}}</h6>
                </section>
                <div class="block-cont-0p"></div>
              </article>
            @endforeach
        </div>

        
        <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').css({"display":"none"});

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

            $('h2 span').empty();
            $('h2 span').text("Customer Tickets");
        });

        
        $(document).on('click', '#btnstafflist', function(){
            $('#add-staff').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("Customer Details");
        });

        $(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':[1]
            }],
        order: [[ 1, 'desc' ]]
        });
    });

</script>
@endpush