@extends('layouts.app')

@section('content')

    <div>
        <!-- Pages Header -->
        <div class="panelHeader">
            <h3 class="panelHeaderTitle mb-2 md:mb-0">Categories</h3>

            <!-- Modal toggle -->
            <div class="flex gap-4 flex-wrap">
                @if (canAccess(['mail mailing lists create new']))
                    <a data-modal-target="default-modal" data-modal-toggle="default-modal" href="#" class="button">
                        <i class="fa-solid fa-plus"></i>
                        Create New
                    </a>
                @endif
            </div>
        </div>

        <!-- Blog Table -->
        <div class="custom-data-table bg-white shadow-custom rounded overflow-x-auto">
            <table id="dataTable">
                <thead>
                <tr>
                    <th width="30">
                        #
                    </th>
                    <th>
                        Category
                    </th>

                    <th width="120" class="!text-right">
                        Action
                    </th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>



    <!-- Main modal -->
    <div id="default-modal" tabindex="-1" aria-hidden="true"
         class="hidden bg-black/70 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[99999999999] justify-center items-center w-full md:inset-0 h-full max-h-full">
        <div class="relative p-4 w-full max-w-2xl max-h-full">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                <!-- Modal header -->
                <form action="{{ route('admin.email.category.store') }}" method="post" enctype="multipart/form-data">
                    @csrf

                    <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                            Create New
                        </h3>
                        <button type="button"
                                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                                data-modal-hide="default-modal">
                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                 viewBox="0 0 14 14">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                            </svg>
                            <span class="sr-only">Close modal</span>
                        </button>
                    </div>

                    <!-- Modal body -->
                    <div class="grid grid-cols-12 gap-4 p-4 md:p-5">
                        <div class="col-span-12 flex flex-col gap-1.5">
                            <label for="">Name</label>
                            <input type="text" name="name" placeholder="Category Name" class="inputField" required/>
                            @error('email')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>

                    <!-- Modal footer -->
                    <div
                        class="flex items-center justify-end p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                        <button type="submit" class="button"> Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Edit modal -->
    <div id="edit-modal" tabindex="-1" aria-hidden="true"
         class="hidden bg-black/70 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[99999999999] justify-center items-center w-full md:inset-0 h-full max-h-full">
        <div class="relative p-4 w-full max-w-2xl max-h-full">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                <!-- Modal header -->
                <form action="{{ route('admin.email.category.update') }}" method="post" enctype="multipart/form-data">
                    @csrf

                    <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                            Edit Category
                        </h3>

                        <button type="button"
                                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                                data-modal-hide="edit-modal">
                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                 viewBox="0 0 14 14">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                            </svg>
                            <span class="sr-only">Close modal</span>
                        </button>
                    </div>

                    <!-- Modal body -->
                    <div class="grid grid-cols-12 gap-4 p-4 md:p-5">
                        <div class="col-span-12  flex flex-col gap-1.5">

                            <input type="hidden" id="categoryId" name="id" />

                            <div class="col-span-12 flex flex-col gap-1.5">
                                <label for="">Name</label>
                                <input type="text" name="name" id="categoryName" placeholder="Category Name" class="inputField" required/>
                            </div>
                        </div>
                    </div>

                    <!-- Modal footer -->
                    <div
                        class="flex items-center justify-end p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                        <button type="submit" class="primary-btn"> Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('headerPartial')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
    <link rel="stylesheet" href="{{ asset('public/css/custom-data-table.css') }}">
    <script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>

    <style>
        .custom-data-table .dt-layout-table {
            overflow-x: auto
        }

        #edit-modal button[data-modal-hide] {
            display: none
        }
    </style>
@endpush

@push('footerPartial')
    <script>
        $(document).ready(function () {

            let table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.email.category') }}",
                    data: function (d) {
                        //d.key = $('#demo').val();
                    }
                },
                order: [[1, 'asc']],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'name'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                lengthMenu: [
                    [25, 50, 100, 250, 500, 1000],
                    [25, 50, 100, 250, 500, 1000]
                ],
            });
        });

        function getCheckRecords() {
            let totalEmail = 0;
            let emailIds = [];
            $('.row-checkbox:checked').each(function () {
                emailIds.push($(this).val());
                totalEmail++;
            });

            $(".sendButton").prop('disabled', totalEmail <= 0);
            $(".totalEmail").html(totalEmail);

            return emailIds;
        }

        async function getData(id) {

            $('#categoryId').val();
            $('#categoryName').val();

            const targetEl = document.getElementById('edit-modal');
            const options = {
                placement: 'bottom-right',
                backdrop: 'dynamic',
                backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
                closable: true,
                onHide: () => {
                    console.log('modal is hidden');
                },
                onShow: () => {
                    console.log('modal is shown');
                },
                onToggle: () => {
                    console.log('modal has been toggled');
                },
            };

            // instance options object
            const instanceOptions = {
                id: 'edit-modal',
                override: false
            };

            const modal = new Modal(targetEl, options, instanceOptions);
            modal.show();

            if (id) {
                const action = "{{ url('admin/email/category/edit') }}";
                $.post(action, {
                    id: id,
                    _token: '{{ csrf_token() }}'
                }).then(function (response) {

                    if(response.success){
                        $('#categoryId').val(response.data.id);
                        $('#categoryName').val(response.data.name);
                    }
                })
            }
        }
    </script>
@endpush