@extends('admin.layouts.app')
@section('style')
<link rel="stylesheet" href="{{asset('public/assets/admin/css/page-datatable-custom-css.css')}}">
<style>
    div#kt_app_toolbar {
        display: none;
    }
    .row.w-100.full-width {
        display: flex;
        align-items: center;
    }
    [data-bs-theme=dark] .menu-state-bg-light-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here){
        background-color: #141418;
        color: #fff;
    }
    label.label-title {
        width: 100%;
        background: #e4e4e4;
        padding: 5px;
        margin-bottom: 5px;
    }
    .note-dropdown-menu {
        display: none;
    }

    .note-dropdown-menu.show {
        display: block;
    }

    .show{
        display: block;
    }
</style>
@endsection
@section('content')
<link href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
<link href="https://cdn.datatables.net/rowreorder/1.5.0/css/rowReorder.dataTables.css">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
        <!--begin::Card-->
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="row w-100 full-width">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="card-title">
                            <a href="javascript:void(0);" class="btn btn-sm fw-bold btn-sky add-payment-btn">Add New Method</a>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div id="kt_table_users_filter_top" class="dataTables_filter_custom"><input type="search" class="form-control form-control-sm" placeholder="Search..." id="searchFilter" aria-controls="kt_table_users"></div>
                    </div>
                </div>
                <!--begin::Card title-->
            </div>
            <div id="alertMessages"></div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body padding-top-0" style="padding-top: 0px !important;">
                <div class="table-responsive mt-5 custom-row">
                    <!--begin::Table-->
                    <table class="table table-rounded table-row-bordered table-row-gray-300 gy-7 gs-7 display_in_mobile kt_table_users" id="kt_table_payments">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-700">
                                <th class="text-dark fw-bold">ID</th>
                                <th class="text-dark fw-bold">Method</th>
                                <th class="text-dark fw-bold">Visible Name</th>
                                <th class="text-dark fw-bold">Min Payment</th>
                                <th class="text-dark fw-bold">Max Payment</th>
                                <th class="text-dark fw-bold">Status</th>
                                <th class="min-w-100px text-dark fw-bold">Action</th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-dark">
                        </tbody>
                        <!--end::Table body-->
                    </table>
                    <div class="pagination_display"></div>
                </div>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Content container-->
    <div class="modal fade" id="addPaymentMethod" tabindex="-1" role="dialog" aria-labelledby="addPaymentMethodTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.storeAddPaymentMethodModel') }}" method="POST" id="addPaymentMethodForm">
                    <div class="modal-header">
                        <h2>Add Payment Method</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add new method</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editPaymentMethod" tabindex="-1" role="dialog" aria-labelledby="editPaymentMethodTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.updatePaymentMethodModel') }}" method="POST" id="editPaymentMethodForm">
                    <div class="modal-header">
                        <h2>Edit Payment Method</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-dark">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script src="https://cdn.datatables.net/rowreorder/1.5.0/js/dataTables.rowReorder.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.5.0/js/rowReorder.dataTables.js"></script>

