@extends('layouts.app')
@section('title_header')
    User Management
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'User Management', 'url' => '/user-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
        $btn_create_user_management = session("permissions")['create_user_management'] ?? null;
        $btn_create = str_contains($btn_create_user_management, 'actions');

        $btn_edit_user_management = session("permissions")['edit_user_management'] ?? null;
        $btn_edit = str_contains($btn_edit_user_management, 'actions');

        $btn_delete_user_management = session("permissions")['delete_user_management'] ?? null;
        $btn_delete = str_contains($btn_delete_user_management, 'actions');
    @endphp
    <section class="flex lg:flex-row flex-col gap-4">
        @if ($btn_create)
        <div class="card card-border bg-white lg:max-w-md w-full h-[420px]">
            <div class="card-body">
                <form id="form-user">
                    <div class="mb-3">
                        <label for="name" class="label">
                            Name
                        </label>
                        <input id="name" type="text" class="input w-full mt-2" placeholder="a.g Jhon Doe"
                            name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="label">
                            Email
                        </label>
                        <input id="email" type="email" class="input w-full mt-2" placeholder="a.g jhon@example.com"
                            name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="label">
                            Password
                        </label>
                        <input id="password" type="password" class="input w-full mt-2" placeholder="****" name="password"
                            required>
                    </div>
                    <div class="mb-3">
                        <label for="role" class="label">
                            Role
                        </label>
                        <select class="select w-full mt-2" name="id_role" id="select-role">
                        </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 h-auto">
            <div class="card-body">
                <table id="default-table"></table>
            </div>
        </div>
    </section>
@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 editingId = null;

        $(document).ready(function() {
            fetchRoles();
            fetchUsers();

            $('#form-user').submit(function(e) {
                e.preventDefault();

                const method = editingId ? "PUT" : "POST";
                const url = editingId ? `/api/user-management/${editingId}` : "/api/user-management";

                $.ajax({
                    type: method,
                    url: url,
                    data: {
                        name: $("#name").val(),
                        email: $("#email").val(),
                        password: $("#password").val(),
                        id_role: $("#select-role").val()
                    },
                    dataType: "JSON",
                    success: function(res) {
                        toastr.success("User berhasil disimpan.");
                        $('#form-user')[0].reset();
                        editingId = null;
                        fetchUsers();
                    },
                    error: function(xhr) {
                        toastr.error("Gagal menyimpan user: " + (xhr.responseJSON.message ||
                            "Terjadi kesalahan."));
                    }
                });
            });

            $('#btn-clear').click(function() {
                $('#form-user')[0].reset();
                editingId = null;
            });

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

                $.ajax({
                    type: "GET",
                    url: `/api/user-management/${id}`,
                    dataType: "JSON",
                    success: function(res) {
                        const user = res.data;
                        $('#name').val(user.name);
                        $('#email').val(user.email);
                        $('#password').val('');
                        $('#select-role').val(user.id_role);
                        editingId = user.id;
                    },
                    error: function() {
                        toastr.error("Gagal mengambil data user.");
                    }
                });
            });

            $(document).on('click', '.btn-delete', function() {
                const id = $(this).data('id');
                if (!confirm("Yakin ingin menghapus user ini?")) return;

                $.ajax({
                    type: "DELETE",
                    url: `/api/user-management/${id}`,
                    success: function() {
                        toastr.success("User berhasil dihapus.");
                        fetchUsers();
                    },
                    error: function() {
                        toastr.error("Gagal menghapus user.");
                    }
                });
            });
        });

        function fetchUsers() {
            $.ajax({
                type: "GET",
                url: "/api/user-management",
                dataType: "JSON",
                success: function(res) {
                    const users = res.data || [];
                    const headings = ['Nama', 'Email', 'Role', 'Action'];
                    const data = users.map(user => [
                        user.name,
                        user.email,
                        user.role?.name || '-',
                        `
                        @if ($btn_edit)
                        <button class="btn btn-sm btn-ghost btn-edit" data-id="${user.id}">
                            <i data-lucide="pencil" class="w-4 h-4"></i> Edit
                        </button>
                        @endif
                        @if ($btn_delete)
                        <button class="btn btn-sm btn-ghost btn-delete" data-id="${user.id}">
                            <i data-lucide="trash" class="w-4 h-4"></i> Delete
                        </button>
                        @endif
                        `
                    ]);

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

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

                    if (typeof window.createLucideIcons === 'function') {
                        window.createLucideIcons();
                    }
                },
                error: function() {
                    toastr.error("Gagal memuat data user.");
                }
            });
        }

        function fetchRoles() {
            $.ajax({
                url: '/api/fetch-roles',
                type: 'GET',
                success: function(res) {
                    const select = $('#select-role');
                    select.empty();
                    select.append('<option value="" disabled selected>Pilih role</option>');
                    res.data.forEach(role => {
                        select.append(`<option value="${role.id}">${role.name}</option>`);
                    });
                },
                error: function() {
                    toastr.error('Gagal mengambil data role.');
                }
            });
        }
    </script>
@endpush