@extends('org.layout.adminPanel')
@section('title', 'Unique Codes')
@section('section', 'Unique 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">
            <div>
                <button type="button" class="button btn-primary" onclick="tagForm()"><i class="bi bi-plus-lg text-white me-2"></i>Add Unique Codes</button>
            </div>
            <br>
            <div class="table-wrapper">
                <table id="tags" class="display responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Added by</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="tagModal" tabindex="-1" aria-labelledby="tagModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tagModalLabel">Unique Codes</h5>
                </div>
                <div class="modal-body">
                    <form action="{{ route('org.unique-codes.store', compact('subdomain')) }}" method="post">
                        @csrf
                        <div class="tag-area d-flex flex-column gap-3">
                            <div class="d-flex gap-2">
                                <button type="button" class="button btn-primary" id="add-more-tag" style="width: 48px;" tabindex="-1"><i class="bi bi-plus-lg text-white"></i></button>
                                <input type="number" min="0" name="codes[]" id="" class="form-control" placeholder="Code" required>
                                <input type="text" name="code_names[]" id="" class="form-control" placeholder="Name" required>
                            </div>
                        </div>
                        <br>
                        <div>
                            <button type="submit" class="button btn-primary">Add Codes</button>
                            <button type="button" class="button btn-secondary" onclick="tagFormClose()">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="tagEditModal" tabindex="-1" aria-labelledby="tagEditModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tagEditModalLabel">Unique Codes</h5>
                </div>
                <div class="modal-body">
                    <form action="{{ route('org.unique-codes.update', compact('subdomain')) }}" method="post">
                        @csrf
                        @method('put')
                        <input type="hidden" name="is_edit" value="" id="code">
                        <div class="tag-area d-flex flex-column gap-3">
                            <div class="d-flex gap-2">
                                <input type="text" name="code_name" id="" class="form-control" placeholder="Name" required>
                            </div>
                        </div>
                        <br>
                        <div>
                            <button type="submit" class="button btn-primary">Update Code</button>
                            <button type="button" class="button btn-secondary" onclick="hideUpdatePopup()">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- trash popup --}}
    <!-- Modal -->
    <div class="modal fade" id="trashModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-center position-relative">
                        <i class="bi bi-trash-fill" style="font-size: 48px;"></i>
                        <i class="bi bi-tags-fill trash-floting-icon"></i>
                    </div>
                    <div>
                        <p class="fs-5 m-0 text-center">Are you sure to trash <br>"<b class="fs-5" data-set="trash-name">department</b>"?</p>
                        <p class="text-center my-3">This action trash <br>"<b class="" data-set="trash-name">department</b>"
                            code.
                        </p>
                    </div>
                    <form action="{{ route('org.unique-codes.trash', compact('subdomain')) }}" method="post">
                        @csrf
                        <input type="hidden" name="trash" id="trash-id" value="">
                        <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto" style="max-width: 350px;">
                            <input type="submit" class="button btn-danger flex-grow-1" style="width" id="trash-button" value="Yes, trash">
                            <button type="button" class="button btn-secondary flex-grow-1" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </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() {
            $('#tags').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('org.unique-codes.fetch', compact('subdomain')) }}",
                language: {
                    emptyTable: `<div>
                                        <i class="bi bi-123 not-found-icon"></i>
                                        <p>Nothing found</p>
                                     </div>`,
                    processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                },
                columnDefs: [{
                    "width": "0px",
                    "targets": 0
                }, ],
                columns: [{
                        data: "code",
                        name: "code"
                    },
                    {
                        data: "name",
                        name: "name"
                    },
                    {
                        data: "added_by",
                        name: "creator.full_name"
                    },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ],
            });
        });

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

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

        function showUpdatePopup(e) {
            $(`#code`).val(e.dataset.id);
            $.ajax({
                type: "get",
                url: "{{ route('org.unique-codes.data', compact('subdomain')) }}",
                data: {
                    code: e.dataset.id
                },
                success: function(response) {
                    $(`[name="code_name"]`).val(response.name);
                    $(`#tagEditModal`).modal('show');
                }
            });
        }

        function hideUpdatePopup() {
            $(`#tagEditModal`).modal('hide');
        }

        $(`#add-more-tag`).on('click', function() {
            $(`.tag-area`, `#tagModal`).append(`
            <div class="d-flex gap-2">
                <button type="button" class="button btn-secondary" id="add-more-tag" style="width: 48px;" onclick='this.parentElement.remove()' tabindex="-1"><i class="bi bi-dash-lg"></i></button>
                <input type="text" name="codes[]" id="" class="form-control" placeholder="Code" required>
                <input type="text" name="code_names[]" id="" class="form-control" placeholder="Name" required>
            </div>`);
        });

        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