@extends('layouts.kasir')

@section('title', 'Riwayat Order')

@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>
                            </div>
                        </div>
                    </div>

                    <div class="card-block table-border-style">
                        <div class="table-responsive">
                            <table id="tbl_list" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th width="5%">No</th>
                                        <th>Kode Transaksi</th>
                                        <th>Pemesan</th>
                                        <th>No. Meja</th>
                                        <th>Pembayaran</th>
                                        <th>Total</th>
                                        <th>Tanggal</th>
                                        <th>Status</th>
                                        <th>Status Order</th>
                                        <th width="15%">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @include('kasir.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('tbl_list', '{{ route('kasir.orders.index') }}', [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false, searchable: false
            },
            {
                data: 'kode',
                name: 'kode',
            },
            {
                data: 'orderer',
                name: 'orderer',
            },
            {
                data: 'table_number',
                name: 'table_number',
            },
            {
                data: 'payment',
                name: 'payment',
            },
            {
                data: 'total_harga',
                name: 'total_harga',
            },
            {
                data: 'tgl',
                name: 'tgl',
            },
            {
                data: 'badge',
                name: 'badge',
            },
            {
                data: 'order_badge',
                name: 'order_badge',
            },
            {
                data: 'action',
                name: 'action',
                orderable: false, searchable: false
            },
        ]);

        $("#bulan_filter, #tahun_filter").on("change", function() {
            $("#tbl_list").DataTable().ajax.reload();
        });

        $("#saveData").submit(function(e) {
            setButtonLoadingState("#saveData .btn.btn-primary", true);
            e.preventDefault();
            const kode = $("#kode").text();
            const data = new FormData(this);

            if (kode !== "") {
                data.append("_method", "PUT");
                url = `/kasir/orders/${kode}`;
            }

            const successCallback = function(response) {
                setButtonLoadingState("#saveData .btn.btn-primary", false);
                handleSuccess(response, "tbl_list", "createModal");
                resetImagePreview();
            };

            const errorCallback = function(error) {
                setButtonLoadingState("#saveData .btn.btn-primary", false);
                handleError(error, 'dataTableId', 'modalId');
                handleValidationErrors(error, "saveData", ["is_paid", "order_status"]);
                // if (error.status === 419) {
                //     // console.warn("CSRF token mismatch. Halaman akan direfresh...");
                //     location.reload(); // Refresh halaman otomatis saat error 419
                //     return;
                // }
            };

            ajaxCall(url, "POST", data, successCallback, errorCallback);
        });
    });
</script>
@endpush

@endsection