@include('layouts.header');
@include('layouts.sidebar');
<link href='css/jquery-ui.css' rel='stylesheet'>

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/vendor/timepicker/jquery.timepicker.min.css" />
<script src="assets/vendor/timepicker/jquery.timepicker.min.js"></script>
<style>
  /* body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
} */
  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;
    background-color: #a81515;
    color: #a81515;

  }

  button.dt-button:hover:not(.disabled),
  div.dt-button:hover:not(.disabled),
  a.dt-button:hover:not(.disabled) {
    border: 0px solid #ffffff;
    background-color: #000000;
    color: #000000;
    /* background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%); */

  }

  table.dataTable tr.dtrg-group.dtrg-level-0 td {
    font-weight: bold;
  }

  table.dataTable tr.dtrg-group td {
    background-color: #e0e0e0;
  }

  table.dataTable tr.dtrg-group.dtrg-level-1 td:first-child {
    padding-left: 2em;
  }

  table.dataTable tr.dtrg-group.dtrg-level-1 td {
    background-color: #f0f0f0;
    font-weight: bold;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left:  0.75em !important;
  }

  table.dataTable tr.dtrg-group.dtrg-level-1 td, table.dataTable tr.dtrg-group.dtrg-level-2 td {
    padding-left:  0.75em !important;
  }

  table.dataTable tr.dtrg-group.dtrg-level-2 td:first-child {
    padding-left: 3em;
  }


  table.dataTable tr.dtrg-group.dtrg-level-2 td {
    background-color: #fff0f0;
  }

  table.dataTable.compact tbody tr td.order_id {
    padding-left: 4em;
  }

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

<body>
  @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">Merchant Wise Sales Report</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="merchant_wise_sales_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="country" name="country" onchange="get_states_on_country(this.value);" aria-label="">
                          <option value="">All</option>
                          @foreach ($countries as $country)

                          <option value="{{ $country['id'] }}"> {{ $country['name'] }} </option>
                          @endforeach


                        </select>
                        <label for="floatingName">Country</label>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-floating mb-3">
                        <select class="form-select" id="state" name="state" onchange="get_cities_on_state(this.value);" aria-label="">
                          <option value="">All</option>




                        </select>
                        <label for="floatingName">State</label>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-floating mb-3">
                        <select class="form-select" id="city" name="city" aria-label="">
                          <option value="">All</option>




                        </select>
                        <label for="floatingName">City</label>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-floating mb-3">
                        <select class="form-select" id="hub" name="hub" onchange="get_kitchens(this.value);" aria-label="">
                          <option value="">All</option>
                          @foreach ($hubs as $hub)

                          <option value="{{ $hub->id }}"> {{ $hub->hub_name }} </option>
                          @endforeach
                        </select>
                        <label for="floatingName">Select Hub</label>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-floating mb-3">
                        <select class="form-select" id="kitchen" onchange="get_brands_on_kitchen(this.value);" name="kitchen" 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="">All</option>

                        </select>
                        <label for="floatingName">Select Brnad/Entity</label>
                      </div>
                    </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-4">
                      <div class="form-floating">
                        <input type="text" class="form-control" id="from_date" name="from_date" autocomplete="off" placeholder="Your Name" required="">
                        <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="">
                        <label for="floatingName">To Date</span></label>
                        <p id="projectIDSelectError2" style="color:red"></p>
                      </div>
                    </div>



                  </div>
                  <div class="text-center">
						          <button type="submit" id="submit" class="btn btn-primary">Submit</button>
						          <button type="reset" id="" class="btn btn-primary">Reset</button>
                  </div>
                </form>


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

        </div>

      </div>
    </div>


    <div class="col-lg-12" id="tcp_table1">
      <!-- <div class="col-lg-12"> -->
      <div class="card">
        <div class="card-body" style="overflow-x:auto;">
          <div class="row">
            <div class="col-lg-9">
              <h5 class="card-title"> Report</h5>
               <!--<a href="#"><i class="fa fa-file-excel-o export_excel" onclick="exportReportToExcel(this);" aria-hidden="true"></i></a> -->
            </div>
            <div class="col-lg-3" style="align-self: center;">
              <!-- <button type="submit" id="submit" class="btn btn-primary" onclick="Export()">Export Totals of all Brands</button> -->
            </div>
          </div>

          <table id="merchant_wise_table" class='display dataTable nowrap' style="width:100%">
            <thead>
              <tr>
                <!-- <th scope="col">#</th> -->
                <th scope="col">Kitchen</th>
                <th scope="col">Brand</th>
                <th scope="col"></th>
                <th scope="col">Sub Brand</th>
                <th scope="col">No of KOT</th>
                <th scope="col">GMV</th>
                <th scope="col">Packaging</th>
                <th scope="col">Discount</th>
                <th scope="col">