@extends('layouts.app')
@section('title_header')
    Role Management
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Role Management', 'url' => '/role-management']]" />
@endsection

@push('style')
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
@endpush

@section('content')
    @php
        $edit_role_permission = session("permissions")['edit_role_management'] ?? null;
        $can_edit = str_contains($edit_role_permission, 'actions');

        $create_role_permission = session("permissions")['create_role_management'] ?? null;
        $can_create = str_contains($create_role_permission, 'actions');
    @endphp
    <section class="flex lg:flex-row flex-col gap-4">
        @if ($can_create)
<div class="card card-border bg-white lg:max-w-md w-full h-[255px]">
            <div class="card-body">
                <form id="form-role">
                    <input type="hidden" id="id_roles" name="id_roles">
                    <div class="mb-3">
                        <label for="name" class="label">
                            Role Name
                        </label>
                        <input id="name" type="text" class="input w-full mt-2" placeholder="a.g Users"
                            name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="status" class="label">Status</label>
                        <select class="select w-full" name="status" id="status">
                            <option disabled selected>Pilih status</option>
                            <option value="1">Aktif</option>
                            <option value="0">Non-aktif</option>
                        </select>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-info text-white"> <i data-lucide="check"></i> Submit</button>
                        <button type="button" id="btn-clear" class="btn btn-error text-white"> <i data-lucide="x"></i>
                            Cancel</button>
                    </div>
                </form>
            </div>
        </div>

        @endif

        <div class="card card-border bg-white w-full">
            <div class="card-body">
                <table id="default-table" class="w-full">
                </table>
            </div>
        </div>
    </section>

    <!-- Modal Dialog -->
    <dialog id="modal_confirm_update_status" class="modal">
        <div class="modal-box">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="text-lg font-bold text-warning">Perhatian!</h3>
            <p class="py-4">Mengubah status role dapat mempengaruhi alur akses user. Apakah Anda yakin ingin
                melanjutkan?</p>
            <div class="flex justify-end gap-2">
                <button id="btn-confirm-update-status" class="btn btn-warning ">Lanjutkan</button>
            </div>
        </div>
    </dialog>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
    <script>
        let dataTable;
        let previousStatus = null;
        let isConfirmedToUpdateStatus = false;

        $(document).ready(function() {
            initDataTable([]);

            fetchRoles();
            $(document).on('click', '.btn-edit', function() {
                const id = $(this).data('id');

                $.ajax({
                    type: 'GET',
                    url: `/api/roles-management?id_role=${id}`,
                    success: function(res) {
                        const role = res.data;

                        $('#id_roles').val(role.id);
                        $('#name').val(role.name);
                        $('#status').val(role.status);

                        previousStatus = role.status;

                        toastr.success("Data berhasil dimuat ke form.");
                    },
                    error: function() {
                        toastr.error("Gagal mengambil data role.");
                    }
                });
            });

            // Konfirmasi update status
            $('#btn-confirm-update-status').on('click', function() {
                isConfirmedToUpdateStatus = true;
                document.getElementById("modal_confirm_update_status").close();
                $('#form-role').submit(); // Submit ulang form
            });

            // Tombol clear/reset
            $('#btn-clear').on('click', function() {
                $('#form-role')[0].reset();
                $('#id_roles').val('');
                previousStatus = null;
                isConfirmedToUpdateStatus = false;
            });

            // Submit form role
            $('#form-role').on('submit', function(e) {
                e.preventDefault();

                const currentStatus = $('#status').val();
                const isUpdatingStatus = $('#id_roles').val() && currentStatus != previousStatus;

                if (isUpdatingStatus && !isConfirmedToUpdateStatus) {
                    const modal = document.getElementById("modal_confirm_update_status");
                    if (typeof modal.showModal === "function") {
                        modal.showModal();
                    } else {
                        alert("Browser tidak mendukung HTMLDialogElement.");
                    }
                    return;
                }

                const formData = {
                    id_roles: $('#id_roles').val(),
                    name: $('#name').val(),
                    status: currentStatus
                };

                $.ajax({
                    type: "POST",
                    url: "/api/roles-management/create-or-update",
                    data: formData,
                    success: function(res) {
                        toastr.success(res.message);
                        fetchRoles();
                        $('#form-role')[0].reset();
                        $('#id_roles').val('');
                        previousStatus = null;
                        isConfirmedToUpdateStatus = false;
                    },
                    error: function(xhr) {
                        const msg = xhr.responseJSON?.message || 'Gagal menyimpan data.';
                        toastr.error(msg);
                    }
                });
            });
        });

        function initDataTable(data) {
            const headings = ['Nama Role', 'Status', 'Dibuat', 'Action'];

            if (dataTable) {
                dataTable.destroy();
            }

            try {
                dataTable = new simpleDatatables.DataTable("#default-table", {
                    data: {
                        headings,
                        data
                    },
                    searchable: true,
                    perPageSelect: false
                });

                if (typeof window.createLucideIcons === 'function') {
                    window.createLucideIcons();
                }
            } catch (error) {
                console.error("Error initializing DataTable:", error);
            }
        }

        function fetchRoles() {
            $.ajax({
                type: "GET",
                url: "/api/roles-management",
                dataType: "JSON",
                success: function(res) {
                    const roles = res.data || [];
                    const headings = ['Nama Role', 'Status', 'Dibuat', 'Action'];

                    const data = roles.map(role => [
                        role.name,
                        role.status === "1" ? 'Active' : 'Inactive',
                        new Date(role.created_at).toLocaleString(),
                        `
                        @if ($can_edit)
                        <button class="btn btn-sm btn-ghost btn-edit" data-id="${role.id}">
                            <i data-lucide="pencil" class="w-4 h-4"></i> Edit
                        </button>
                        @else
                            <span>-</span>
                        @endif
                    `
                    ]);

                    initDataTable(data);
                },
                error: function() {
                    toastr.error("Gagal memuat data role.");
                    // Initialize with empty data on error
                    initDataTable([]);
                }
            });
        }
    </script>
@endpush