@extends('site.layouts.app')

@section('title', 'Revenue 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">
<style type="text/css">
    .product-wrapper {
        display: flex;
    }

    .btn-no-hover:hover {
        cursor: default;
    }
</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">Revenue 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">Revenue Report</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="overlay d-none">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <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">
                    </div>
                    <div class="flex-shrink-0">
                        <div class="hstack text-nowrap gap-2">
                            <a href="#" onclick="refresh()" class="btn btn-success">
                                <i class="ri-restart-line me-1 align-bottom"></i> Refresh
                            </a>
                            <a href="#" onclick="filter()" class="btn btn-danger">
                                <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="mb-4 fw-bolder">
                    <div class="mb-2">
                        <span id="revenue-display">Total Revenue:</span>
                    </div>
                    <div>
                        <span id="period-display">Periode: </span>
                    </div>

                </div>
                <table
                    class="table mt-4 table-bordered nowrap table-striped align-middle no-footer dtr-inline datatable"
                    style="width:100%">
                    <thead>
                        <tr>
                            <th width="10">No</th>
                            <th width="100">Order For</th>
                            <th width="100">Creation Date</th>
                            <th width="100">Order No.</th>
                            <th width="100">Location</th>
                            <th width="100">Type</th>
                            <th width="10">Name</th>
                            {{-- <th width="10">Cycle</th> --}}
                            <th width="10">Item</th>
                            <th width="100">Total Price</th>
                            {{-- <th width="10">Diet</th>
                                <th width="10">Food Texture</th>
                                <th width="10">Alergy</th>
                                <th width="10">Note</th> --}}
                            {{-- <th width="10">Process Status</th> --}}
                            <th width="10">#</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<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>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-search" autocomplete="off">
            <div class="mb-3">
                <label class="control-label" for="date">Period</label>
                <input type="text" id="date" class="form-control flatpickr" name="date" placeholder="Period"
                    data-provider="flatpickr" data-date-format="d/m/Y" data-range-date="true" required>
            </div>
            {{-- <div class="mb-3">
                    <label class="control-label" for="name">Code</label>
                    <input type="text" id="code" name="code" class="form-control" placeholder="Code">
                </div> --}}
            {{-- <div class="mb-3">
                    <label class="control-label" for="name">Name</label>
                    <input type="text" name="name" class="form-control" placeholder="Name">
                </div> --}}
            {{-- <div class="mb-3">
                    <label class="control-label" for="status">Type</label>
                    <select name="type" id="type" class="form-control" data-placeholder="Select Type"
                        placeholder="Select Status">
                        <option value=""></option>
                        <option value="1">Patient</option>
                        <option value="2">Companion</option>
                        <option value="3">Doctor</option>
                        <option value="4">General</option>
                    </select>
                </div> --}}
            {{-- <div class="mb-3">
                    <label class="control-label" for="status">Status</label>
                    <select name="status" id="status" class="form-control" data-placeholder="Select Status"
                        placeholder="Select Status">
                        <option value=""></option>
                        <option value="1">Publish</option>
                        <option value="0">Draft</option>
                    </select>
                </div> --}}
            <div class="mb-3">
                <label class="control-label" for="process">Process Status</label>
                <select name="process" id="process" class="form-control" data-placeholder="Select Process Status"
                    placeholder="Select Process Status">
                    <option value="1" selected>Processed</option>
                    <option value="0">Unprocessed</option>
                </select>
            </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3 d-grid">
        <div class="row">
            <div class="col-6">
                <button onclick="exportreport()" class="btn btn-success me-1 w-100">
                    <i class="fa fa-file-export me-1"></i> Export
                </button>
            </div>
            <div class="col-6">
                <button form="form-search" type="submit" class="btn btn-primary w-100" title="Apply">
                    <i class="ri-search-line"></i>
                    Filter
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="create-print" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header no-print">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Cetak</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <iframe id="bodyReplace" scrolling="no" allowtransparency="true"
                        style="width: 69%; border-width: 0px; position: relative; margin: 0 auto; display: block;"
                        onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px';"></iframe>
                </div>
            </div>
        </div>
    </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.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script>
    let typeFromUrl = @json($type ?? '');

    function exportreport() {
        var period = $('#searchCanvas').find('#date').val();
        var code = $('#searchCanvas').find('#code').val();
        var patient_name = $('#searchCanvas').find('#name').val();
        var type = $('#searchCanvas').find('#type').val();
        var status = $('#searchCanvas').find('#status').val();
        var process_status = $('#process').val();

        var data = {
            period: period,
            code: code,
            patient_name: patient_name,
            type: type,
            status: status,
            process_status: process_status,
        };

        $.ajax({
            url: `{{ url($site->slug . '/reportrevenue/export') }}`,
            dataType: 'json',
            data: data,
            type: 'GET',
            beforeSend: function() {
                $('.overlay').removeClass('d-none');
            }
        }).done(function(response) {
            if (response.status) {
                $('.overlay').addClass('d-none');
                Swal.fire({
                    title: "Success!",
                    text: "Your file has been export",
                    icon: "success",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling: !1
                })
                // $('#show_process_modal').modal('hide');
                $('#searchCanvas').offcanvas('hide');
                let download = document.createElement("a");
                download.href = response.file;
                document.body.appendChild(download);
                download.download = response.name;
                download.click();
                download.remove();
            } else {
                Swal.fire({
                    title: "Error!",
                    text: response.message,
                    icon: "error",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling: !1
                })
            }
        }).fail(function(response) {
            var response = response.responseJSON;
            $('.overlay').addClass('d-none');
            Swal.fire({
                title: "Error!",
                text: response.message,
                icon: "error",
                confirmButtonClass: "btn btn-primary w-xs mt-2",
                buttonsStyling: !1
            })
        });
    }

    function filter() {
        $('#status').select2({
            dropdownParent: $("#searchCanvas"),
            allowClear: true,
        });
        $('#type').select2({
            dropdownParent: $("#searchCanvas"),
            allowClear: true,
        });
        $('#process').select2({
            dropdownParent: $("#searchCanvas"),
            allowClear: true,
        });
        $('#searchCanvas').offcanvas('show');
    }

    function refresh() {
        $('.datatable').DataTable().ajax.reload();
    }

    function print(order_id) {
        $.ajax({
            url: `{{ url($site->slug . '/reportrevenue/print') }}/${order_id}`,
            method: 'GET',
            beforeSend: function() {
                $('.overlay').removeClass('d-none');
            },
            success: function(response) {
                $('#exportCanvas').offcanvas('hide');
                var iframe = document.getElementById('bodyReplace');
                var iframeWindow = iframe.contentWindow || iframe.contentDocument.document || iframe
                    .contentDocument;

                iframeWindow.document.open();
                iframeWindow.document.write(response);
                iframeWindow.document.close();

                setTimeout(function() {
                    $('.overlay').addClass('d-none');
                }, 5000);
            },
            error: function() {
                $('.overlay').addClass('d-none');
            }
        });
    }

    function toggleStatusProcess(order_id, order_menu_id, status_process) {
        let confirmButtonText = 'Yes, proceed it!';
        if (status_process == 1) {
            confirmButtonText = 'Yes, revert it!';
        }

        let text = 'You will change the status to Processed';
        if (status_process == 1) {
            text = 'You will revert the process status to Unprocessed';
        }
        Swal.fire({
            title: "Are you sure?",
            text: text,
            icon: "warning",
            showCancelButton: !0,
            confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
            cancelButtonClass: "btn btn-danger w-xs mt-2",
            confirmButtonText: confirmButtonText,
            buttonsStyling: !1,
            showCloseButton: !0,
        }).then(function(t) {
            if (t.value) {
                var data = {
                    order_id: order_id,
                    order_menu_id: order_menu_id,
                    status_process: status_process,
                };
                $.ajax({
                    url: `{{ url($site->slug . '/orderreport/toggleStatusProcess') }}`,
                    dataType: 'json',
                    data: data,
                    type: 'POST',
                    beforeSend: function() {
                        $('.overlay').removeClass('d-none');
                    }
                }).done(function(response) {
                    if (response.status) {
                        $('.overlay').addClass('d-none');
                        Swal.fire({
                            title: "Updated!",
                            text: "Your data has been updated.",
                            icon: "success",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })
                        dataTable.ajax.reload(null, false);
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message,
                            icon: "error",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })
                    }
                }).fail(function(response) {
                    var response = response.responseJSON;
                    $('.overlay').addClass('d-none');
                    Swal.fire({
                        title: "Error!",
                        text: response.message,
                        icon: "error",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    })
                })
            }
        });
    }

    $(function() {
        let typeFromUrl = @json($type ?? '');
        $(".select2").select2();

        dataTable = $('.datatable').DataTable({
            stateSave: true,
            processing: true,
            serverSide: true,
            filter: false,
            info: false,
            lengthChange: true,
            scrollY: '400px',
            responsive: false,
            scrollX: true,
            scrollCollapse: true,
            fixedHeader: true,
            order: [
                [1, "asc"]
            ],
            ajax: {
                url: "{{ route('site.reportrevenue.read', ['site' => $site->slug]) }}",
                type: "GET",
                data: function(data) {
                    // var name = $('#form-search').find('input[name=name]').val();
                    // var status = $('#status').val();
                    var process_status = $('#process').val();
                    var period = $('#date').val();
                    // data.name = name;
                    // data.status = status;
                    data.type = 4;
                    data.process_status = process_status;
                    data.period = period;
                },
                dataSrc: function(json) {
                    // Format revenue
                    var revenue = parseFloat(json.revenue || 0);
                    $('#revenue-display').text('Total Revenue: Rp. ' + formatRupiah(revenue));

                    // // Format periode
                    var start = json.start;
                    var end = json.end;
                    if (start && end) {
                        $('#period-display').text('Periode: ' + formatTanggal(start) + ' - ' +
                            formatTanggal(end));
                    }

                    if (start && end) {
                        const formattedStart = returnTanggal(start);
                        const formattedEnd = returnTanggal(end);
                        $('#date').val(`${formattedStart} to ${formattedEnd}`);
                    }

                    // // Return hanya data yang dibutuhkan DataTables
                    return json.data;
                }
            },
            columnDefs: [{
                    orderable: false,
                    targets: [0, 7, 5, 9]
                },
                // { className: "text-right", targets: [0] },
                {
                    className: "align-top",
                    targets: [7, 8]
                },
                {
                    className: "text-end",
                    targets: [8, 9]
                },
                {
                    render: function(data, type, row) {
                        return `${row.date_formated??"-"}`;
                    },
                    targets: [1],
                },
                {
                    render: function(data, type, row) {
                        return `${row.created_at_formated??"-"}`;
                    },
                    targets: [2],
                },
                {
                    render: function(data, type, row) {
                        return `${row.code??"-"}`;
                    },
                    targets: [3],
                },
                {
                    render: function(data, type, row) {
                        if (row.type == 3) {
                            return `${ row.ward?.name ?? "-" }`;
                        } else if (row.type == 4) {
                            return `${ row.guest_location ?? "-" }`;
                        }
                        return `${ row.room?.room_no ?? "-" }`;
                    },
                    targets: [4],
                },
                {
                    render: function(data, type, row) {
                        const typeMap = {
                            1: "Patient",
                            2: "Companion",
                            3: "Doctor",
                            4: "General",
                        };
                        return typeMap[row.type] ?? "-";
                    },
                    targets: [5],
                },
                {
                    render: function(data, type, row) {
                        // Jika general, ambil guest_name
                        if (row.type == 4) {
                            return row.guest_name;
                        }
                        return data;
                    },
                    targets: [6],
                },
                // {
                //     render: function(data, type, row) {
                //         return `${row.menu_cycle}`;
                //     },
                //     targets: [7],
                // },
                {
                    render: function(data, type, row) {
                        // Jika patient, cukup tampilkan menu item
                        if (row.type == 1) {
                            return `${row.menu_item}`;
                        }
                        // Selain itu, tampilkan list item yang dipesan
                        if (row.food_items) {
                            return `<ul style="padding-left: 1rem; margin: 0;" >` +
                                row.food_items.map(item => `<li>${item.items.name}</li>`).join(
                                    '') +
                                `</ul>`;
                        }
                        return '-';

                    },
                    targets: [7],
                },
                {
                    render: function(data, type, row) {
                        // Jika patient, cukup tampilkan menu item
                        if (row.type == 1) {
                            return `${row.menu_item}`;
                        }

                        // Jika ada food_items, hitung total harga
                        if (row.food_items) {
                            // Hitung total harga
                            const total = row.food_items.reduce((sum, item) => {
                                return sum + parseFloat(item.items.price || 0);
                            }, 0);

                            // Format output ke dalam list dengan harga per item
                            const listItems = row.food_items.map(item =>
                                `<li class="text-end" style="list-style: none;"> Rp. ${parseFloat(item.items.price || 0).toLocaleString('id-ID')}</li>`
                            ).join('');

                            return `
                            <div>
                                <ul style="padding-left: 1rem; margin: 0;">
                                    ${listItems}
                                    <li  class="text-end" style="list-style: none;"><strong>Total:  Rp. ${total.toLocaleString('id-ID')}</strong></li>
                                </ul>
                            </div>
                        `;
                        }

                        return '-';
                    },
                    targets: [8],
                },
                // {
                //     render: function(data, type, row) {
                //         if (row.type != 1) {
                //             return '-';
                //         }

                //         var fasting = "-";
                //         if (row.fasting) {
                //             fasting = (row.fasting != "Y") ?
                //                 '<span class="badge text-capitalize bg-danger">No</span>' :
                //                 '<span class="badge text-capitalize bg-success">Yes</span>';
                //         }
                //         if (row.end_fasting) {
                //             fasting += ` | end : ${row.end_fasting}`;
                //         }
                //         return `${fasting}`;
                //     },
                //     targets: [9],
                // },
                // {
                //     render: function(data, type, row) {
                //         if (row.type != 1) {
                //             return '-';
                //         }
                //         return `${row.diits ?? '-'}`;
                //     },
                //     targets: [10],
                // },
                // {
                //     render: function(data, type, row) {
                //         if (row.type != 1) {
                //             return '-';
                //         }
                //         return `${row.food_texture}`;
                //     },
                //     targets: [11],
                // },
                // {
                //     render: function(data, type, row) {
                //         if (row.type != 1) {
                //             return '-';
                //         }
                //         return `${row.patient?.alergy ?? '-'}`;
                //     },
                //     targets: [12],
                // },
                // {
                //     render: function(data, type, row) {
                //         if (row.type != 1) {
                //             return '-';
                //         }
                //         return `${row.note}`;
                //     },
                //     targets: [13],
                // },
                // {
                //     render: function(data, type, row) {
                //         const isProcessed = row.status_process == 1;

                //         const statusBadge = isProcessed ?
                //             `<span class="badge text-capitalize bg-success me-2">Diproses</span>` :
                //             `<span class="badge text-capitalize bg-danger me-2">Belum Diproses</span>`;

                //         const tooltipText = isProcessed ? 'Batalkan proses' :
                //             'Tandai sebagai diproses';

                //         const toggleButton = `
                //             <button class="btn btn-icon btn-xs ${isProcessed ? 'btn-danger' : 'btn-success'}"
                //                 onclick="toggleStatusProcess(${row.id}, ${row.order_menu_id}, ${row.status_process})"
                //                 data-bs-toggle="tooltip" title="${tooltipText}">
                //                 <i class="las ${isProcessed ? 'la-times-circle' : 'la-check-circle'}"></i>
                //             </button>
                //         `;

                //         return `
                //             <div class="d-flex align-items-center justify-content-end gap-2">
                //                 ${statusBadge}
                //                 ${toggleButton}
                //             </div>
                //         `;
                //     },
                //     targets: [],
                // },
                {
                    render: function(data, type, row) {
                        const isProcessed = row.status_process == 1;
                        const processText = isProcessed ? 'Cancel Processing' :
                            'Mark as Processed';
                        const processIcon = isProcessed ? 'la-times-circle' : 'la-check-circle';

                        return `
                                <div class="dropdown d-inline-block">
                                    <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-more-fill align-middle"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li style="cursor:pointer">
                                            <a class="dropdown-item" onclick="print(${row.id},${row.food_menu_cycle_id ?? 'null'})" target="_blank">
                                                <i class="las la-file-pdf me-2"></i> Receipt
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            `;
                    },
                    targets: [9]
                }
            ],
            columns: [{
                    data: "no" //0
                },
                {
                    data: "date" //1
                },
                {
                    data: "created_at" //2
                },
                {
                    data: "code" //3
                },
                {
                    data: "room_id" //4
                },
                {
                    data: "type" //5
                },
                {
                    data: "patient_name" //6
                },
                // {
                //     data: "id" //7
                // },
                // {
                //     data: "fasting" //8
                // },
                {
                    data: "diet" //9
                },
                // {
                //     data: "id" //10
                // },
                // {
                //     data: "id" //11
                // },
                // {
                //     data: "id" //12
                // },
                // {
                //     data: "id" //13
                // },
                {
                    data: "id" //14
                },
            ]
        });

        $('#form-search').submit(function(e) {
            e.preventDefault();
            dataTable.draw();
            $('#searchCanvas').offcanvas('hide');
        });

        if (typeFromUrl) {
            console.log(typeFromUrl);
            $('#type').val(typeFromUrl).trigger('change');
            dataTable.draw();
        }
    });

    $(document).on('click', '.delete', function() {
        var id = $(this).data('id');
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: !0,
            confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
            cancelButtonClass: "btn btn-danger w-xs mt-2",
            confirmButtonText: "Yes, delete it!",
            buttonsStyling: !1,
            showCloseButton: !0,
        }).then(function(t) {
            if (t.value) {
                var data = {
                    _token: "{{ csrf_token() }}",
                    _method: 'delete'
                };
                $.ajax({
                    url: `{{ url($site->slug . '/order') }}/${id}`,
                    dataType: 'json',
                    data: data,
                    type: 'POST',
                    beforeSend: function() {
                        $('.overlay').removeClass('d-none');
                    }
                }).done(function(response) {
                    if (response.status) {
                        $('.overlay').addClass('d-none');
                        Swal.fire({
                            title: "Deleted!",
                            text: "Your file has been deleted.",
                            icon: "success",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })
                        dataTable.ajax.reload(null, false);
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message,
                            icon: "error",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })
                    }
                }).fail(function(response) {
                    var response = response.responseJSON;
                    $('.overlay').addClass('d-none');
                    Swal.fire({
                        title: "Error!",
                        text: response.message,
                        icon: "error",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    })
                })
            }
            //t.value && Swal.fire({ title: "Deleted!", text: "Your file has been deleted.", icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 });
        });
    });

    function formatRupiah(angka) {
        angka = parseFloat(angka) || 0;
        return angka.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    function formatTanggal(str) {
        var [year, month, day] = str.split('-'); // Format dari backend = Y-m-d
        var bulanIndo = [
            'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
        ];
        return `${day} ${bulanIndo[parseInt(month) - 1]} ${year}`;
    }

    function returnTanggal(tanggal) {
        var date = new Date(tanggal);
        var day = String(date.getDate()).padStart(2, '0');
        var month = String(date.getMonth() + 1).padStart(2, '0');
        var year = date.getFullYear();
        return `${day}/${month}/${year}`;
    }
</script>
@endpush