@extends('site.layouts.app')

@section('title', 'Dish')

@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">Dish</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">Dish</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.fooditem.create', ['site' => $site->slug]) }}"
                            class="btn btn-info add-btn"><i class="ri-add-fill me-1 align-bottom"></i> Add Dish</a>
                        <a href="#" onclick="massal()"
                            class="btn btn-success add-massal-btn ms-2">
                            <i class="ri-file-excel-2-line me-1 align-bottom"></i> Add Dish Massal
                        </a>
                    </div>
                    <div class="flex-shrink-0">
                        <div class="hstack text-nowrap gap-2">
                            <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">Price</th>
                            <th width="100">Tags</th>
                            <th width="100">Description</th>
                            <th width="100">Created at</th>
                            <th width="10">Status</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">Name</label>
                <input type="text" name="name" class="form-control" placeholder="Name">
            </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" selected>Active</option>
                    <option value="0">Non Active</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="control-label" for="tags">Tag</label>
                <select class="form-control select2" name="tag" id="tag" data-placeholder="Select tag">
                    <option value="all">All</option>
                    <option value="is_doctor">Doctor</option>
                    <option value="is_companion">Companion</option>
                    <option value="is_general">General</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>

<!-- Import -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="massalCanvas" aria-labelledby="massalCanvasLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="massalCanvasLabel">Add Dish Massal</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-import" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label class="control-label" for="file">File</label>
                <input type="file" class="form-control" name="file" accept=".xlsx,.xls,.csv" required>
            </div>
        </form>
        <a href="{{ asset('template/Template Upload Dish Item.xlsx') }}"
            class="w-100 mb-2"
            download>
            <i class="las la-download me-1"></i>
            Download Template
        </a>
    </div>

    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3 d-grid">
        <button form="form-import" type="submit" class="btn btn-primary" title="Apply">
            <i class="las la-file-upload me-1"></i>
            Import
        </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.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 massal() {
        $('#massalCanvas').offcanvas('show');
    }

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

        dataTable = $('.datatable').DataTable({
            stateSave: true,
            processing: true,
            serverSide: true,
            filter: false,
            info: false,
            lengthChange: true,
            responsive: true,
            order: [
                [1, "asc"]
            ],
            ajax: {
                url: "{{ route('site.fooditem.read', ['site' => $site->slug]) }}",
                type: "GET",
                data: function(data) {
                    var name = $('#form-search').find('input[name=name]').val();
                    var status = $('#status').val();
                    var tag = $('#tag').val();
                    data.name = name;
                    data.status = status;
                    data.tag = tag;
                    console.log(data);
                }
            },
            columnDefs: [{
                    orderable: false,
                    targets: [0, 6]
                },
                // { className: "text-right", targets: [0] },
                {
                    className: "text-center",
                    targets: [0, 4, 5, 6]
                },
                {
                    className: "text-end",
                    targets: [2]
                },

                {
                    render: function(data, type, row) {
                        let main_image = "{{ asset('assets/img/no-image.png') }}";
                        if (row.image_main != null) {
                            main_image = "{{ asset('storage') }}/images/" + row.image_main.image;
                        }
                        let code_badge = "";
                        if (row.code) {
                            code_badge = `<span class="badge bg-light text-secondary border font-monospace ms-2 fw-normal fs-11">${row.code}</span>`;
                        }

                        return `
                            <div class="d-flex align-items-center">
                                <!-- Bagian Foto Produk -->
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm bg-light rounded p-1 border" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
                                        <img src="${main_image}" alt="${row.name}" class="img-fluid rounded" style="max-height: 100%; max-width: 100%; object-fit: cover;" />
                                    </div>
                                </div>
                                <!-- Bagian Teks (Nama & Kode) -->
                                <div class="flex-grow-1" style="max-width: 250px;"> <!-- Batasi max-width sesuai kebutuhan -->
                                    <h5 class="fs-14 mb-0 text-truncate">
                                        <span class="text-body fw-semibold text-decoration-none text-hover-primary">${row.name}</span>
                                    </h5>
                                    <div class="d-flex align-items-center mt-1">
                                        <small class="text-muted fs-12">code:</small>
                                        ${code_badge ? code_badge : '<small class="text-muted fs-12 ms-1">-</small>'}
                                    </div>
                                </div>
                            </div>`;
                    },
                    targets: [1],
                },
                {
                    render: function(data, type, row) {
                        return `${row.formatedprice??"-"}`;
                    },
                    targets: [2],
                },
                {
                    render: function(data, type, row) {
                        return `${row.tagshtml??"-"}`;
                    },
                    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: 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" href="{{ url($site->slug . '/fooditem') }}/${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: [7]
                }
            ],
            columns: [{
                    data: "no"
                },
                {
                    data: "name"
                },
                {
                    data: "price"
                },
                {
                    data: "id"
                },
                {
                    data: "description"
                },
                {
                    data: "created_at"
                },
                {
                    data: "status"
                },
                {
                    data: "id"
                },
            ]
        });

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

    $('#form-import').on('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this);

        $.ajax({
            url: `{{ url($site->slug . '/fooditem/import') }}`,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                $('#massalCanvas').offcanvas('hide');
                $('.overlay').removeClass('d-none');
            },
            success: function(response) {
                $('.overlay').addClass('d-none');

                $('#form-import')[0].reset();

                Swal.fire({
                    title: "Success!",
                    text: "Data dish item berhasil diimpor!",
                    icon: "success",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling: !1
                });
                $('.datatable').DataTable().ajax.reload();

            },
            error: function(xhr) {
                $('#form-import')[0].reset();

                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
                });
            }
        });
    });

    $(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 . '/fooditem') }}/${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 });
        });
    });
</script>
@endpush