@extends('site.layouts.app')

@section('title', 'Order Items Report')

@section('stylesheets')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
{{-- Flatpickr CSS jika belum ada di layout utama --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<style type="text/css">
    .avatar-sm {
        height: 3rem;
        width: 3rem;
    }

    table.dataTable tbody td {
        vertical-align: middle;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Items Report</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('site.home', ['site' => $site->slug]) }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Popular Items</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center flex-wrap gap-2">
                    <div class="flex-grow-1">
                        <h5 class="card-title mb-0">List Popular Items</h5>
                    </div>
                    <div class="flex-shrink-0">
                        <div class="hstack text-nowrap gap-2">

                            <button id="btn-export" onclick="exportData()" class="btn btn-success">
                                <i class="ri-restart-line me-1 align-bottom"></i> Export
                            </button>

                            <button class="btn btn-danger" type="button" data-bs-toggle="offcanvas"
                                data-bs-target="#searchCanvas">
                                <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <table id="popularItemsTable"
                    class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline"
                    style="width:100%">
                    <thead>
                        <tr>
                            <th>Item Name</th>
                            <!-- <th>Menu Name</th> -->
                            <th>Jumlah pesanan</th>
                            <th>Total Qty</th>
                            <th>Satuan</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Offcanvas Filter --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="searchCanvas" aria-labelledby="searchCanvasLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="form-search" autocomplete="off">
            <div class="mb-3">
                <label class="control-label" for="date">Date</label>
                <input type="text" id="date" class="form-control flatpickr" name="date"
                    placeholder="Select Date" value="{{ date('d/m/Y') }}"
                    data-provider="flatpickr"
                    data-date-format="d/m/Y"
                    data-mode="single">
            </div>
            <div class="mb-3">
                <label class="form-label">Cycle</label>
                <select class="form-control" id="food_menu_cycle_id" name="cycle" data-placeholder="Select Cycle">
                    <option></option>
                </select>
            </div>
        </form>
    </div>
    <div class="offcanvas-footer border-top p-3 d-grid">
        <button onclick="applyFilter()" class="btn btn-primary w-100">
            <i class="ri-search-line"></i> Apply Filter
        </button>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> --}}

<script>
    var table;

    $(document).ready(function() {

        // Init Flatpickr
        flatpickr("#date", {
            dateFormat: "d/m/Y",
            defaultDate: "today",
            mode: "single"
        });

        $(`#food_menu_cycle_id`).select2({
            ajax: {
                url: "{{ route('site.order.selectcycle', ['slug' => $site->slug]) }}",
                type: 'GET',
                dataType: 'json',
                data: function(params) {
                    var date = $("#date").val();
                    return {
                        date: date,
                        name: params.term,
                        page: params.page,
                        limit: 30,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.rows, function(index, item) {
                        option.push({
                            id: item.id,
                            text: `${item.name} (${item.start_time?.slice(0,5) ?? '-'} - ${item.stop_time?.slice(0,5) ?? '-'})`,
                            email: `${item.email}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more: (params.page * 30) < data.total
                        },
                    };
                },
            },
            allowClear: true,
            dropdownParent: $("#searchCanvas"),
        });

        // Init DataTables
        table = $('#popularItemsTable').DataTable({
            stateSave: false,
            serverSide: true,
            processing: true,
            filter: false,
            info: true,
            ordering: true,
            paging: true,
            ajax: {
                url: "{{ route('site.reportmenuitem.read', ['site' => $site->slug]) }}",
                type: "GET",
                data: function(d) {
                    d.date = $('#date').val();
                    d.cycle = $('#food_menu_cycle_id').val();
                    // d.search['value']
                }
            },
            columnDefs: [{
                    targets: 0,
                    render: function(data, type, row) {
                        return `<span>${row.food_item_name} <small class="text-muted">(${row.food_item_id})</small></span>`;
                    }
                },
                {
                    targets: 1,
                    render: function(data, type, row) {
                        let menuInfo = row.menu_id ? ` <small class="text-muted">(ID: ${row.menu_id})</small>` : '';
                        return `<span>${data}${menuInfo}</span>`;
                    }
                },
                {
                    targets: [2],
                    className: 'text-end',
                },
                {
                    targets: [3],
                    className: 'text-center',
                }
            ],
            columns: [{
                    data: "food_item_name",
                    name: "food_item_name"
                },
                // { data: "food_menu", name: "food_menu" },
                {
                    data: "order_count",
                    name: "order_count"
                },
                {
                    data: "total_qty",
                    name: "total_qty"
                },
                {
                    data: "unit",
                    name: "unit"
                }
            ],
            language: {
                emptyTable: "No popular item data available for this period"
            }
        });
    });

    function applyFilter() {
        var bsOffcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('searchCanvas'));
        if (bsOffcanvas) {
            bsOffcanvas.hide();
        }
        table.ajax.reload();
    }

    function exportData() {
        let date = $('#date').val();
        let cycle = $('#food_menu_cycle_id').val();
        let baseUrl = "{{ route('site.reportmenuitem.export', ['site' => $site->slug]) }}";
        let url = `${baseUrl}?date=${encodeURIComponent(date)}&cycle=${encodeURIComponent(cycle)}`;
        let btn = $('#btn-export');
        let originalText = btn.html();
        btn.prop('disabled', true).html('<i class="ri-loader-4-line ri-spin align-bottom"></i> Downloading...');
        window.location.href = url;
        setTimeout(function() {
            btn.prop('disabled', false).html(originalText);
        }, 3000);
    }
</script>
@endpush