@extends('layouts.app')
@section('title_header')
    Edit Permission
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => '/'],
        ['label' => 'Permission', 'url' => '/permission'],
        ['label' => 'Edit Permission', 'url' => '/edit/permission'],
    ]" />
@endsection

@section('content')
    <section>
        <div class="card card-border bg-white">
            <div class="card-body">
                <form id="form-update-permission">
                    <input type="hidden" id="permission-id" name="id" value="">
                    <div class="mb-3">
                        <label for="permission-name" class="label">Name</label>
                        <input type="text" name="name" id="permission-name" class="input w-full mt-2"
                            placeholder="Ketik disini....">
                    </div>
                    <div class="mb-3">
                        <label for="permission-guard-name" class="label">Guard Name</label>
                        <input type="text" name="guard_name" id="permission-guard-name" class="input w-full mt-2"
                            placeholder="Ketik disini....">
                    </div>
                    <div class="mb-3">
                        <label for="permission-role" class="label">Role</label>
                        <select class="select-role" name="role_id[]" id="permission-role" multiple="multiple"
                            style="width: 100%"></select>
                    </div>
                    <div>
                        <button type="button" id="submit-permission" class="btn btn-info text-white">
                            <i data-lucide="check"></i> Submit
                        </button>
                        <button type="button" class="btn btn-error text-white" id="btn-cancel">
                            <i data-lucide="x"></i> Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            $('.select-role').select2({
                placeholder: "Pilih satu atau lebih role",
                allowClear: true
            });

            const urlSegments = window.location.pathname.split('/');
            const permissionId = urlSegments[urlSegments.length - 1];

            // Load roles
            $.ajax({
                url: '/api/fetch-roles',
                type: 'GET',
                success: function(res) {
                    const select = $('#permission-role');
                    select.empty();

                    // Tambah opsi Pilih Semua
                    select.append('<option value="all" class="capitalize">Pilih Semua</option>');

                    select.append('<option value="" disabled selected>Pilih role</option>');

                    res.data.forEach(role => {
                        select.append(
                            `<option value="${role.id}" class="capitalize">${role.name}</option>`
                        );
                    });

                    // Setelah roles ter-load, jika edit, load data permission
                    if (permissionId && !isNaN(permissionId)) {
                        loadPermission(permissionId);
                    }
                },
                error: function() {
                    toastr.error('Gagal mengambil data role.');
                }
            });

            // Logika saat pilihan role berubah
            $('#permission-role').on('change', function() {
                const selected = $(this).val() || [];
                const allValue = 'all';

                if (selected.includes(allValue)) {
                    // Pilih semua kecuali 'all' sendiri
                    let allOptions = $('#permission-role option').map(function() {
                        return $(this).val();
                    }).get();

                    allOptions = allOptions.filter(val => val !== allValue && val !== "");

                    // Set semua opsi terpilih + 'all'
                    $(this).val([allValue, ...allOptions]).trigger('change.select2');
                } else {
                    // Jika 'all' tidak dipilih, pastikan opsi 'all' tidak terpilih
                    if ($(this).find('option:selected[value="all"]').length > 0) {
                        $(this).val(selected.filter(val => val !== allValue)).trigger('change.select2');
                    }
                }
            });

            function loadPermission(id) {
                $.ajax({
                    url: `/api/permission?permission_id=${id}`,
                    type: 'GET',
                    success: function(res) {
                        if (res.success) {
                            const perm = res.data;
                            $('#permission-id').val(perm.id);
                            $('#permission-name').val(perm.name);
                            $('#permission-guard-name').val(perm.guard_name);
                            const roleIds = perm.role_has_permission?.map(item => item.role_id) || [];
                            if (roleIds.length > 0) {
                                $('#permission-role').val(roleIds).trigger('change');
                            }
                        } else {
                            toastr.error('Data permission tidak ditemukan.');
                        }
                    },
                    error: function() {
                        toastr.error('Gagal mengambil data permission.');
                    }
                });
            }

            // Submit form (Create / Update)
            $('#submit-permission').click(function() {
                let selectedRoles = $('#permission-role').val() || [];
                const allValue = 'all';

                if (selectedRoles.includes(allValue)) {
                    // Ambil semua role kecuali 'all' dan option kosong
                    selectedRoles = $('#permission-role option').map(function() {
                        return $(this).val();
                    }).get().filter(val => val !== allValue && val !== "");
                }

                const formData = {
                    id: $('#permission-id').val(),
                    name: $('#permission-name').val(),
                    guard_name: $('#permission-guard-name').val(),
                    role_id: selectedRoles // array role ID yang sebenarnya
                };

                $.ajax({
                    url: '/api/permission',
                    method: 'POST',
                    data: formData,
                    success: function(res) {
                        if (res.success) {
                            toastr.success(res.message);
                            window.location.href = '/permission';
                        } else {
                            toastr.error(res.message || 'Gagal menyimpan permission.');
                        }
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            Object.values(errors).forEach(errArr => {
                                toastr.error(errArr[0]);
                            });
                        } else {
                            toastr.error('Gagal menyimpan permission.');
                        }
                    }
                });
            });

            // Cancel button redirect
            $('#btn-cancel').click(function() {
                window.location.href = '/permission';
            });
        });
    </script>
@endpush