@extends('layouts.app')
@section('content')
@section('css')
<link rel="stylesheet" type="text/css" href="assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css">
@endsection

<div class="card">
    <div class="card-header">
        <h4 class="card-title">{{ isset($customer)?ucwords($customer->name):'' }}</h4>
        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
    </div>

    <div class="card-body collapse in">
        <div class="card-block card-dashboard">
          <div class="row">
    <div class="col-sm-3">
        <div class="card-box ">

             <div class="row">

                <div class="list-group" role="tablist">
                    <ul style="padding-left:0">
                        <a data-toggle="tab" href="#profile" class="list-group-item active"><i class="fa fa-male"></i> Profile</a>
                        <a data-toggle="tab" href="#orderhistory" class="list-group-item"><i class="fa fa-cart-plus"></i> Order History</a>
                        <a data-toggle="tab" href="#feedback" class="list-group-item"><i class="fa fa-star"></i> Feedback</a>
                        <a data-toggle="tab" href="#reservations" class="list-group-item"><i class="fa fa-table"></i> Reservations</a>
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <div class="col-sm-9">
        <div class="card-box table-responsive">
            <div class="tab-content">
        
                <div id="profile" class="tab-pane active">
                    @include('admin.customers.single.profile')
                </div>
                    
                <div id="orderhistory" class="tab-pane">
                    @include('admin.customers.single.order_history') 
                </div>

                <div id="feedback" class="tab-pane">
                    @include('admin.customers.single.feedbacks')
                </div>
                
                <div id="reservations" class="tab-pane">
                    @include('admin.customers.single.reservations')   
                </div>

            </div>
        </div>
    </div>

</div> <!-- end row -->

        </div>
    </div>
</div>

@include('admin.customers.single.order_history_modal')
@section('js')
<script src="assets/vendors/js/tables/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="assets/vendors/js/tables/datatable/dataTables.bootstrap4.min.js" type="text/javascript"></script>
<script src="assets/js/scripts/tables/datatables/datatable-advanced.min.js" type="text/javascript"></script>


<script type="text/javascript">
    $(".view_order").on('click', function (event) {
        event.preventDefault();
        var id = $(this).attr("data-id")
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');      
        $.ajax({
            type: 'POST',
            url: '{{route("customerOrder")}}',
            data: {id:id, _token: CSRF_TOKEN},
            success: function (response) {
                $('#orderModal .modal-body').html(response);
                $('#orderModal').modal('show');
            }
        });    
    });
</script>
@endsection

@endsection