@include('layouts.header');
@include('layouts.sidebar');
<!-- <link rel="stylesheet" type="text/css" href="{{ asset('jquery.dataTables.min') }}" /> -->

<!-- <script type="text/javascript" src="DataTables/datatables.min.js"></script> -->


<link href='css/jquery-ui.css' rel='stylesheet'>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.dataTables.min.js"></script>


<style>
    /* .dataTables_wrapper .dt-buttons{
float:none;
text-align:left;
}
.dataTables_wrapper .dataTables_filter {
  float:none;
text-align:right;
} */

    /*fixed column datatable css*/

    table.dataTable thead tr>.dtfc-fixed-left,
    table.dataTable thead tr>.dtfc-fixed-right {
        z-index: 1;
        background-color: #ffd4d4;
        size: 250px;
    }

    table.dataTable tbody tr>.dtfc-fixed-left,
    table.dataTable tbody tr>.dtfc-fixed-right {
        z-index: 1;
        background-color: #ffd4d4
    }

    div.dtfc-left-top-blocker,
    div.dtfc-right-top-blocker {
        background-color: #ffd4d4
    }

    /*fixed header datatable css*/
    table.fixedHeader-floating {
        background-color: white
    }

    table.fixedHeader-floating.no-footer {
        border-bottom-width: 0
    }

    table.fixedHeader-locked {
        position: absolute !important;
        background-color: white
    }

    @media print {
        table.fixedHeader-floating {
            display: none,

        }
    }



    /*excel export*/



    div.dt-buttons {

        float: right;
        top: -60px;
    }

   

    .row-odd {
        border-radius: 2px;
        background: #9631312b;
        padding: 5px;
    }

    .row-even {
        border-radius: 2px;
        background: #9631315e;
        padding: 5px;
    }

    .button {
        background-color: #963131;
        color: white;
        text-align: center;
        font-size: 12px;
        padding-top: 3px;

    }

    .button:hover {
        background-color: antiquewhite;
        color: #963131;
    }

    button:hover {
        background-color: white;
    }

    /* .chart-area11 {
    margin-top: 0px;
    width: 498px;
    display: block;
    box-sizing: border-box;
    height: 325.6px;
    margin-left: -92px;
  } */

    

    .ui-datepicker {
        width: 300px;
        height: 300px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
        /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);*/

    }

    .ui-datepicker-header {
        background: #963131;
        color: #963131;
        font-family: 'Times New Roman';
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #111;
    }

    .ui-datepicker-calendar .ui-state-default {
        background: linear-gradient(#963131, #963131);
        color: #ffffff;
        height: 35px;
        width: 35px;
        border: 1px;
        border-radius: 2px;

    }

    .ui-datepicker-calendar .ui-state-hover {
        background: white;
        color: #963131;
    }



    .ui-timepicker-standard a {
        border: 1px solid #d4d4d4;
        color: #ffffff;
        display: block;
        padding: 0.2em 0.4em;
        text-decoration: none;
        background-color: #963131;
    }

    /* .ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    background-color: #963131;
} */

    .ui-timepicker-standard .ui-menu-item {
        margin: 0 auto;
        padding: 0 30%;
    }

    


    @media screen and (max-width: 640px) {
        div.dt-buttons {
            float: right !important;
            text-align: center;
        }
    }


    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    #pageloader img {
        left: 60%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
        height: 150px;
        border: black;
        border-style: double;
        background-color: antiquewhite;
        border-radius: 20px;
    }

    @media screen and (max-width: 600px) {
        #pageloader img {
            left: 50%;
            margin-left: -90px;
            margin-top: -32px;
            position: absolute;
            top: 50%;
            height: 150px;
            border: black;
            border-style: double;
            background-color: antiquewhite;
            border-radius: 20px;
        }


    }
    #threshold_report_length,#threshold_report_filter{
        margin-top: 29px;
    }
</style>

