@extends('layouts.main') 
@section('title', 'Reservations')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
    @endpush
 


    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-unlock bg-green"></i>
                        <div class="d-inline">
                            <h5>{{ __('List of Reservations')}}</h5>
                            <span>{{ __('Manage Reservations for Pick-up')}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('home')}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Med Finder</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">List of Reservation</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>


        <div class="row">

            <div class="col-md-12">
                <div class="card">
                    <div class="card-header"><h3>{{ __('List of Reservations for Pick-up')}}</h3></div>
                    <div class="card-body">


                       <div class="row">
                            <div class="px-1">
                                <fieldset class="form-group position-relative">
                                    <input type="text" class="form-control form-control-sm" placeholder="Name" id= "sfullname" name="sfullname">
                                </fieldset>
                            </div> 
                            <div class="px-1">
                                <fieldset class="form-group position-relative">
                                    <input type="text" class="form-control form-control-sm" placeholder="Date" id= "sdate" name="sdate" onfocus="(this.type='date')">
                                </fieldset>
                            </div>                             
                            <div class="px-1">
                                <fieldset class="form-group position-relative">
                                    <input type="text" class="form-control form-control-sm" placeholder="Mobile No" id= "smobileno" name="smobileno">
                                </fieldset>
                            </div>            
                            <div class="px-1">
                                <fieldset class="form-group position-relative">
                                    <select class="form-control form-control-sm" id="status" name = "status" required>
                                        <option value="" disabled selected hidden>Select Status</option>
                                        <option value = "">All</option>
                                        <option value = "Pending">Pending</option>
                                        <option value = "For Confirmation">For Confirmation</option>
                                        <option value = "For Pickup">For Pickup</option>
                                        <option value = "Completed">Completed</option>
                                        <option value = "Disapproved">Disapproved</option>  
                                        <option value = "Cancelled">Cancelled</option>

                                    </select>
                                </fieldset>
                            </div>    

                            <div class="px-1" >

                                <fieldset class="form-group position-relative">

                                    <button type = "button" class="btn-sm btn-primary" name ="filter" id = "filter"><i class="icofont icofont-job-search"></i> Search</button>
                                    <button type = "button" class="btn-sm btn-warning" name ="reset" id = "reset"><i class="icofont icofont-ui-rotation"></i> Show All</button>

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

                    </div>
                    <div class="card-body">
                        <table  id="employee-grid" class="display compact custom" cellspacing="0" cellspacing="0" style="width:100%">
                            <thead>
                            <tr>
                                <th>Action</th>
                                <th>Date</th>
                                <th>Time</th>                                
                                <th>Name</th>
                                <th>Mobile No</th>
                                <th>Total Qty</th>
                                <th>Total</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>  
                    </div>
                </div>
            </div>
        </div>

    </div>


    <!-- push external js -->
    @push('script')
        <!--
        <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
        <script src="{{ asset('js/datatables.js') }}"></script>
        -->


        <link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/jquery.dataTables.css') }}"> 
        <link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/buttons.dataTables.min.css') }}"> 

        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery.dataTables.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.buttons.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jszip.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/pdfmake.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/vfs_fonts.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.html5.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.colVis.min.js') }}"></script> 


        <script>
        $(document).ready(function(){
        LoadReservations();

        });
        </script>

        <script>
        function LoadReservations() {

            fill_datatable();
            function fill_datatable(sfullname = '', sdate='', smobileno='', status='')
            {
                var data = [
                    {'status': "Pending"},
                    {'status': "For Confirmation"},
                    {'status': "For Pickup"},
                    {'status': "Completed"},
                    {'status': "Disapproved"},
                    {'status': "Cancelled"},

                ]


                var dataTable = $('#employee-grid').DataTable({
                    //scrollY:        "300px",
                    scrollX:        true,
                    scrollCollapse: true,
                    paging:         true,
                    columnDefs: [
                          { targets: [0, 7], className: "text-center" },
                          { targets: [5,6], className: "text-right" },
                    ],
                    fixedColumns: true,

                    processing: true,
                    serverSide: true,
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'copyHtml5',
                        exportOptions: {
                            columns: [ 0, ':visible' ]
                        }
                    },
                    {
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'csvHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },            
                    {
                        extend: 'pdfHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    
                    'colvis'
                ], 
                    "lengthMenu": [[10, 20, 30, 40, 50, 100, -1], [10, 20, 30, 40, 50, 100, "All"]],
                    "pageLength": 10,                  

                    ajax:{
                        url: "{{ route('admin.reservations.index') }}",

                        data:{
                            sfullname:sfullname,
                            sdate:sdate,
                            smobileno:smobileno,
                            status:status

                        }
                    },
                    columns: [
                        {data: 'action', name: 'action', orderable: false, searchable: false},

                        {
                            data:'reserveddate',
                            name:'reserveddate'
                        },             
                        {
                            data:'reservedtime',
                            name:'reservedtime'
                        },   
                        {
                            data:'fullname',
                            name:'fullname'
                        }, 
                        {
                            data:'mobileno',
                            name:'mobileno'
                        },                         
                        {
                            data:'totalqty',
                            name:'totalqty'
                        }, 
                        {
                            data:'total',
                            name:'total',
                            render: $.fn.dataTable.render.number(",", ".", 2)
                        }, 

                        {
                            data:'status',
                            name:'status',
                            render: function(data, type, row){
                              console.log('Content of data is : '+data);
                              sev='';
                              switch (data){
                                /*
                                case 4:
                                    sev = '<span class="badge bg-yellow badge-pill">'+data+'</span>';
                                    break;
                                */
                                case "Pending":
                                    sev = '<span class="badge badge-warning badge-pill">'+data+'</span>';
                                    break;
                                case "For Confirmation":
                                    sev = '<span class="badge badge-info badge-pill">'+data+'</span>';
                                    break;
                                case "For Pickup":
                                    sev = '<span class="badge badge-primary badge-pill">'+data+'</span>';
                                    break;
                                case "Completed":
                                    sev = '<span class="badge badge-success badge-pill">'+data+'</span>';
                                    break;
                                case "Disapproved":
                                    sev = '<span class="badge badge-danger badge-pill">'+data+'</span>';
                                    break;
                                case "Cancelled":
                                    sev = '<span class="badge badge-danger badge-pill">'+data+'</span>';
                                    break;  
                              }
                              console.log('Content of sev is : '+sev);
                              return sev;
                            }
                        }                  


                ]



                });


            }
            $('#filter').click(function(){
                var sfullname = $('#sfullname').val();
                var sdate = $('#sdate').val();
                var smobileno = $('#smobileno').val();
                var status = $('#status').val();
                

                if(sfullname != '' || sdate != '' || smobileno != '' || status != '')
                {
                    $('#employee-grid').DataTable().destroy();
                    fill_datatable(sfullname, sdate, smobileno, status);
                }
                else
                {
                    $('#employee-grid').DataTable().destroy();
                    fill_datatable();
                }
            });

            $('#reset').click(function(){
                $('#sfullname').val('');
                $('#sdate').val('');
                $('#smobileno').val('');
                $('#status').val('');
                $('#employee-grid').DataTable().destroy();
                fill_datatable();
            });

        } 

        </script>

        <script>    
        function addPermission() {

            if($('#element').val() == ""){//check leave type
                alert('Please Enter Group Permission to Continue!');
            }else{
                            var ok = confirm("Are you sure you want to Add Position Type?");
                            if(ok){
                                $.ajax({
                                    url: "{{ route('admin.elements.store') }}",
                                    dataType:'JSON',
                                    data: {
                                        _token:"{{csrf_token()}}",
                                        element: $('#element').val()
                                    },
                                    type: "POST",

                                    success: function(data){
                                    
                                    data = $.trim(data);
                                    
                                    document.getElementById('element').value = "";
                                    $('#employee-grid').DataTable().destroy();
                                    refreshpermissions();
                                        if(data === "SUCCESS"){
                                            alert("Form has been submitted!");
                                            location.reload(true);
                                            //window.location.reload();
                                        } //else{alert(data);}
                                    }
                                });
                            }

                        //} else{alert(data);}


            }



        }
        </script>
    @endpush
@endsection