@extends('site.layouts.app')

@section('title', $title)

@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">
@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">{{ $title }}</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">{{ $title }}</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>
                                <a onclick="addModal()" class="btn btn-info" id="addasset-btn"><i
                                        class="ri-add-line align-bottom me-1"></i>
                                    Add Food Texture </a>
                            </div>
                        </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="25">No</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th width="25">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {{-- Search Canvas --}}
    <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>
        <div class="offcanvas-body">
            <form id="form-search" autocomplete="off">
                <div class="mb-4">
                    <label class="control-label" for="type">Name</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Name">
                </div>
            </form>
        </div>
        <div class="offcanvas-footer border-top p-3">
            <div class="row d-flex">
                <div class="col text-start">
                    <button type="button" onclick="reset()" class="btn btn-danger" title="Apply"><i
                            class="ri-delete-bin-line"></i> Reset</button>
                </div>
                <div class="col text-end">
                    <button form="form-search" type="submit" class="btn btn-primary" title="Apply"><i
                            class="ri-search-line"></i> Filter</button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Search Canvas --}}

    @include('site.foodtexture.add-modal')
    @include('site.foodtexture.edit-modal')
    @include('site.foodtexture.detail-modal')
@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="{{ asset('creative/component/accounting/accounting.min.js') }}"></script>
    <script src="{{ asset('adminlte/component/moment/moment.min.js') }}"></script>
    <script src="{{ asset('creative/component/validate/jquery.validate.min.js') }}"></script>

    <script>
        function reset() {
            $('form#form-search')[0].reset();
             $('#searchCanvas').offcanvas('hide');
        }

        function filter() {
            $('#searchCanvas').offcanvas('show');
        }

        $(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.foodtexture.read', ['site' => $site->slug]) }}",
                    type: "GET",
                    data: function(data) {
                        var name = $('#name').val();
                        data.name = name;
                    },
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0],
                        className: 'text-center',
                        render: function(data, type, row) {
                            return row.no;
                        }
                    },
                    {
                        targets: [3],
                        render: function(data, type, row) {
                            return `
                            <div class="dropdown d-flex justify-content-center">
                                <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" onclick="editData(${row.id})" data-id="${row.id}"><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>`;
                        }
                    },
                ],
                columns: [
                    {
                        data: "id"
                    },
                    {
                        data: "name"
                    },
                    {
                        data: "description"
                    },
                    {
                        data: "id"
                    },
                ]
            });

            $(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) {
                    var url =
                        "{{ route('site.foodtexture.destroy', ['site' => $site->slug, 'id' => ':id']) }}";
                    url = url.replace(':id', id);
                    if (t.value) {
                        var data = {
                            _token: "{{ csrf_token() }}",
                            _method: 'DELETE',
                            id: id,
                        };
                        $.ajax({
                            url: url,
                            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
                            })
                        })
                    }
                });
            });
        });

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

        function addModal() {
            $("#createForm")[0].reset();
            $('#addModal').modal('show');
        }

        $("#createForm").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: true,
            highlight: function(e) {
                $(e).closest('.mb-3').removeClass('has-success').addClass(
                    'was-validated has-error');
            },
            success: function(e) {
                $(e).closest('.mb-3').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function(error, element) {
                if (element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                } else
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else
                if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                } else
                if (element.hasClass('select2')) {
                    error.insertAfter(element).addClass('mt-auto mb-2');
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                $.ajax({
                    url: $('#createForm').attr('action'),
                    method: 'POST',
                    data: new FormData($('#createForm')[0]),
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    beforeSend: function() {
                        $('.overlay').removeClass('d-none');
                    }
                }).done(function(response) {
                    $('.overlay').addClass('d-none');
                    if (response.status) {
                        Swal.fire({
                            title: "Success",
                            icon: "success",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })

                        $('#addModal').modal('hide');
                        $('#createForm').trigger("reset");
                        dataTable.draw();
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message,
                            icon: "error",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })
                    }
                    return;
                }).fail(function(response) {
                    $('.overlay').addClass('d-none');
                    var response = response.responseJSON;
                    Swal.fire({
                        title: "Error!",
                        text: response.message,
                        icon: "error",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    })
                })
            }
        });

        function editData(id) {
            var url = "{{ route('site.foodtexture.edit', ['site' => $site->slug, 'id' => ':id']) }}";
            url = url.replace(':id', id);

            $.get(url, function(data) {
                $('input#edit_name').val(data.name);
                $('input#edit_description').val(data.description);
                $('input#edit_id').val(data.id);
                $('#editModal').modal('show');
            });
        }

        $("#updateForm").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: true,
            highlight: function(e) {
                $(e).closest('.mb-3').removeClass('has-success').addClass(
                    'was-validated has-error');
            },
            success: function(e) {
                $(e).closest('.mb-3').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function(error, element) {
                if (element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                } else
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else
                if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                } else
                if (element.hasClass('select2')) {
                    error.insertAfter(element).addClass('mt-auto mb-2');
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                var url    = $('#updateForm').attr('action');
                var thisId = $('#edit_id').val();
                    url    = url.replace(':id', thisId);

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: new FormData($('#updateForm')[0]),
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    beforeSend: function() {
                        $('.overlay').removeClass('d-none');
                    }
                }).done(function(response) {
                    $('.overlay').addClass('d-none');
                    if (response.status) {
                        Swal.fire({
                            title: "Success",
                            icon: "success",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })

                        $('#editModal').modal('hide');
                        $('#updateForm').trigger("reset");
                        dataTable.draw();
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message,
                            icon: "error",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })
                    }
                    return;
                }).fail(function(response) {
                    $('.overlay').addClass('d-none');
                    var response = response.responseJSON;
                    Swal.fire({
                        title: "Error!",
                        text: response.message,
                        icon: "error",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    })
                })
            }
        });

        function detailData(id) {
            var url = "{{ route('site.foodtexture.show', ['site' => $site->slug, 'id' => ':id']) }}";
            url = url.replace(':id', id);

            $.get(url, function(data) {
                $('#detail_name').val(data.name);
                $('#detail_description').val(data.description);
                $('#detailModal').modal('show');
            });
        }
    </script>
@endpush