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

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

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header fw-bold bg-primary text-white">💈 Laporan Transaksi Barbershop</div>
        <div class="card-body">
            <form id="filter-form" class="mb-4">
                <div class="row">
                    <div class="col-md-4">
                        <input type="text" class="form-control datepicker mb-2" id="from" placeholder="Dari tanggal">
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control datepicker mb-2" id="to" placeholder="Sampai tanggal">
                    </div>
                    <div class="col-md-1">
                        <button type="submit" class="btn btn-primary btn-sm text-white mb-2">Filter</button>
                    </div>
                    @role('superadmin|admin')
                    <div class="col-md-1">
                        <a id="export-btn" class="btn btn-success btn-sm text-white mb-2">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="capster_id">
                            <option value="">-- Pilih Capster --</option>
                            @foreach($capsters as $capster)
                                <option value="{{ $capster->id }}">{{ ucwords($capster->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>
            @endif

            <div class="table-responsive">
                <table id="barbershop-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>Capster</th>
                            <th>Customer</th>
                            <th>Total Belanja</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

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

        $("#branch_id").select2();
        $("#capster_id").select2();

        let table = $('#barbershop-table').DataTable({
            processing: true,
            serverSide: true,
            autoWidth: false,
            scrollX: true,
            ajax: {
                url: "{{ route('barbershop.report.data') }}",
                data: function(d) {
                    d.from = $('#from').val();
                    d.to = $('#to').val();
                    d.branch_id = $('#branch_id').val();
                    d.capster_id = $('#capster_id').val();
                },
                dataSrc: function(json) {
                    $('#summary-total').text(json.summary_total ?? 'Rp0');
                    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: 'capster', name: 'capster' },
                { data: 'customer', name: 'customer' },
                { 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..."
            }
        });

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

        function updateExportLink() {
            let from = $('#from').val();
            let to = $('#to').val();
            let branch_id = $('#branch_id').val();
            let capster_id = $('#capster_id').val();
            let url = "{{ route('barbershop.report.export') }}" + `?from=${from}&to=${to}&branch_id=${branch_id}&capster_id=${capster_id}`;
            $('#export-btn').attr('href', url);
        }

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