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

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

    
    #pageloader{
		display: none;
	}
</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">Brand Wise 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="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="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" 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 Brnad/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="">
                        <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 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="submit" id="submit" class="btn btn-primary">Submit</button>
                    </div>
                    <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" id="tcp_table1">
      <!-- <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;">
          <h5 class="card-title"> Report</h5>
          <table id="brand_list" class='display dataTable' style="width:100%">
            <thead>
              <tr>
                <!-- <th scope="col">Sl. No</th> -->

                <th scope="col">Kitchen Name</th>
                <th scope="col">Kitchen ID</th>
                <th scope="col">Brand</th>
                <th scope="col">Sub Brand</th>
                <th scope="col">Date</th>
                <th scope="col">Bill</th>

                <th scope="col">GMV</th>

                <th scope="col">Packaging</th>

                <th scope="col">Discount</th>
                <th scope="col">RoundOff</th>
                <th scope="col">