@extends('admin.layout')

@section('content')


<style type="text/css">
body{
  font-family: 'Poppins', sans-serif!important;
}
.my-account-section {
    background: #f1f1f1;
    font-family: 'Poppins', sans-serif!important;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Poppins', sans-serif!important;
}

.page-breadcrumb li{
  font-family: 'Poppins', sans-serif!important;
}
.myaccount-content {
    background: #ffffff;
}

.myaccount-content h3 {
    border-bottom: none;
    padding-bottom: 0px;

}
.info-section {
    display: inline-block;
    width: 100%;
    margin: 50px 0px;
        margin-top: 0;
}

.panel-widget {
    background: #cea679 none repeat scroll 0 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    float: left;
    margin-right: 20px;
       width: 23.7%;
}

.info-section .panel-widget:last-child {
    margin-right: 0;
}
.mini-stats {
    background: rgba(0, 0, 0, 0) linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%) repeat scroll 0 0;
    float: left;
    min-height: 100px;
    padding: 30px;
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
}


  .sidenav{
  width: 0px;
}

.sidenav .closebtn{
    display: block;
}

.content-wrapper {
    margin-left: 0px !important;
}
.content-wrapper.close-wrapper {
    margin-left: 300px!important;
}


.mini-stats > p {
    color: #fff;
    float: left;
    font-size: 12px;
    font-weight: 600;
    line-height: initial;
    margin: 0;
    text-transform: uppercase;
}

.mini-stats > span {
    background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    float: right;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    width: 32px;
    margin-top: -5px;
}

.mini-stats > h3 {
    color: #fff;
    display: inline-block;
    font-size: 32px;
    line-height: 20px;
    margin-bottom: 20px;
    margin-top: 8px;
    position: relative;
    width: 100%;
}


.mini-stats > em {
    color: #fff;
    font-size: 13px;
}

.table > thead > tr > th {
    font-size: 14px !important;
} 

.table > tbody > tr > td {
    font-size: 13px;
    line-height: 1.7;
}


.mini-stats > i {
    bottom: 30px;
    color: #fff;
    font-size: 65px;
    -webkit-opacity: 0.4;
    -moz-opacity: 0.4;
    -ms-opacity: 0.4;
    -o-opacity: 0.4;
    opacity: 0.4;
    position: absolute;
    right: 12px;
}

.order-filters .form-control{
  font-size: 14px;
  border-radius: 30px;
}

.order-filters select {
    background: url(/resources/views/outlets/common/images/arrow-grey.png);
    background-repeat: no-repeat;
    background-position: right 10px;
}


.table .form-control{
  font-size: 14px;
  border-radius: 30px;
}

.table select {
    background: url(/resources/views/outlets/common/images/arrow-grey.png);
    background-repeat: no-repeat;
    background-position: right 10px;
}