<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    <script>
        $(document).ready(function() {
            // $("#summernote").summernote();
            $('#summernote').summernote({
                height: 300,
                // toolbar: [
                //     ['style', ['style']],
                //     ['font', ['bold', 'italic', 'underline', 'clear']],
                //     ['fontname', ['fontname']],
                //     ['fontsize', ['fontsize']],
                //     ['color', ['color']],
                //     ['para', ['ul', 'ol', 'paragraph']],
                //     ['table', ['table']],
                //     ['insert', ['link', 'picture', 'video']],
                //     ['view', ['fullscreen', 'codeview', 'help']]
                // ]
            });

            var table = $('#kt_table_payments').DataTable({
                "lengthMenu": [100, 200, 500],
                // ajax: "{{ route('admin.paymentMethods') }}",
                serverSide: true,
                paging: true,
                info: false, 
                language: {
                    lengthMenu: "Display_MENU_",
                },
                responsive: true,
                ajax: {
                    url: "{{ route('admin.paymentMethods') }}",
                    data: function (d) {
                        d.search = $('#searchFilter').val();
                    }
                },
                columns: [{
                        data: 'method_line',
                        name: 'method_line',
                        orderable: false,
                    },
                    {
                        data: 'method_name',
                        name: 'method_name',
                        orderable: false
                    },
                    {
                        data: 'name',
                        name: 'name',
                        orderable: false
                    },
                    {
                        data: 'method_min',
                        name: 'method_min',
                        orderable: false
                    },
                    {
                        data: 'method_max',
                        name: 'method_max',
                        orderable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    },
                ],
                rowReorder: {
                    dataSrc: 'method_line',
                },
                columnDefs: [{
                        orderable: true,
                        className: 'reorder',
                        targets: 0
                    },
                    {
                        orderable: false,
                        targets: '_all'
                    }
                ],
                order: false,
            });

            $('.dataTables_length').appendTo('.custom-row > .pagination_display');
            $('.dataTables_paginate').appendTo('.custom-row > .pagination_display');

            let typingTimer;
            $('#searchFilter').on('keyup', function () {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(function () {
                    table.ajax.reload(null, false);
                }, 300);
            })

            table.on('row-reorder', function(e, diff, edit) {
                $.LoadingOverlay("show");
                let newOrder = [];
                for (var i = 0, ien = diff.length; i < ien; i++) {
                    newOrder.push({
                        id: table.row(diff[i].node).data().method_id,
                        method_line: diff[i].newData
                    });
                }

                $.ajax({
                    url: "{{ route('admin.updatePaymentMethodsOrder') }}",
                    type: "POST",
                    data: {
                        newOrder: newOrder
                    },
                    success: function(response) {
                        $.LoadingOverlay("hide");
                        table.ajax.reload();
                    },
                    error: function(xhr, status, error) {
                        $.LoadingOverlay("hide");
                        console.log(error);
                    }
                });
            });

            var currentRequest = null;
            $(document).on('click', '.add-payment-btn', function() {
                $.LoadingOverlay("show");
                var formData = new FormData();
                formData.append('id', '');
                currentRequest = jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    url: "{{ route('admin.addPaymentMethodModel') }}",
                    dataType: 'JSON',
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        if (currentRequest != null) {
                            currentRequest.abort();
                        }
                    },
                    success: function(data) {
                        $.LoadingOverlay("hide");
                        $('#addPaymentMethod .modal-body').html(data.htmls)
                        $('#addPaymentMethod').modal('show')
                    },
                    error: function(e) {
                        // Error
                        $.LoadingOverlay("hide");
                        return false;
                    }
                });
                return false;
            })
            $(document).on('click', '.edit-payment-btn', function() {
                $.LoadingOverlay("show");
                var id = $(this).attr('data-id');
                var formData = new FormData();
                formData.append('id', id);
                $.ajax({
                    type: 'POST',
                    data: formData,
                    url: "{{ route('admin.editPaymentMethodModel') }}",
                    dataType: 'JSON',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        $.LoadingOverlay("hide");
                        $('#editPaymentMethod .modal-body').html(data.htmls)
                        // $("#summernote").summernote();
                        $('#summernote').summernote({
                            height: 300,
                            // toolbar: [
                            //     ['style', ['style']],
                            //     ['font', ['bold', 'italic', 'underline', 'clear']],
                            //     ['fontname', ['fontname']],
                            //     ['fontsize', ['fontsize']],
                            //     ['color', ['color']],
                            //     ['para', ['ul', 'ol', 'paragraph']],
                            //     ['table', ['table']],
                            //     ['insert', ['link', 'picture', 'video']],
                            //     ['view', ['fullscreen', 'codeview', 'help']]
                            // ]
                        });
                        $('#editPaymentMethod').modal('show')
                    },
                    error: function(e) {
                        // Error
                        $.LoadingOverlay("hide");
                        return false;
                    }
                });
                return false;
            });

            $("#editPaymentMethodForm").validate({
                rules: {
                    name: {
                        required: true
                    },
                    min: {
                        required: true
                    },
                    max: {
                        required: true
                    },
                    method_type: {
                        required: true
                    }
                },
                messages: {},
                submitHandler: function(form) {
                    $.LoadingOverlay("show");
                    $('.edit_payment_method_errors').html('');
                    $('.edit_payment_method_success').html('');
                    var formData = new FormData(form);
                    currentRequest = jQuery.ajax({
                        type: 'POST',
                        data: formData,
                        url: "{{ route('admin.updatePaymentMethodModel') }}",
                        dataType: 'JSON',
                        processData: false,
                        contentType: false,
                        beforeSend: function() {
                            if (currentRequest != null) {
                                currentRequest.abort();
                            }
                        },
                        success: function(data) {
                            $.LoadingOverlay("hide");
                            if (data.errors) {
                                var errors = data.errors;
                                $.each(errors, function(i, val) {
                                    $('.edit_payment_method_errors').append(
                                        '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                        val[0] + '</div>');
                                })
                            } else if (data.status == 0) {
                                $('.edit_payment_method_errors').html(
                                    '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                    data.message + '</div>');
                            } else {
                                $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(data.message);
                                table.ajax.reload();
                                $('#editPaymentMethod').modal('hide')
                            }
                            $('.modal').animate({
                                scrollTop: 0
                            }, 1000);
                            setTimeout(() => {
                                $('.edit_payment_method_errors').html('');
                                $('.edit_payment_method_success').html('');
                            }, 3000);
                        },
                        error: function(e) {
                            // Error
                            $.LoadingOverlay("hide");
                            return false;
                        }
                    });
                    return false;
                }
            });
            $("#addPaymentMethodForm").validate({
                rules: {},
                messages: {},
                submitHandler: function(form) {
                    $.LoadingOverlay("show");
                    $('.add_payment_method_errors').html('');
                    $('.add_payment_method_success').html('');
                    var formData = new FormData(form);
                    currentRequest = jQuery.ajax({
                        type: 'POST',
                        data: formData,
                        url: "{{ route('admin.storeAddPaymentMethodModel') }}",
                        dataType: 'JSON',
                        processData: false,
                        contentType: false,
                        beforeSend: function() {
                            if (currentRequest != null) {
                                currentRequest.abort();
                            }
                        },
                        success: function(data) {
                            $.LoadingOverlay("hide");
                            if (data.errors) {
                                var errors = data.errors;
                                $.each(errors, function(i, val) {
                                    $('.add_payment_method_errors').append(
                                        '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                        val[0] + '</div>');
                                })
                            } else if (data.status == 0) {
                                $('.add_payment_method_errors').html(
                                    '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                    data.message + '</div>');
                            } else {
                                table.ajax.reload();
                                $('#addPaymentMethod').modal('hide')
                            }
                            $('.modal').animate({
                                scrollTop: 0
                            }, 1000);
                            setTimeout(() => {
                                $('.add_payment_method_errors').html('');
                                $('.add_payment_method_success').html('');
                            }, 3000);
                        },
                        error: function(e) {
                            // Error
                            $.LoadingOverlay("hide");
                            return false;
                        }
                    });
                    return false;
                }
            });
        });
        // $('#editPaymentMethod').on('click', '.dropdown-toggle', function() {
        //     console.log(".....")
        //     $(this).next('.note-dropdown-menu').addClass('show');
        //     $(this).next('.note-dropdown-menu').removeClass('show');
        // })
        // $('.dropdown-toggle').on('click', function() {
        //     console.log("=======")
        // });
        $(document).ready(function() {
                // $(this).next('.note-dropdown-menu').addClass('show');
                // },
                // function() {
                // $(this).next('.note-dropdown-menu').removeClass('show');
                // }
        });
    </script>
@endsection