@extends('layouts.master')
@extends('sidebar.dashboard')

@section('page-style')


<link rel="stylesheet" href="https://pixinvent.com/demo/vuexy-bootstrap-laravel-admin-template/demo-5/vendors/css/pickers/flatpickr/flatpickr.min.css?id=20f054b8b45ccd177447">




<style>
  @media only screen and (min-width : 1224px) {

.weekendgraphmob {

  margin-left: 188px;

}

.leftsidetable {
  margin-top: -105px;
}

.rightsidetable {
  float: right;
  margin-top: -92px;
}

.storefont {
  position: relative;
  top: -179px;
  color: #3c4b67;
  font-size: 30px;
  font-weight: 700;

}

.card-profile .card-body .profile-image-wrapper .profile-image-2 {
  position: absolute !important;
  top: 96px !important;
  padding: 0 !important;
  margin-bottom: 1.15rem !important;
  left: 117px;
}

.card-profile .card-body .profile-image-wrapper .profile-image-2 img {
  width: fit-content !important;
  height: 123px !important;
  border-radius: 8% !important;
}
}

@media only screen and (max-width: 768px) {

.combody {
  padding: 10px !important;
}

.mobileres {
  height: 35px;
  margin-left: -147px;
  /* position: absolute; */
  margin-top: -59px;
  position: absolute;
}

.leftsidetable {
  margin-top: -32px;
  font-size: 12px;
}

.rightsidetable {
  font-size: 12px;
}

.storefont {

  color: #3c4b67;
  font-size: 12px;
  font-weight: 700;
  margin-top: -43px;
}

.ovaralsales {
  padding: 76px;
}


}
  .boxleft {
    text-align: left;
  }

  .card-profile .card-body {
    position: unset !important;
  }

  


  .mb-3 {
    margin-bottom: 1rem !important;
  }
</style>


@endsection

@section('content')



<section id="statistics-card">

  <!-- Stats Vertical Card -->
  <div class="row">



    <div class="col-lg-12 col-md-6 col-12">
      <div class="card card-profile">
        <img src="{{URL::to('app-assets/images/logo/rmz_bg.jpg')}}" class="img-fluid card-img-top" alt="Profile Cover Photo" />

                <span>
          <h3 class="storefont">{{strtoupper($outletInfo->StoreName)}}</h3>
        </span>
        <div class="card-body combody">
          <div class="profile-image-wrapper">
            <div class="profile-image-2">

              <div>
                <img src="{{$outletInfo->outlet_logo}}" class="mobileres" alt="Profile Picture" />
              </div>
            </div>
          </div>



          <br />

          <br />

          <br />
          <br />

          <table class="leftsidetable" style="text-align: left;">



            <tr>
              <td><strong>Manager</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{ $outletInfo->StoreManagerName}}</td>

            </tr>
            <tr>
              <td><strong>Mobile</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{$outletInfo->StoreManagerPhoneNumber}}</td>

            </tr>


          </table>



          <table class="rightsidetable" style="text-align: left;">



            <tr>
              <td><strong>Opened On</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{date('D, d M Y H:i:s', strtotime($recordSales[0]->firstsync))}}</td>

            </tr>
            <tr>
              <td><strong>Persft Installed On</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{date('D, d M Y H:i:s', strtotime($outletInfo->ADSRInstalledDate))}}</td>

            </tr>
            <tr>
              <td><strong>Last Sync</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td>&nbsp;&nbsp;{{date('D, d M Y H:i:s', strtotime($recordSales[0]->lastsync))}}</td>

            </tr>

            <tr>
              <td><strong>Status</strong> &nbsp;&nbsp;</td>
              <td>:</td>
              <td><span class="" style='font-size: 18px;font-weight: 800;color:red;margin-left: 3px;'>
                  &nbsp;{{$storeStatus}}
                </span></td>

            </tr>

          </table>





          <!-- <span class="badge badge-light-primary profile-badge">Manager : {{$outletInfo->StoreManagerName}}<br/>Mobile : {{$outletInfo->StoreManagerPhoneNumber}}</span><br/>
        <span class="badge badge-light-primary profile-badge">Mobile : {{$outletInfo->StoreManagerPhoneNumber}}</span> -->
          <hr class="mb-2" />





          <ul class="nav nav-pills mb-2">
            <!-- Account -->
            <li class="nav-item">
              <a class="nav-link {{ Route::is('viewStore') ? 'active' : '' }}" href="{{route('viewStore',['pcuser'=>$pcuser, 'store'=>$outletInfo->StoreName])}}">
                <i data-feather="activity" class="font-medium-3 me-50"></i>
                <span class="fw-bold">Overview</span>
              </a>
            </li>

            <!-- billing and plans -->
            <li class="nav-item">
              <a class="nav-link {{ Route::is('storeReports') ? 'active' : '' }}" href="{{route('storeReports',['pcuser'=>$pcuser,'store'=>$outletInfo->StoreName])}}">
                <i data-feather="link" class="font-medium-3 me-50"></i>
                <span class="fw-bold">Reports</span>
              </a>
            </li>
            <!-- notification -->

            <li class="nav-item">
              <a class="nav-link {{ Route::is('salesUpload') ? 'active' : '' }}" href="{{route('salesUpload',['pcuser'=>$pcuser,'store'=>$outletInfo->StoreName])}}">
                <i data-feather="upload-cloud" class="font-medium-3 me-50"></i>
                <span class="fw-bold">Sales Upload</span>
              </a>
            </li>



          </ul>
          <div class="" style="float: right;margin-top: -65px;">
            <!-- <div>
            <h6 class="text-muted fw-bolder">Followers</h6>
            <h3 class="mb-0">10.3k</h3>
          </div>
          <div>
            <h6 class="text-muted fw-bolder">Projects</h6>
            <h3 class="mb-0">156</h3>
          </div> -->
            <div class="ovaralsales">
              <h6 class="text-muted fw-bolder">Overall Sales</h6>
              <h3 class="mb-0"> ₹ 0.00</h3>
            </div>
          </div>
        </div>
      </div>
    </div>









  </div>
  <!--/ Stats Vertical Card -->



