@extends('org.layout.adminPanel')
@section('title', 'Templates')
@section('section', 'Templates / Codes')
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">
    <style>
        .tag-area {
            overflow-y: auto;
            max-height: 480px;
        }
    </style>
@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid">
        <div class="container">
            <center>
                <h2>{{ $template->name }}</h2>
            </center>
            <br>
            <div class="table-wrapper">
                <table id="codes-table" class="display responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>Code type</th>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script>
        $(document).ready(function() {
            $('#codes-table').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('org.template.fetch.codes', ['subdomain' => $subdomain, 'id' => encode($template->id)]) }}",
                language: {
                    emptyTable: `<div>
                                        <i class="bi bi-list-ol not-found-icon"></i>
                                        <p>Nothing found</p>
                                     </div>`,
                    processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                },
                columnDefs: [{
                    "width": "0px",
                    "targets": 0
                }, ],
                columns: [{
                        data: "section_type",
                        name: "section_type"
                    },
                    {
                        data: "section_id",
                        name: "section_id"
                    },
                    {
                        data: "name",
                        name: "section.name"
                    },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ],
            });
        });

        function tagForm() {
            $(`#trashModal`).modal('show');
        }

        function tagFormClose() {
            $(`#trashModal`).modal('hide');
        }

        const trashModal = new bootstrap.Modal($("#trashModal"));

        function showTrashPopup(e) {
            $("[data-set='trash-name']").text(e.dataset.trashName);
            $("#trash-id").val(`${e.dataset.trashId}`);
            trashModal.toggle();
        }
    </script>
@endsection