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

@section('title', 'Laporan Transaksi POS')

@push('style')
<style>
@media (max-width: 768px) {
    .laporan-wrapper { display: flex; flex-direction: column; }
    .filter-card { order: 1; }
    .table-card { order: 2; }
    /* hide the table on mobile */
    .table-card .table-responsive { display: none !important; }
    /* show cards on mobile */
    #transaction-cards { display: block !important; }
}

@media (min-width: 769px) {
    .laporan-wrapper { display: flex; flex-direction: column; }
    .filter-card,
    .table-card { order: unset; }
    /* hide cards on desktop */
    #transaction-cards { display: none; }
}
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="laporan-wrapper">
        <div class="card filter-card mb-3">
            <div class="card-header fw-bold bg-primary text-white">🧾 Laporan Transaksi POS</div>
            <div class="card-body">
                <form id="filter-form" class="mb-4">
                    <div class="row g-3 align-items-end">
                        <div class="col-12 col-md-4 mb-2">
                            <label for="from" class="form-label">Dari tanggal</label>
                            <input type="text" class="form-control datepicker" id="from" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-12 col-md-4 mb-2">
                            <label for="to" class="form-label">Sampai tanggal</label>
                            <input type="text" class="form-control datepicker" id="to" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-6 col-md-2 mb-2 d-grid">
                            <button type="submit" class="btn btn-primary btn-sm text-white">Filter</button>
                        </div>
                        @role('superadmin|admin')
                        <div class="col-6 col-md-2 mb-2 d-grid">
                            <a id="export-btn" class="btn btn-success btn-sm text-white">Export Excel</a>
                        </div>
                        @endrole
                    </div>
                    <div class="row g-2 mt-2">
                        @role('superadmin|admin')
                        <div class="col-md-4">
                            <select class="form-control mb-2" id="branch_id">
                                <option value="">-- Pilih Cabang --</option>
                                @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }} - {{ $branch->store->name ?? '-' }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <select class="form-control" id="cashier_id">
                                <option value="">-- Pilih Kasir --</option>
                                @foreach($cashiers as $cashier)
                                <option value="{{ $cashier->id }}">{{ ucwords($cashier->name) }}</option>
                                @endforeach
                            </select>
                        </div>
                        @endrole
                    </div>
                </form>
                @role('superadmin|admin')
                <div class="alert alert-info">
                    <strong>Summary Total Penjualan:</strong> <span id="summary-total">Rp0</span>
                </div>
                @endrole
            </div>
        </div>

        <div class="card table-card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="transactions-table" class="table table-striped table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>No</th><th>Tanggal</th><th>Jam</th><th>Kasir</th><th>Cabang</th><th>Produk</th><th>Total Belanja</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                {{-- cards for mobile --}}
                <div id="transaction-cards" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
$(function(){
    $('.datepicker').datepicker({ format:'yyyy-mm-dd', autoclose:true, todayHighlight:true });
    $("#branch_id, #cashier_id").select2({ tags:false });

    let table = $('#transactions-table').DataTable({
        processing: true, serverSide: true, autoWidth: false, scrollX: true,
        ajax: {
            url: "{{ route('transactions.report.data') }}",
            data: d => {
                d.from = $('#from').val();
                d.to = $('#to').val();
                d.branch_id = $('#branch_id').val();
                d.cashier_id = $('#cashier_id').val();
            },
            dataSrc: function(json) {
                $('#summary-total').text(json.summary_total);
                return json.data;
            }
        },
        columns: [
            { data:'DT_RowIndex', orderable:false, searchable:false, className:'text-center' },
            { data:'tanggal', name:'tanggal' },
            { data:'jam',     name:'jam' },
            { data:'kasir',   name:'kasir' },
            { data:'cabang',  name:'cabang' },
            { data:'product_names', name:'product_names' },
            { data:'total_amount',   name:'total_amount', className:'text-end' }
        ],
        language: {
            search: "Cari:", lengthMenu: "Tampilkan _MENU_ entri", info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
            infoEmpty: "Tidak ada data", paginate: { first:"Awal", last:"Akhir", next:"›", previous:"‹" },
            processing: "Memuat data..."
        }
    });

    // build cards on AJAX load
    table.on('xhr.dt', function(e, settings, json) {
        let cards = '';
        json.data.forEach(row => {
            cards += `
            <div class="card mb-3">
              <div class="card-body">
                <p><strong>No:</strong> ${row.DT_RowIndex}</p>
                <p><strong>Tanggal:</strong> ${row.tanggal}</p>
                <p><strong>Jam:</strong> ${row.jam}</p>
                <p><strong>Kasir:</strong> ${row.kasir}</p>
                <p><strong>Cabang:</strong> ${row.cabang}</p>
                <p><strong>Produk:</strong> ${row.product_names}</p>
                <p><strong>Total Belanja:</strong> ${row.total_amount}</p>
              </div>
            </div>`;
        });
        $('#transaction-cards').html(cards);
    });

    function updateExportLink(){
        const params = $.param({
            from: $('#from').val(),
            to:   $('#to').val(),
            branch_id: $('#branch_id').val(),
            cashier_id: $('#cashier_id').val()
        });
        $('#export-btn').attr('href', "{{ route('transactions.report.export') }}?"+params);
    }

    $('#filter-form').on('submit', function(e){
        e.preventDefault();
        table.ajax.reload();
        updateExportLink();
    });

    updateExportLink();
});
</script>
@endpush