@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">Harian</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-header bg-white">
            <form action="{{ url('laporan/penjualan/harian') }}">
              <div class="row">
                  <div class="col-12 mb-3">
                    <h3>LAPORAN HARIAN</h3>
                  </div>
                  <div class="col-6">
                      <div class="mb-2">
                          <input type="text" value="{{ request()->daterange }}" name="daterange" id="daterange" class="form-control" placeholder="Tanggal" readonly>
                      </div>
                  </div>
                  <div class="col-12 col-md-3">
                      <div class="row">
                          <div class="col-3 pe-1">
                              <button type="submit" class="btn btn-primary btn-custom2 w-100" title="Filter"><span class="mdi mdi-filter"></span></button>
                          </div>
                          <div class="col-3">
                              <a href="{{ url('laporan/penjualan/harian') }}" class="btn btn-light btn-custom8 w-100" title="Reset"><span class="mdi mdi-refresh"></span></a>
                          </div>
                      </div>
                  </div>
              </div>
            </form>
        </div>
      <div class="card-body">
        <div class="row">
            <div class="col-12">
                <div class="table-responsive">
                    <div id="buka-tutup-kasir-data">
                        @include('pages.laporan.penjualan.laporan-harian.table')
                    </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>
  $('input[name="daterange"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
        cancelLabel: 'Clear'
      }
    });
  $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' to ' + picker.endDate.format('DD/MM/YYYY'));
  });
  $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
  });
</script>
@endpush