@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Laporan</a></li>
    <li class="breadcrumb-item"><a href="#">Penjualan</a></li>
    <li class="breadcrumb-item active" aria-current="page">Buka Tutup Kasir</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <h5 class="card-header bg-white">
        Laporan Buka Tutup Kasir
      </h5>
      <div class="card-body">
        <div class="row">
          <div class="col-12 col-md-6 col-lg-3">
            <div class="mb-2">
              <select name="kasir_filter" id="kasir_filter" class="form-control select2Custom">
                <option value="">Pilih Kasir</option>
                @foreach ($dataUser as $item)
                <option value="{{$item->id}}">{{$item->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-3">
            <div class="mb-2">
              <input type="text" name="daterange"
                value="{{ date('01/m/Y', strtotime($startDate)) }} - {{ date('d/m/Y', strtotime($endDate)) }}"
                id="daterange" class="form-control" placeholder="Tanggal" readonly>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-3">
            <div class="mb-2">
              <select name="order_by" id="order_by" class="form-control select2Custom">
                <option value="">Pilih Order By</option>
                <option value="tanggal">Tanggal</option>
              </select>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-3">
            <div class="mb-2">
              <select name="sort_by" id="sort_by" class="form-control select2Custom">
                <option value="ASC">A-Z</option>
                <option value="DESC">Z-A</option>
              </select>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-3">
            <div class="row">
              <div class="col-3 pe-1">
                <button type="button" id="btnFilter" class="btn btn-primary btn-custom2 w-100" title="Filter"><span
                    class="mdi mdi-filter"></span></button>
              </div>
              <div class="col-3">
                <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()"
                  title="Reset"><span class="mdi mdi-refresh"></span></button>
              </div>
              <div class="col-3 ps-1">
                <button type="button" class="btn btn-success w-100" onclick="downloadExcel()" title="Excel"><span
                    class="mdi mdi-microsoft-excel"></span></button>
              </div>
              <div class="col-3 ps-1">
                <button type="button" class="btn btn-danger w-100" onclick="printData()" title="Print"><span
                    class="mdi mdi-printer"></span></button>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-3">
          <div class="col-12">
            <div class="table-responsive">
              <div id="buka-tutup-kasir-data">
                @include('pages.laporan.penjualan.buka-tutup-kasir.pagination-buka-tutup-kasir', ['data' => $data])
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
  function fetch_data(page) {
    $.ajax({
      url: "/laporan/penjualan/buka-tutup-kasir?page=" + page,
      data: {
        kasir: $('#kasir_filter').val(),
        daterange: $('#daterange').val(),
        orderby: $('#order_by').val(),
        sortby: $('#sort_by').val()
      },
      success: function(data)
      {
        $('#buka-tutup-kasir-data').html(data);
      }
    });
  }

  $(document).on('click', '.pagination a', function(event){
    event.preventDefault();
    var page = $(this).attr('href').split('page=')[1];
    fetch_data(page);
  });

  $('input[name="daterange"]').daterangepicker({
    autoUpdateInput: false,
    locale: {
      cancelLabel: 'Clear',
      format: 'DD/MM/YYYY'
    }
  });
  $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
  });
  $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
  });

  $('#btnFilter').on('click', function(e){
      fetch_data(1);
  });

  function filterReset(){
    $('#kasir_filter').val('').trigger('change');
    $('#daterange').val("{{ date('01/m/Y', strtotime($startDate)) }} - {{ date('d/m/Y', strtotime($endDate)) }}");
    $('#order_by').val('').change();
    $('#sort_by').val('ASC').change();
    fetch_data(1);
  }

  function downloadExcel(){
    let url = `/laporan/penjualan/buka-tutup-kasir/export-excel?kasir=${$('#kasir_filter').val()}&daterange=${$('#daterange').val()}&orderby=${$('#order_by').val()}&sortby=${$('#sort_by').val()}`;
    window.open(url, "_blank");
  }

  function printData(){
    let url = `/laporan/penjualan/buka-tutup-kasir/preview-pdf?kasir=${$('#kasir_filter').val()}&daterange=${$('#daterange').val()}&orderby=${$('#order_by').val()}&sortby=${$('#sort_by').val()}`;
    window.open(url, "_blank");
  }
</script>
@endpush