@extends('site.layouts.app')

@section('title', 'Pricelist Menu Employee')
@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">Pricelist Menu Employee</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">Pricelist Menu Employee</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.pricemenuemployee.create', ['site' => $site->slug]) }}"
                                class="btn btn-info add-btn"><i class="ri-add-fill me-1 align-bottom"></i> Add Pricelist
                                Menu Employee</a>
                        </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">Code</th>
                                <th width="120">Name</th>
                                <th width="120">Harga</th>
                                <th width="10">Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </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 type="text/javascript">
        $(function() {
            dataTable = $('.datatable').DataTable({
                stateSave: true,
                processing: true,
                serverSide: true,
                filter: false,
                info: false,
                lengthChange: true,
                responsive: true,
                order: [
                    [1, "asc"]
                ],
                ajax: {
                    url: "{{ route('site.pricemenuemployee.read', ['site' => $site->slug]) }}",
                    type: "GET",
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0, 4]
                    },
                    {
                        className: "text-center",
                        targets: [0, 4]
                    },
                    {
                        render: function (data, type, row) {
                            if (data == null) return '-';
                            return 'Rp ' + parseInt(data).toLocaleString('id-ID');
                        },
                        targets: [3]
                    },
                    {
                        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 . '/pricemenuemployee') }}/${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: [4]
                    }
                ],
                columns: [
                    {
                        data: "no"
                    },
                    {
                        data: "code"
                    },
                    {
                        data: "name"
                    },
                    {
                        data: "price"
                    },
                    {
                        data: "id"
                    },
                ]
            });

            $(".select2").select2();

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