@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> -->

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
<link href='css/jquery-ui.css' rel='stylesheet'>

<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>


<link rel="stylesheet" href="assets/vendor/timepicker/jquery.timepicker.min.css" />
<script src="assets/vendor/timepicker/jquery.timepicker.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;
    }

    .dataTables_wrapper .dataTables_filter {

        margin-right: -45px;
    }

    button.dt-button,
    div.dt-button,
    a.dt-button {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        margin-right: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        font-size: 0;
        color: black;
        white-space: nowrap;
        overflow: hidden;
        background-color: #e9e9e900;
        background-image: -webkit-linear-gradient(top, #e9e9e900 0%, #e9e9e900 100%);
        background-image: -moz-linear-gradient(top, #e9e9e900 0%, #e9e9e900 100%);
        background-image: -ms-linear-gradient(top, #e9e9e900 0%, #e9e9e900 100%);
        background-image: -o-linear-gradient(top, #e9e9e900 0%, #e9e9e900 100%);
        background-image: linear-gradient(to bottom, #e9e9e900 0%, #e9e9e900 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#e9e9e900', EndColorStr='#e9e9e900');
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-decoration: none;
        outline: none;
    }

    .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;
  } */

    .filter {
        width: 165px;
    }

    .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%;
    }

    .export_excel {
        float: right;
        margin-top: -54px;
    }


    @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;
        }


    }
    
    #rhi_report_length,#rhi_report_filter{
        padding: 5px;
    }
    #rhi_report_filter{
        margin-right: -13px !important;
    }
    div#ui-datepicker-div{
		top: 317px !important;
	}
