@extends('layouts.dashboard')

@section('title', 'Menu')

@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 d-flex justify-content-between align-items-center">
                        <div>
                        <h4>@yield('title')</h4>
                        <span>Silakan kelola <code>Data @yield('title')</code> sesuai kebutuhan bisnis Anda</span>
                        </div>
                        <div>
                            <button id="createBtn" class="btn btn-success btn-sm" onclick="getModal('createModal')">
                                <i class="bi bi-plus me-2"></i>Tambah
                            </button>
                        </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 width="10%">Foto</th>
                                        <th>Menu</th>
                                        <th>Harga</th>
                                        <th>Deskripsi</th>
                                        <th>Kategori</th>
                                        <th>Status</th>
                                        <th width="15%">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @include('admin.menu.create')
            </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('dashboard.menus.index') }}', [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
            },
            {
                data: 'image',
                name: 'image',
            },
            {
                data: 'name',
                name: 'name',
            },
            {
                data: 'price',
                name: 'price',
            },
            {
                data: 'description',
                name: 'description',
            },
            {
                data: 'category_id',
                name: 'category_id',
            },
            {
                data: 'status',
                name: 'status',
            },
            {
                data: 'action',
                name: 'action',
            },
        ]);

        $("#createBtn").click(function() {
            getModalEdit()
        });

        $("#saveData").submit(function(e) {
            setButtonLoadingState("#saveData .btn.btn-primary", true);
            e.preventDefault();
            const kode = $("#saveData #id").val();
            let url = "{{ route('dashboard.menus.store') }}";
            const data = new FormData(this);

            if (kode !== "") {
                data.append("_method", "PUT");
                url = `/dashboard/menus/${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", ["name", "price", "status", "description", "category_id", "image"]);
            };

            ajaxCall(url, "POST", data, successCallback, errorCallback);
        });

        $('#createModal').on('hidden.bs.modal', function() {
            resetImagePreview();
        });
    });

    function getModalEdit() {
        select2ToJson("#category_id", "/dashboard/categories");
    }

    function readFoto(event) {
        const input = event.target;
        const reader = new FileReader();
        reader.onload = function() {
            const dataURL = reader.result;
            const output = document.getElementById('imagePreview');
            output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    }

    function resetImagePreview() {
        const imagePreview = document.getElementById('imagePreview');
        imagePreview.src = '';
        const imageInput = document.getElementById('image');
        imageInput.value = '';
    }

</script>
@endpush

@endsection