@extends('layouts.dashboard')

@section('title', 'Laporan Pendapatan')

@section('main')
@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css" rel="stylesheet" />
@endpush

<div class="pcoded-inner-content">
    <!-- Main-body start -->
    <div class="main-body">
        <div class="page-wrapper">
            <!-- Page-body start -->
            <div class="page-body">
                <!-- Hover table card start -->
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center w-100">
                            <div class="col-md-7 col-12 mb-3">
                                <h4>@yield('title')</h4>
                                <span>
                                    Silakan kelola <code>Data @yield('title')</code> sesuai kebutuhan bisnis Anda
                                </span>
                            </div>
                            <div class="col-md-5 col-12">
                                <div class="form-row">
                                    <div class="col-md-7 col-6">
                                        <label for="bulan_filter" class="col-form-label">Bulan</label>
                                        <select name="bulan_filter" id="bulan_filter" class="form-control">
                                            @foreach (bulan() as $key => $value)
                                                <option value="{{ $key + 1 }}" {{ $key + 1 == date('m') ? 'selected' : '' }}>
                                                    {{ $value }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-5 col-6">
                                        <label for="tahun_filter" class="col-form-label">Tahun</label>
                                        <select name="tahun_filter" id="tahun_filter" class="form-control">
                                            @for ($i = now()->year; $i >= now()->year - 4; $i--)
                                                <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>
                                                    {{ $i }}
                                                </option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="col-md-7 col-6 mt-3">
                                        <label for="category_filter" class="form-label">Kategori</label>
                                        <select name="category_filter" id="category_filter" class="form-control">
                                            <option value="">Semua</option>
                                            @foreach ($category as $row)
                                                <option value="{{ $row->id }}">
                                                    {{ $row->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-5 col-6 mt-3">
                                    <label for="category_filter" class="form-label">@yield('title')</label> <br>
                                        <a id="downloadPdf" class="btn btn-sm btn-danger w-100" target="_blank"><i
                                                class="bi bi-file-pdf me-2"></i>Unduh Pdf</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-block table-border-style">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="pendapatan-table" width="100%">
                                    <thead>
                                        <tr>
                                            <th width="5%">#</th>
                                            <th>Tanggal</th>
                                            <th>Pemesan</th>
                                            <th>Menu</th>
                                            <th>Kategori</th>
                                            <th>Qty</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @include('admin.order.detail')
            </div>
        </div>
    </div>
</div> 

@push('script')
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
        $(document).ready(function() {
            datatableCall('pendapatan-table', '{{ route('dashboard.income') }}', [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'tgl',
                    name: 'tgl'
                },
                {
                    data: 'pemesan',
                    name: 'pemesan'
                },
                {
                    data: 'menu',
                    name: 'menu'
                },
                {
                    data: 'category',
                    name: 'kategori'
                },
                {
                    data: 'quantity',
                    name: 'qty'
                },
                {
                    data: 'total_harga',
                    name: 'total_harga'
                },
            ]);

            renderData();

            $("#bulan_filter, #tahun_filter, #category_filter").on("change", function() {
                $("#pendapatan-table").DataTable().ajax.reload();
                renderData();
            });
        });

        const renderData = () => {
            const downloadPdf =
                `/dashboard/income?mode=pdf&bulan=${$("#bulan_filter").val()}&tahun=${$("#tahun_filter").val()}&category=${$("#category_filter").val()}`;
            $("#downloadPdf").attr("href", downloadPdf);
        }
    </script>
@endpush

@endsection