@extends('layouts.admin.base-dashboard')

@section('title', 'Laporan Buka / Tutup Toko')

@section('content')
<div class="card">
    <div class="card-header">Laporan Buka / Tutup Toko</div>
    <div class="card-body">
        <form id="filterForm" class="row g-2 mb-4">
            <div class="col-md-3">
                <input type="text" name="from_date" class="form-control datepicker" placeholder="Dari Tanggal" autocomplete="off">
            </div>
            <div class="col-md-3">
                <input type="text" name="to_date" class="form-control datepicker" placeholder="Sampai Tanggal" autocomplete="off">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm">Filter</button>
            </div>
            <div class="col-md-2">
                <a href="#" id="exportExcel" class="btn btn-success text-white">Download Excel</a>
            </div>
        </form>

        <table class="table table-bordered" id="reportTable">
            <thead>
                <tr>
                    <th>Tanggal</th>
                    <th>Jam Buka</th>
                    <th>Jam Tutup</th>
                    <th>Kas Awal</th>
                    <th>Total Penjualan</th>
                    <th>Kas Akhir</th>
                    <th>Selisih</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('script')
<script>
    $(document).ready(function() {
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });

        let table = $('#reportTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('cashiers.report.store') }}",
                data: function(d) {
                    d.from_date = $('input[name=from_date]').val();
                    d.to_date = $('input[name=to_date]').val();
                }
            },
            columns: [
                { data: 'tanggal', name: 'tanggal' },
                { data: 'jam_buka', name: 'jam_buka', orderable: false, searchable: false },
                { data: 'jam_tutup', name: 'jam_tutup', orderable: false, searchable: false },
                { data: 'cash_open', name: 'cash_open' },
                { data: 'total_penjualan', name: 'total_penjualan', orderable: false, searchable: false },
                { data: 'cash_close', name: 'cash_close' },
                { data: 'selisih', name: 'selisih', orderable: false, searchable: false },
            ]
        });

        $('#filterForm').submit(function(e) {
            e.preventDefault();
            table.ajax.reload();
        });

        $('#exportExcel').click(function(e) {
            e.preventDefault();
            let from = $('input[name=from_date]').val();
            let to = $('input[name=to_date]').val();
            let url = "{{ route('cashiers.store.exportExcel') }}" + '?from_date=' + from + '&to_date=' + to;
            window.location.href = url;
        });
    });
</script>
@endpush