</section>
<div class="card">
  <div class="card-header border-bottom">
    <h4 class="card-title">Sales Upload</h4>
    <div class="">
      <!-- <a href="#!" class="btn btn-sm btn-primary">Settings</a> -->
      <div class="btn-group dropup dropdown-icon-wrapper">
        <a href="{{URL::to('/')}}/app-assets/samplefile/sales_format.xlsx" class="btn btn-primary dropdown-toggle dropdown-toggle-split" target="_blank">

          Sample Format &nbsp;<i data-feather="share" class="dropdown-icon"></i>
        </a>
      </div>
    </div>
  </div>


  <div class="card">

    <div class="card-body">

      @if (\Session::has('success'))
      <div class="alert" style="color: red; text-align:center;">
        <ul style="list-style:none;">
          <li>{!! \Session::get('success') !!}</li>
        </ul>
      </div>
      @endif


      <div class="d-flex align-items-center justify-content-center h-px-500">

        <form class="w-px-500 border rounded p-3 p-md-5" method="post" enctype="multipart/form-data">
          @csrf

          <input type="hidden" name="outlet_id" value="{{$outletInfo->Id}}">
          <input type="hidden" name="pc_id" value="{{$outletInfo->pc_id}}">

          <div class="mb-1">

            <input class="form-control" type="file" required name="importfile">
            @if(count($errors) > 0)
            <div style="color: red; text-align:center;">
              <ul style="list-style:none;">
                @foreach($errors->all() as $error)
                <li style="padding: 15px;margin-left: -20px;">{{ $error }}</li>
                @endforeach
              </ul>
            </div>
            @endif
          </div>



          <div class="d-grid">
            <button type="submit" class="btn btn-primary waves-effect waves-light">Upload</button>
          </div>
        </form>
      </div>
    </div>



  </div>






</div>