.info-section .mini-stats.purpal-grdnt {
    background: rgba(0, 0, 0, 0) linear-gradient(-135deg, #899fd4 0%, #a389d4 100%) repeat scroll 0 0;
}


.info-section .mini-stats.blue-grdnt {
    background: #04a9f5 none repeat scroll 0 0;
}

.info-section .mini-stats.red-grdnt {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #f77062 0%, #fe5196 100%) repeat scroll 0 0;
}

.myaccount-tab-menu {
    min-height: 875px;
    -webkit-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
    -moz-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
    -ms-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
    -o-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
    box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
}

.dataTable tr{
    background-color: #fff;
    box-shadow: 0 0 3px #e5e5e5;

}
.dataTable thead {
    background-color: #fff;
    box-shadow: 0 0 3px #e5e5e5;
}

.table-bordered {
    border: none;
}
.dataTable tbody tr:nth-of-type(odd) {
    background-color: #ffffff;
}


.dataTables_length label {
    font-size: 14px!important;
}


.dataTables_wrapper div.dataTables_info {
    font-size: 14px;
    padding-top: 20px!important;
}

.dataTables_wrapper div.dataTables_paginate {
    padding-top: 20px;
}


.dataTables_length {
    text-align: left;
}

.btn {
    background-color: #cea679;
    color: #ffffff;
    font-size: 14px;
    height: auto;
    font-weight: 400;
    padding: 6px 30px;
    text-transform: capitalize;
    border-radius: 30px;
}

.btn:hover{
  color: #fff;
}


div.dataTables_wrapper div.dataTables_info {
    text-align: left;
}

div.dataTables_wrapper div.dataTables_length select {
    height: 40px!important;
}

.nice-select{
  line-height: 30px;
}

.nice-select:after{
  display: none;
}

.table-bordered td {
	border: none!important;
}
.table-bordered th {
    border: none!important;
    border-bottom: 1px solid #e4e4e4!important;
        box-shadow: 0 0 3px #e5e5e5;
}

.table td {
    font-size: 14px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .page-item.active .page-link {
    color: white;
    background: #2962ff;
    border-color: white;
}

.table .thead-light th {
    background-color: #fff;
}

.label-success {
    background: #F62D55 !important;
  }

.btn-white i{
  color: #444;
}

.table td, .table th {
    text-align: left!important;
}


td.togle:first-child {
  background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.togle:first-child {
  background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}
.space-30{
  height: 30px;
  display: block;
}
.table td input {
    font-size: 12px!important;
    padding: .375rem .75rem!important;
}

.label {
    
    color: #fff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    font-size: 12px !important;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem!important;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.label-info{
	background: #7963ff!important;
}


.label-danger{
	background: #f62d51!important;
}

.label-success{
	background: #2962ff!important;
}

.la.la-ellipsis-v {
    font-size: 24px;
    color: #929292;
    font-weight: 600;
}
.dropdown-toggle::after{
    display: none;
}

select.form-control.cancel {
    color: #b53a3b;
    border: #f1baba;
    background: #f1baba;
}

select.form-control.cancel {
    background: #f1baba url(/resources/views/outlets/common/images/arrow-red.png);
    background-repeat: no-repeat;
    background-position: right 10px;
}


select.form-control.pending {
    background: #dde1ff;
    border: 1px solid #dde1ff;
    color: #4744a9;
}

select.form-control.pending {
    background: #dde1ff url(/resources/views/outlets/common/images/arrow-purple.png);
    background-repeat: no-repeat;
    background-position: right 10px;
}



select.form-control.confirm {
    background: #cbffe4;
    border: 1px solid #cbffe4;
    color: #258653;
}


select.form-control.confirm {
    background: #cbffe4 url(/resources/views/outlets/common/images/arrow-green.png);
    background-repeat: no-repeat;
    background-position: right 10px;
}







</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,500,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" >
<link rel="stylesheet" type="text/css" href="/resources/views/admin/dist/css/line-awesome.min.css">

<div class="content-wrapper"> 
  <section class="content"> 
        <div class="container-fluid">
            <div class="row">

              <div class="col-md-12">

                <div class="order-filters">
                  <div class="row">

                    <div class="col-md-2">
                      <h3>Orders</h3>
                    </div>

                    <div class="col-md-2">
                      <div class="status-container">  
                          <select class="form-control" id="dropdown1" onchange="filterstatus(this.value);">
                            <option value="0">Status</option>
                            <option value="all">All</option>
                            <option value="pending">Processing</option>
                            <option value="cancel">Cancelled</option>
                            <option value="confirm">Delivered</option>
                          </select>
                      </div>
                    </div>


                    <div class="col-md-2">
                      <div class="status-container">
                         <input class="form-control date1" name="StartDate" type="text" value="Date" onchange="filterdate(this.value);">                           
                          
                      </div>
                    </div>



                    <div class="col-md-2">
                      <div class="status-container">                          
                          <input class="form-control" name="search" type="text" placeholder="Search" >  
                      </div>
                    </div>


                  </div>
                </div> 


                 <div class="space-30"></div>

              </div>


             




                <div class="col-md-12">


                  <div class="myaccount-content">
                      <div class="table-responsive">
                          <table id="example" class="table table-bordered">
                              <thead class="thead-light">
                                  <tr>                                  	 
                                      <th>Order Id</th>
                                      <th>Customer Name / Email</th>
                                      <th>Billing Details / Date</th>                                      
                                      <th>Shipping Details</th>
                                      <th>Shipping Methods</th>
                                      <th>Qty</th>
                                      <th>Amount</th>
                                      <th>Payment Status</th>
                                      <th>Order Status</th>
                                      <!--<th>Product Details</th> -->
                                     <th>Action</th>
                                  </tr>
                              </thead>

                              <tbody id="tb">
                                
                                
                                          
                                    
                              </tbody>
                          </table>
                      </div>

                  </div>
                 

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


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Product information</h4>
      </div>
      <div class="modal-body">
        <table id="example1" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Image</th>
                <th>Name</th>
                 <th>SKU</th>
                <th>Price</th>
                <th>Qty</th>
                <th>Amount</th>
               
            </tr>
        </thead>
        <tbody id="tbl">
        
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


      <!-- deletepagesModal -->

  <div class="modal " id="manufacturerModal" tabindex="-1" role="dialog" aria-labelledby="deleteManufacturerModalLabel">

    <div class="modal-dialog" role="document">

    <div class="modal-content">

      {!! Form::open(array('url' =>'admin/deleteorders', 'name'=>'deleteManufacturer', 'id'=>'deleteManufacturer', 'method'=>'post', 'class' => 'form-horizontal', 'enctype'=>'multipart/form-data')) !!}

          {!! Form::hidden('action',  'delete', array('class'=>'form-control')) !!}

          {!! Form::hidden('pages_id',  '', array('class'=>'form-control', 'id'=>'manufacturers_id')) !!}

      <div class="modal-body">  
      <center><img style="width: 60px; padding-bottom: 20px;" src="/resources/views/outlets/common/images/cancel.svg" alt=""></center>          

        <p>Are you sure you want to delete this order?</p>

      </div>

      <div class="modal-footer">

      <button type="button" class="btn btn-default" data-dismiss="modal"><img src="/resources/views/outlets/common/images/cancel.svg" alt=""></button>

      <button type="submit" class="btn btn-primary"> <img src="/resources/views/outlets/common/images/verified.svg" alt=""></button>

      </div>

      {!! Form::close() !!}

    </div>



    

    <!-- /.row --> 
</div>
</div>




<!-- <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"type="text/javascript"></script> -->


<script type='text/javascript'>
$(function(){
$('.date1').datepicker({
    calendarWeeks: true,
    todayHighlight: true,
    autoclose: true
});  

});

</script>



<script type="text/javascript">




  var id=$('.table.table-bordered').id;
  var jquery = $.noConflict(true);
  jquery(document).ready( function () {
    jquery('#'+id).DataTable();
   } );



   // jquery('table').dataTable({searching: false});
</script>


<script type="text/javascript">
	//var table = jquery('#example').DataTable();

jquery('#example tbody').on('click', 'td:first-child', function () {
  var tr = jquery(this).closest('tr');
  var row = table.row( tr );

  if (row.child.isShown()) {

    row.child.hide();
    tr.removeClass('shown');
  } else {

    row.child('<div class="table-responsive"> <table class="table table-bordered"> <thead class="thead-light"> <tr> <th>Order Id</th> <th>Customer Name</th> <th>Billing Details</th> <th>Payment</th> </tr> </thead> <tbody> <tr> <td>12343</td> <td>John Doe</td> <td>Singapore</td> <td>Stripe</td> </tr> <tr> <td>12343</td> <td>John Doe</td> <td>Singapore</td> <td>Stripe</td> </tr> <tr> <td>12343</td> <td>John Doe</td> <td>Singapore</td> <td>Stripe</td> </tr> <tr> <td>12343</td> <td>John Doe</td> <td>Singapore</td> <td>Stripe</td> </tr> <tr> <td>12343</td> <td>John Doe</td> <td>Singapore</td> <td>Stripe</td> </tr> </tbody> </table> </div>').show();
    tr.addClass('shown');
  }
});
</script>
<script type="text/javascript">
  function changestatus(id,val){
  
                
              $.ajax({
                           url:"changeorderstatus",
                           method:'GET',
                           data:{id:id,value:val},
                       
                           success:function(data)
                           {
                          
                             //alert(data);
                           location.reload(true);
                           
                           }

                      })
       
  }

  function filterstatus(value){
     $.ajax({
                           url:"filterorderstatus",
                           method:'GET',
                           data:{value:value},
                       
                           success:function(data)
                           {
                            //alert(data);
                          //console.log(data);
                          $('#tb').html(data);
                           
                           }

                      })
  }

  function filterdate(value){
     $.ajax({
                           url:"filterorderdate",
                           method:'GET',
                           data:{value:value},
                       
                           success:function(data)
                           {
                            //alert(data);
                          //console.log(data);
                          $('#tb').html(data);
                           
                           }

                      })
  }

  function productinfo(value){

 $.ajax({
                           url:"showorderinfo",
                           method:'GET',
                           data:{value:value},
                       
                           success:function(data)
                           {
                          //console.log(data);
                          $('#tbl').html(data);
                           $('#myModal').modal('show');
                           }

                      })
  }

</script>




@endsection