<body>
    <div class="col-lg-12" id="pageloader">
        <img src="images/256x256.gif">

    </div>
    @include ('layouts.head')


    <main id="main" class="main">

        <!-- <h1>All Live Oreder status </h1> -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Threshold Report</h5>


                <!-- Default Tabs -->
                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist">
                </ul>
                <div class="tab-content pt-1" id="myTabjustifiedContent">
                    <div class="tab-pane fade show active" id="home-justified" role="tabpanel"
                        aria-labelledby="home-tab">
                        <div class="card">
                            <div class="card-body">
                                <!-- <h5 class="card-title">Search Accourding To</h5> -->
                                <!-- Floating Labels Form -->
                                <form class="pt-3 g-3" id="threshold_data" method="POST">
                                    <div class="row">
                                        <input type="hidden" value="{{ csrf_token() }}" name="_token">
                                        
                                        <div class="col-md-3">
                                              <div class="form-floating mb-3">
                                                <select class="form-select" id="kitchen" name="kitchen" aria-label="">
                                                  <option value="all">All</option>
                        						  @foreach ($kitchens as $Kitchen)
                          
												<option value="{{ $Kitchen['id'] }}"> {{ $Kitchen['kitchen_name'] }} </option>
													@endforeach
                        						                          
                                                </select>
                                                <label for="floatingName">Select Kitchen</label>
                                              </div>
                    				</div> 
                                        
                                        
                                        
                                        
                    				<div class="col-md-3">
                                              <div class="form-floating mb-3">
                                                <select class="form-select" id="aggrator" name="aggrator" aria-label="">
                                                  <option value="all">All</option>
                        						  <option value="zomato">Zomato</option>
                        						  <option value="swiggy">Swiggy</option>
                        
                                                </select>
                                                <label for="floatingName">Select Aggretor</label>
                                              </div>
                    				</div> 
                                        <!-- <div class="col-md-3"></div> -->
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="from_date" name="from_date" autocomplete="off" placeholder="Your Name" readonly='true'>
                                                <label for="floatingName">From Date</span></label>
                                                <p id="projectIDSelectError1" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="to_date"
                                                    name="to_date" autocomplete="off" placeholder="Your Name"
                                                    required="" readonly='true'>
                                                <label for="floatingName">To Date</span></label>
                                                <p id="projectIDSelectError2" style="color:red"></p>

                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                        </div>
                                        <div class="col-md-4">
                                        </div>


                                    </div>

                                    <div class="row">

                                        <!-- <div class="col-md-5"></div> -->
                                        <div class="col-md-5"></div>


                                        <div class="text-center col-md-1" style="align-self: center;">
                                            <button type="button" id="submit" onclick="get_threshold()" class="btn btn-primary">Submit</button>
                                        </div>
                                        &nbsp;
                                        <div class="text-center col-md-1" style="align-self: center;">
                                            <button type="reset" id="" class="btn btn-primary">Reset</button>
                                        </div>
                                    </div>
                                </form>


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

                </div>

            </div>
        </div>


        <div class="col-lg-12">
            <!-- <div class="col-lg-12"> -->
            <!-- <a href="{{ url('export') }}" type="button" class="btn btn-primary">EXPORT</a> -->
            <div class="card">
                <!-- <div class="card-body" style="overflow-x:auto;"> -->
                <div class="card-body" id="tcp_table1">
                    
                   <table id="threshold_report" class='display dataTable nowrap'>
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Date</th>
                                                <th scope="col">KPT</th>
                                                <th scope="col">Acceptance</th>
                                                <th scope="col">Rider Wait Time</th>
                                                <!--<th scope="col">Store Shut Down</th>-->
                                                <th scope="col">Cancellation</th>
                                                <th scope="col">Cancellation Amount</th>
                                                
                                                
                                            </tr>
                                        </thead>

                                    </table>

                    <!-- Table with stripped rows -->

                    <!-- End Table with stripped rows -->

                </div>
            </div>

        </div>

    </main>

    @include('layouts.footer');

    <script>
        var data = {};
        var arr = {};
        data['_token'] = "{{ csrf_token() }}";
        arr['_token'] = "{{ csrf_token() }}";

        $(document).ready(function() {
			$(".dataTables_empty").html('-----');
        	$(function() {
                $("#from_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    maxDate: "+0m +0w",
                    changeMonth: true,
                    changeYear: true,


                });
                $("#from_date").change(function() {
                    test = $(this).datepicker('getDate');
                    testm = new Date(test.getTime());
                    testm.setDate(testm.getDate() + 0);

                    $("#to_date").datepicker("option", "minDate", testm);
                });
                $("#to_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    maxDate: "+0m +0w",
                    changeMonth: true,
                    changeYear: true,

                });
                
                
               $("#threshold_data").validate({ //Vaildation
                rules: {
                    from_date: "required",
                    to_date: "required"
                },
                messages: {
                    from_date: "This field is required",
                    //  machine_name: "This field is required",
                    to_date: "This field is required"
                },
                // submitHandler: function(form) {
                //     form.submit();
                // },
                errorPlacement: function(error, element) {

                    if (element.attr("name") == "from_date") {
                        error.appendTo('#projectIDSelectError1');
                    } else if (element.attr("name") == "to_date") {
                        error.appendTo('#projectIDSelectError2');

                    } else {
                        error.insertAfter(element);
                    }
                },

            });
                
                
            });
		});

           

        
        function get_threshold(){
		$(".dataTables_empty").html('-----');
        if ($("#threshold_data").valid()) {
         $('#threshold_report').DataTable().destroy();
   		 data['from_date'] = $("#from_date").val();
   		 data['to_date'] = $("#to_date").val();
   		 data['aggrator'] = $("#aggrator").val();
   		 data['kitchen'] = $("#kitchen").val();
   		 data['_token'] = "{{ csrf_token() }}";
            var table = $('#threshold_report').DataTable({
                     //"dom": '<"top"i>rt<"bottom"flp><"clear">', //to bring the paginations values to bottom
                     //orderCellsTop: true, 					   //to bifurcate between header and search boxes
                     "autoWidth": true,
                     "ordering": false,
                     "order": [0, 'desc'],

                     "ajax": {
                         url: "get_threshold_report", // Ajax request
                         type: "post",
                         data: data,

                     },

                     "columns": [
                         // { "data": "id" },			// columns
                         {
                             "data": "id",
                             "title": "#"
                         },

                         {
                             "data": "date",
                             "title": "Date"
                         },
                         {
                             "data": "kpt",
                             "title": "KPT"
                         },
                         {
                             "data": "accept",
                             "title": "Acceptence"
                         },
                         {
                          "data": "rider_wait_time",
                          "title": "Rider Wait Time"
                          },
                          /*{
                              "data": "store_shut_down",
                              "title": "Store Shut Down"
                          },*/
                          {
                              "data": "cancelled_count",
                              "title": "Cancellation"
                          },
                          {
                              "data": "cancelled_amount",
                              "title": "Cancellation Amount"
                          }
                         
                     ],
                     columnDefs: [

                         {
                             "width": "1%",
                             "targets": [0],
                             "orderable": false,
                             "className": "dt-center",
                             "searching": true,
                         }, // data alignments  
                         {
                             "width": "20%",
                             "targets": [1],
                             "className": "dt-center"
                         },
                         {
                             "width": "20%",
                             "targets": [2],
                             "className": "dt-center"
                         },
                         {
                             "width": "20%",
                             "targets": [3],
                             "className": "dt-center"
                         },

                     ],





                 });
                 
                 table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

        	}
        }
    </script>
</body>

</html>