@extends('site.layouts.app')

@section('title', 'Room')

@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;
        }
    </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">Room</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">Master</li>
                        <li class="breadcrumb-item active">Room</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">
                            <a href="{{ route('site.room.create', ['site' => $site->slug]) }}"
                                class="btn btn-info add-btn"><i class="ri-add-fill me-1 align-bottom"></i> Add Room</a>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="hstack text-nowrap gap-2">
                                <button type="button" class="btn btn-secondary d-none" id="btn-print-mass">
                                    <i class="ri-printer-line me-1 align-bottom"></i> Print Selected QR
                                </button>
                                <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">
                    <table class="table 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">Name</th>
                                <th width="100">Bed</th>
                                <th width="100">Bed Type</th>
                                <th width="100">Description</th>
                                <th width="100">Created at</th>
                                <th width="10">Status</th>
                                <th width="10">
                                    <input class="form-check-input" type="checkbox" id="check-all">
                                </th>
                                <th width="10">Aksi</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="name">Room No.</label>
                    <input type="text" name="room_no" class="form-control" placeholder="Room No.">
                </div>
                <div class="mb-4">
                    <label class="control-label" for="bed">Bed</label>
                    <select class="form-control select2" name="bed_id" id="bed_id" data-placeholder="Select Bed">
                    </select>
                </div>
                <div class="mb-4">
                    <label class="control-label" for="bed">Bed Type</label>
                    <select class="form-control select2" name="bed_type_id" id="bed_type_id"
                        data-placeholder="Select Bed Type">
                    </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">Active</option>
                        <option value="0">Non Active</option>
                    </select>
                </div>
            </form>
        </div>
        <!--end offcanvas-body-->
        <div class="offcanvas-footer border-top p-3 d-grid">
            <button form="form-search" type="submit" class="btn btn-primary" title="Apply">
                <i class="ri-search-line"></i>
                Filter
            </button>
        </div>
    </div>

    <div class="modal fade" id="modalQr" tabindex="-1" aria-labelledby="modalQrLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalQrLabel">Room QR Code</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <h3 id="qr-room-no" class="mb-3"></h3>
                    <div id="qr-container">
                        <img src="" id="qr-image" class="img-fluid" alt="QR Code" style="width: 250px;">
                    </div>
                    <p class="text-muted mt-3">Scan this QR to order from this room.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <a href="" id="btn-download-qr" class="btn btn-primary" download="qrcode.png">Download
                        PNG</a>
                </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>
        function filter() {
            $('#status').select2({
                dropdownParent: $("#searchCanvas"),
                allowClear: true,
            });
            $('#searchCanvas').offcanvas('show');
        }

        $(function() {
            $(".select2").select2();

            $('select#bed_id').select2({
                width: 'resolve',
                placeholder: 'Bed',
                ajax: {
                    url: `{{ route('site.bed.select', ['site' => $site->slug]) }}`,
                    type: 'GET',
                    dataType: 'json',
                    data: (params) => {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 20
                        };
                    },
                    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}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
                dropdownParent: $("#searchCanvas"),
            });

            $('select#bed_type_id').select2({
                width: 'resolve',
                placeholder: 'Bed Type',
                ajax: {
                    url: `{{ route('site.bedtype.select', ['site' => $site->slug]) }}`,
                    type: 'GET',
                    dataType: 'json',
                    data: (params) => {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 20
                        };
                    },
                    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}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
                dropdownParent: $("#searchCanvas"),
            });

            dataTable = $('.datatable').DataTable({
                stateSave: true,
                processing: true,
                serverSide: true,
                filter: false,
                info: false,
                lengthChange: true,
                responsive: true,
                order: [
                    [1, "asc"]
                ],
                ajax: {
                    url: "{{ route('site.room.read', ['site' => $site->slug]) }}",
                    type: "GET",
                    data: function(data) {
                        var room_no = $('#form-search').find('input[name=room_no]').val();
                        var bed_id = $('#bed_id').val();
                        var bed_type_id = $('#bed_type_id').val();
                        var status = $('#status').val();
                        data.room_no = room_no;
                        data.bed_id = bed_id;
                        data.bed_type_id = bed_type_id;
                        data.status = status;
                    }
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0, 7, 8]
                    },
                    // { className: "text-right", targets: [0] },
                    {
                        className: "text-center",
                        targets: [0, 5, 6, 7, 8]
                    },
                    {
                        render: function(data, type, row) {
                            return `${row.bed.name??"-"}`;
                        },
                        targets: [2],
                    },
                    {
                        render: function(data, type, row) {
                            return `${row.bed_type.name??"-"}`;
                        },
                        targets: [3],
                    },
                    {
                        render: function(data, type, row) {
                            return `${row.description??"-"}`;
                        },
                        targets: [4],
                    },
                    {
                        render: function(data, type, row) {
                            if (row.status == 1 || row.status == '1') {
                                return `<span class="badge text-capitalize bg-success">Active</span>`;
                            }
                            return `<span class="badge text-capitalize bg-danger">Non Active</span>`;
                        },
                        targets: [6],
                        className: 'text-center'
                    },
                    {
                        // Render untuk Checkbox
                        targets: [7],
                        render: function(data, type, row) {
                            return `<input class="form-check-input row-checkbox" type="checkbox" value="${row.id}">`;
                        }
                    },
                    {
                        render: function(data, type, row) {
                            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>
                                            <a class="dropdown-item show-qr" href="javascript:void(0);" data-id="${row.id}" data-room="${row.room_no}">
                                                <i class="ri-qr-code-line align-bottom me-2 text-muted"></i> View QR Code
                                            </a>
                                        </li>
                                        <li>
                                        <a class="dropdown-item" href="{{ url($site->slug . '/room') }}/${row.id}/edit"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
                                        <li>
                                            <a href="#" class="dropdown-item delete" data-id="${row.id}">
                                                <i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete
                                            </a>
                                        </li>
                                    </ul>
                                </div>`
                        },
                        targets: [8]
                    }
                ],
                columns: [{
                        data: "no"
                    },
                    {
                        data: "room_no"
                    },
                    {
                        data: "bed_id"
                    },
                    {
                        data: "bed_type_id"
                    },
                    {
                        data: "description"
                    },
                    {
                        data: "created_at"
                    },
                    {
                        data: "status"
                    },
                    {
                        data: "id"
                    },
                    {
                        data: "id"
                    },
                ]
            });

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


            $('#check-all').on('click', function() {
                var isChecked = $(this).prop('checked');
                $('.row-checkbox').prop('checked', isChecked);
                togglePrintButton();
            });

            // Ceklist Satuan
            $(document).on('change', '.row-checkbox', function() {
                togglePrintButton();
            });

            // Reset check-all saat halaman/data berubah
            dataTable.on('draw', function() {
                $('#check-all').prop('checked', false);
                togglePrintButton();
            });

            // Munculkan tombol jika ada yang dipilih
            function togglePrintButton() {
                if ($('.row-checkbox:checked').length > 0) {
                    $('#btn-print-mass').removeClass('d-none');
                } else {
                    $('#btn-print-mass').addClass('d-none');
                }
            }

            // Eksekusi Print Massal
            $('#btn-print-mass').on('click', function() {
                var selectedIds = [];
                $('.row-checkbox:checked').each(function() {
                    selectedIds.push($(this).val());
                });

                if (selectedIds.length > 0) {
                    // Gabungkan ID jadi string: id1,id2,id3
                    var idsString = selectedIds.join(',');

                    // Buka Tab baru ke halaman Print
                    var url = `{{ url($site->slug . '/room/print-mass-qr') }}?ids=${idsString}`;
                    window.open(url, '_blank');
                }
            });
        });

        $(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 . '/room') }}/${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 });
            });
        });

        $(document).on('click', '.show-qr', function() {
            var id = $(this).data('id');
            var room_no = $(this).data('room');

            // Construct the URL for the QR image
            var qrUrl = `{{ url($site->slug . '/room/qr') }}/${id}`;

            // Update modal content
            $('#qr-room-no').text("Room: " + room_no);
            $('#qr-image').attr('src', qrUrl);
            $('#btn-download-qr').attr('href', qrUrl);

            // Show Modal
            $('#modalQr').modal('show');
        });
    </script>
@endpush