@extends('layout.admin')

@section('meta_tags')
@stop

@section('pagename')
    Modules And Permissions
@stop

@section('top_import_file')
@stop

@section('content')
<div class="card radius-10 w-100">
    <div class="card-body">
        <form id="regstr" class="row g-3">
            <div id="error" class="alert alert-danger d-none"></div>

            <div class="col-6">
              <label class="form-label">Module Name</label>
              <input type="text" name="name" class="form-control" placeholder="Enter Module Name" required>
            </div>

            <div class="col-6">
              <label class="form-label">Module Code</label>
              <input type="text" name="code" class="form-control" placeholder="Enter Module Code" required>
            </div>
            
            <div class="col-12 mt-3">
                <label class="form-label">Permissions</label>
                <div id="tags-input" class="tags-input">
                    <input type="text" placeholder="Add permissions...">
                    <button type="button" id="clear-tags" class="btn btn-secondary btn-sm">Clear All</button>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-3">
                <div class="d-grid">
                    <button class="btn btn-primary d-none" type="button" id="spinner" disabled>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Creating...
                    </button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </div>
        </form>
    </div>
</div>


<div class="card radius-10 w-100">
    <div class="card-body">
    <div class="d-flex align-items-center">
        <h6 class="mb-0">Users</h6>
    </div>
    <div class="table-responsive mt-2">
        <table class="table align-middle mb-0 dataTable" id="example">
        <thead class="table-light">
            <tr>
                <th>Date</th>
                <th>Module Name</th>
                <th>Module Code</th>
                <th>Permissions</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($m_a_p as $map)
                <tr>
                    <td>{{ $map->created_at->format('d-M-y g:i A') }}</td>
                    <td>{{ $map->name }}</td>
                    <td>{{ $map->code }}</td>
                    <td>
                        @php
                            $permissions = json_decode($map->all_permissions);
                        @endphp

                        @foreach ($permissions as $p)
                            {{ $p }} <br>
                        @endforeach
                    </td>
                    <td>{{ $map->status ? "Active" : "Inactive" }}</td>
                    <td>
                        <div class="table-actions d-flex align-items-center gap-3 fs-6">
                            <button class="btn text-warning editbtn" data-everything='@json($map)' data-bs-toggle="modal" data-bs-target="#exampleExtraLargeModal" data-bs-placement="bottom" title="" data-bs-original-title="Edit" aria-label="Edit"><ion-icon name="create" size="large"></ion-icon></button>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
        </table>
    </div>
    </div>
</div>

@stop

@section('bottom-scripts')
    {{-- Form Submission Script --}}
    <script>
        $(function() {
            $("#regstr").on("submit", function(e) {
                e.preventDefault();
                var formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}');

                var tags = [];
                $('#tags-input .tag').each(function() {
                    tags.push($(this).text().trim().replace(/\s*×\s*$/, '')); // Remove trailing '×'
                });
                $.each(tags, (index, value) => {
                    formdata.append('all_permissions[]', value)
                })

                $.ajax({
                    url: "{{ route('admin.modules_and_permissions.submit') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $(":submit").prop("disabled", true);
                        $(":submit").addClass("d-none");
                        $("#spinner").removeClass("d-none");
                        $("#error").addClass("d-none");
                    },
                    success: function(res) {
                        let obj = res;
                        if (obj.error) {
                            $("#error").html(obj.error);
                            $("#error").removeClass("d-none");
                            $("#spinner").addClass("d-none");
                            $(":submit").removeClass("d-none");
                            $(window).scrollTop(0);
                        } else if (obj.success) {
                            $("#spinner").addClass("d-none");
                            setTimeout(function() {
                                window.location.href = "{{ route('admin.modules_and_permissions.view') }}";
                            }, 1000);
                        } else {
                            $("#spinner").addClass("d-none");
                            $(":submit").prop("disabled", false);
                            $(":submit").removeClass("d-none");
                            $(window).scrollTop(0);
                        }
                        $(":submit").prop("disabled", false);
                    },
                    error: function(error) {
                        console.log(error);
                        $("#error").html(error.responseJSON.message || error.responseJSON.error);
                        $("#error").removeClass("d-none");
                        $("#spinner").addClass("d-none");
                        $(":submit").prop("disabled", false);
                        $(":submit").removeClass("d-none");
                    }
                });
            });
        });
    </script>

    {{-- Tags Input Script --}}
    <script>
        $(function() {
            var tagsInput = $('#tags-input');
            var input = tagsInput.find('input');

            input.on('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ',') {
                    e.preventDefault();
                    var tag = $(this).val().trim();
                    if (tag) {
                        addTag(tag);
                        $(this).val('');
                    }
                }
            });

            tagsInput.on('click', '.tag-remove', function() {
                $(this).parent().remove();
            });

            $('#clear-tags').on('click', function() {
                tagsInput.find('.tag').remove();
            });

            function addTag(tag) {
                var tagHtml = '<span class="tag">' + tag + ' <span class="tag-remove">&times;</span></span>';
                tagsInput.prepend(tagHtml);
            }
        });
    </script>

    {{-- Tags Input Styles --}}
    <style>
        .tags-input {
            border: 1px solid #ced4da;
            border-radius: .25rem;
            padding: .375rem .75rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .tags-input .tag {
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
            border-radius: .25rem;
            padding: .25rem .5rem;
            margin: .25rem;
            display: inline-flex;
            align-items: center;
        }
        .tags-input .tag-remove {
            margin-left: .5rem;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
@stop