@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
    #modules-table td .btn-group .btn{
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Modules</h1>

    <div class="d-flex justify-content-end mb-3">
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createModuleModal">
            <i class="material-icons md-add"></i> Add Module
        </button>
    </div>

    <div class="card">
        <div class="card-body">
            <table id="modules-table" class="table table-bordered table-striped w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Created At</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===================== Create Module Modal ===================== --}}
<div class="modal fade" id="createModuleModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <form id="createModuleForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <i class="material-icons me-2">add</i> Add Module
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Module Name</label>
                        <input type="text" class="form-control" name="name" placeholder="e.g. users" required>
                    </div>

                    <div class="alert alert-danger d-none" id="createModuleErrors"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ===================== View Module Modal ===================== --}}
<div class="modal fade" id="viewModuleModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header text-white">
                <h5 class="modal-title">
                    <i class="material-icons me-2">visibility</i> View Module
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" class="form-control" id="view_module_name" readonly>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- ===================== Edit Module Modal ===================== --}}
<div class="modal fade" id="editModuleModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <form id="editModuleForm" method="POST">
            @csrf
            @method('PUT')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <i class="material-icons me-2">edit</i> Edit Module
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="edit_module_id">

                    <div class="mb-3">
                        <label class="form-label">Module Name</label>
                        <input type="text" class="form-control" name="name" id="edit_module_name" required>
                    </div>

                    <div class="alert alert-danger d-none" id="editModuleErrors"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ===================== Delete Module Modal ===================== --}}
<div class="modal fade" id="deleteModuleModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <form id="deleteModuleForm" method="POST">
            @csrf
            @method('DELETE')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <i class="material-icons me-2">delete</i> Confirm Delete
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    Delete module <strong id="delete_module_name">—</strong>?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
$(function () {

    const table = $('#modules-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("modules.index") }}',
        autoWidth: false,
        responsive: false,
        columns: [
            { data: 'DT_RowIndex', orderable:false, searchable:false },
            { data: 'name', name: 'name' },
            { data: 'created_at', name: 'created_at' },
            { data: 'action', orderable:false, searchable:false }
        ]
    });

    // CREATE
    $('#createModuleForm').on('submit', function (e) {
        e.preventDefault();

        $.ajax({
            url: '{{ route("modules.store") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('createModuleModal')).hide();
                $('#createModuleForm')[0].reset();
                $('#createModuleErrors').addClass('d-none').html('');
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#createModuleErrors');
                box.removeClass('d-none');

                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    let html = '<ul class="mb-0">';
                    Object.values(xhr.responseJSON.errors).forEach(errArr => {
                        errArr.forEach(msg => html += `<li>${msg}</li>`);
                    });
                    html += '</ul>';
                    box.html(html);
                } else {
                    box.html('Something went wrong. Please try again.');
                }
            }
        });
    });

    // VIEW
    $(document).on('click', '.viewModuleBtn', function () {
        $('#view_module_name').val($(this).data('name') ?? '—');
        new bootstrap.Modal(document.getElementById('viewModuleModal')).show();
    });

    // EDIT
    $(document).on('click', '.editModuleBtn', function () {
        const id = $(this).data('id');

        $('#edit_module_id').val(id);
        $('#edit_module_name').val($(this).data('name') ?? '');
        $('#editModuleErrors').addClass('d-none').html('');
        $('#editModuleForm').attr('action', `/modules/${id}`);

        new bootstrap.Modal(document.getElementById('editModuleModal')).show();
    });

    $('#editModuleForm').on('submit', function (e) {
        e.preventDefault();

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $(this).serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('editModuleModal')).hide();
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#editModuleErrors');
                box.removeClass('d-none');

                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    let html = '<ul class="mb-0">';
                    Object.values(xhr.responseJSON.errors).forEach(errArr => {
                        errArr.forEach(msg => html += `<li>${msg}</li>`);
                    });
                    html += '</ul>';
                    box.html(html);
                } else {
                    box.html('Something went wrong. Please try again.');
                }
            }
        });
    });

    // DELETE
    $(document).on('click', '.deleteModuleBtn', function () {
        const id = $(this).data('id');
        const name = $(this).data('name') ?? 'this module';

        $('#delete_module_name').text(name);
        $('#deleteModuleForm').attr('action', `/modules/${id}`);
        new bootstrap.Modal(document.getElementById('deleteModuleModal')).show();
    });

    $('#deleteModuleForm').on('submit', function (e) {
        e.preventDefault();

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $(this).serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('deleteModuleModal')).hide();
                table.ajax.reload(null, false);
            },
            error: function () {
                alert('Failed to delete module. Please try again.');
            }
        });
    });

});
</script>
@endpush