<section id="ajax-datatable">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header border-bottom">
          <h4 class="card-title">Uploaded Sales Data (<strong>{{strtoupper($outletInfo->StoreName)}}</strong>)</h4>

          <div class="row input-daterange">
            <div class="col-md-4" style="padding-bottom: 10px;" >
              <input type="text" name="from_date" id="from_date" class="form-control flatpickr-basic-new" placeholder="From Date" readonly />
            </div>
            <div class="col-md-4" style="padding-bottom: 10px;" >
              <input type="text" name="to_date" id="to_date" class="form-control flatpickr-basic-new"  placeholder="To Date" readonly />
            </div>
            <div class="col-md-4" style="padding-bottom: 10px;">
              <button type="button" name="filter" id="filter" class="btn btn-primary">Filter</button>
              <button type="button" name="refresh" id="refresh" class="btn btn-primary"><i data-feather="refresh-cw"></i></button>

            </div>
          </div>
        </div>
        <div class="card-datatable">
          <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer table-responsive" style="padding: 25px;">
            <table class="datatables-ajax table table-responsive dataTable no-footer" id="order_table" role="grid" aria-describedby="DataTables_Table_0_info" style="width: 1443px;">

              <thead>
                <tr>
                  <th>Invoice</th>
                  <th>Bill Date</th>
                  <th>Amount</th>
                  <th>Tax Amount</th>
                  <th>Total Amount</th>
                </tr>
              </thead>


            </table>

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







@endsection


@section('page-script')




<script src="https://pixinvent.com/demo/vuexy-bootstrap-laravel-admin-template/demo-5/js/scripts/forms/pickers/form-pickers.js?id=3511d2e1da949eb41be0"></script>

<script>
  $(document).ready(function() {


    $('.flatpickr-basic-new').flatpickr();

  })


  function getFormattedTime() {
    var today = new Date();
    var y = today.getFullYear();
    // JavaScript months are 0-based.
    var m = today.getMonth() + 1;
    var d = today.getDate();
    var h = today.getHours();
    var mi = today.getMinutes();
    var s = today.getSeconds();
    return y + "-" + m + "-" + d + "-" + h + "-" + mi + "-" + s;
  }



  $('#report_name').change(function() {
    var report = $(this).val();
    if (report == 'MonthSalesReport') {
      $('#yearview').show();
      $('#dateview').hide();

      $('#fromdate').hide();
      $('#todate').hide();

    } else {
      $('#yearview').hide();
      $('#dateview').show();

      $('#fromdate').show();
      $('#todate').show();
    }

  });




  if ($('#salestable').length) {
    $('#salestable').DataTable({
      "pageLength": 50,
      responsive: true,
      fixedHeader: {
        header: true,
      },
      processing: true,
      // serverSide: true,
    });
  }
</script>

<script src="{{ asset('dist/js/jquery.base64.js') }}"></script>
<script src="{{ asset('dist/js/tableExport.min.js') }}"></script>
<script src="{{ asset('dist/js/xlsx.core.min.js') }}"></script>



<script src="{{ asset('dist/js/jspdf.min.js') }}"></script>
<script src="{{ asset('dist/js/jspdf.plugin.autotable.js') }}"></script>



<script>
  $(document).ready(function() {
    // $('.input-daterange').datepicker({
    //     todayBtn:'linked',
    //     format:'yyyy-mm-dd',
    //     autoclose:true
    // });

    load_data();

    function load_data(from_date = '', to_date = '') {
      $('#order_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
          url: '{{ route("salesUpload",["pcuser"=>$pcuser,"store" => "Theobroma"]) }}',
          data: {
            from_date: from_date,
            to_date: to_date
          }
        },
        columns: [{
            data: 's_invoice',
            name: 's_invoice'
          },
          {
            data: 's_bill_date',
            name: 's_bill_date'
          },
          {
            data: 's_total_price',
            name: 's_total_price'
          },
          {
            data: 's_total_tax',
            name: 's_total_tax'
          },
          {
            data: 's_total_price_with_tax',
            name: 's_total_price_with_tax'
          }
        ]
      });
    }

    $('#filter').click(function() {
      var from_date = $('#from_date').val();
      var to_date = $('#to_date').val();

      if (from_date != '' && to_date != '') {
        $('#order_table').DataTable().destroy();
        load_data(from_date, to_date);
      } else {
        alert('Both Date is required');
      }

    });

    $('#refresh').click(function() {
      $('#from_date').val('');
      $('#to_date').val('');
      $('#order_table').DataTable().destroy();
      load_data();
    });
  });
</script>


@endsection