</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">Restaurant Health Index</h5>


                <!-- Default Tabs -->
                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist">
                    <!-- <li class="nav-item flex-fill" role="presentation">
                    <button class="nav-link w-100 active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-justified" type="button" role="tab" aria-controls="home" aria-selected="true">Sales Report</button>
                </li> -->
                    <!-- <li class="nav-item flex-fill" role="presentation">
                    <button class="nav-link w-100" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-justified" type="button" role="tab" aria-controls="profile" aria-selected="false">Weekly</button>
                </li>
                <li class="nav-item flex-fill" role="presentation">
                    <button class="nav-link w-100" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-justified" type="button" role="tab" aria-controls="contact" aria-selected="false">Mothly</button>
                </li>
                <li class="nav-item flex-fill" role="presentation">
                    <button class="nav-link w-100" id="year-tab" data-bs-toggle="tab" data-bs-target="#year-justified" type="button" role="tab" aria-controls="year" aria-selected="false">Yearly</button>
                </li> -->
                </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="cancel_report" method="POST">
                                    <div class="row">
                                        <input type="hidden" value="{{ csrf_token() }}" name="_token">
   

                                        <div class="col-md-4">
                                            <div class="form-floating mb-3">
                                                <select class="form-select" id="kitchen" name="kitchen" onchange="get_brands_on_kitchen(this.value)" aria-label="">
                                                    <!-- <select class="form-select" id="kitchen" name="kitchen" onchange="get_brands_on_kitchen(this.value);" aria-label=""> -->
                                                    <option value="">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-4">
                                              <div class="form-floating mb-3">
                                                <select class="form-select" id="brand" name="brand" aria-label="">
                                                  <option value=""></option>
                        
                        
                                                </select>
                                                <label for="floatingName">Select Brand/Entity</label>
                                              </div>
                    				</div> 
                    				<div class="col-md-4">
                                              <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 Brand/Entity</label>
                                              </div>
                    				</div> 
                                        <!-- <div class="col-md-3"></div> -->
                                        <!-- <div class="col-md-4">
                    <div class="form-floating">
                      <select class="form-select" id="sub_brand" name="sub_brand" aria-label="">
                        <option value=""></option>
                        <option value="">Sub Brand 1</option>
                        <option value="">Sub Brand 2</option>
                        <option value="">Sub Brand 3</option>


                      </select>
                      <label for="floatingName">Select Sub Brand</span></label>
                    </div>
                  </div>-->
                                        <!-- <div class="col-md-3"></div> -->
                                        <div class="col-md-4">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="from_date"
                                                    name="from_date" autocomplete="off" placeholder="Your Name"
                                                    required="" readonly='true'>
                                                <label for="floatingName">From Date</span></label>
                                                <p id="projectIDSelectError1" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <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_rhi()" 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" style="overflow-x:auto;">
                    
                         
                   <table id="rhi_report" class='display dataTable'>
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Day</th>
                                                <th scope="col">Date</th>
                                                <th scope="col">Revenue</th>
                                                <th scope="col">Revenue Growth %</th>
                                                <th scope="col">Orders</th>
                                                <th scope="col">Order Growth %</th>
                                                <th scope="col">AOV</th>
                                                 <th scope="col">AOV Growth %</th>
                                                <th scope="col">Open Order Amount</th>
                                                <th scope="col">Gross Amount</th>
                                                <th scope="col">Discounts</th>
                                                 <th scope="col">Cancelled order</th>
                                                 <th scope="col">Cancelled order Value</th>
                                                <th scope="col">Discount Percentage in %</th>
                                                <th scope="col">Time To Accept</th>
                                                <th scope="col">Time To Process</th>
                                                <th scope="col">KTP</th>
                                                <th scope="col">Time To Dispatch</th>
                                                <th scope="col">Time For Rider To Arrive</th>
                                                <th scope="col">Rider Wait Time</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() {
			$("#from_date").val('2022-11-01');
        	$("#to_date").val('2022-11-14');
        	$(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,

                });


            });

            $('#cancel_report').validate({
                rules: {
                    //country: "required",
                    from_date: "required",
                    to_date: "required"
                },

                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                messages: {
                    from_date: {
                        required: "This field is required."
                    },
                    to_date: {
                        required: "This field is required."
                    },

                },
                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_rhi(){
        	$('#rhi_report').DataTable().destroy();
   		 data['kitchen_id'] = $("#kitchen").val();
   		 data['from_date'] = $("#from_date").val();
   		 data['to_date'] = $("#to_date").val();
   		 data['brand_id'] = $("#brand").val();
   		 data['aggrator'] = $("#aggrator").val();
   		 data['_token'] = "{{ csrf_token() }}";
            var table = $('#rhi_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,
                     "paging":false,
                     "order": [0, 'asc'],

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

                     },

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

                         {
                             "data": "date",
                             "title": "Date"
                         },
                         {
                             "data": "day",
                             "title": "Day"
                         },
                         {
                             "data": "revenue",
                             "title": "Revenue"
                         },
                         {
                          "data": "revenue_growth",
                          "title": "Revenue Growth in %"
                      },
                      {
                          "data": "order_count",
                          "title": "Orders"
                      },
                      {
                          "data": "order_growth",
                          "title": "order Growth in %"
                      },
                      {
                          "data": "avg",
                          "title": "AOV"
                      },
                      {
                          "data": "avg_growth",
                          "title": "Aveage Growth in %"
                      },
                     
                      {
                          "data": "net_amount",
                          "title": "Open Order Amount (Net Amount)"
                      },
                      {
                          "data": "gross_amount",
                          "title": "Gross Amount"
                      },
                      {
                          "data": "discount",
                          "title": "Discounts"
                      },
                       {
                           "data": "cancelled_orders",
                           "title": "Cancelled Orders"
                       },
                       {
                           "data": "cancelled_order_value",
                           "title": "Cancelled order Value"
                       },
                      {
                          "data": "discount_percentage",
                          "title": "Discount Percentage in %"
                      },


                      
                      {
                          "data": "time_to_accept",
                          "title": "Time To Accept"
                      },
                      {
                          "data": "time_to_process",
                          "title": "Time To Process"
                      },
                      {
                          "data": "kpt",
                          "title": "KPT"
                      },
                      {
                          "data": "time_to_dispatch",
                          "title": "Time To Dispatch"
                      },
                      {
                          "data": "time_for_rider_to_arrive",
                          "title": "Time For Rider To Arrive"
                      },
                      {
                          "data": "rider_wait_time",
                          "title": "Rider Wait Time"
                      },
                         
                     ],
                     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();

     			
        }

        function get_brands_on_kitchen(kitchen_id) {
            var data = {}
            data['kitchen'] = kitchen_id;
            data['_token'] = "{{csrf_token()}}";
            $.ajax({
              type: 'post',
              url: 'get_brands_on_kitchen_cancel',
              data: data,
              success: function(data) {
                var arr = jQuery.parseJSON(data);
                var s = '<option value="0">Select Brands</option>';

                $.each(arr, function(key, val) {
                  // console.log(arr[key]);
                  s += '<option value="' + arr[key]['id'] + '">' + arr[key]['entity'] + '</option>';
                });
                $("#brand").html(s);
              }
            })
          }
    </script>
</body>

</html>