@extends('layouts.main')

@section('title')
    {{ __('Roles') }}
@endsection

@push('css')
<style>
    /* Role card styles */
    .role-card {
        border: 1px solid #e4e6ef;
        border-radius: 0.85rem;
        transition: all 0.25s ease;
        position: relative;
        overflow: hidden;
    }
    .role-card:hover {
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
        border-color: #d4d8e4;
    }
    .role-card .card-header {
        background: linear-gradient(135deg, #f8f9fc 0%, #f1f3f8 100%);
        border-bottom: 1px solid #eef0f4;
        padding: 1.25rem 1.5rem 1rem;
    }
    .role-card .role-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: #181c32;
        margin: 0;
    }
    .role-card .user-count-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.3rem 0.65rem;
        border-radius: 6px;
        background: #e8f0fe;
        color: #3e97ff;
    }
    .role-card .user-count-badge.has-users {
        background: #e8fff3;
        color: #17c653;
    }
    .role-card .card-body {
        padding: 1rem 1.5rem;
    }
    .role-card .perm-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .role-card .perm-list li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0;
        font-size: 0.85rem;
        color: #5e6278;
        font-weight: 500;
    }
    .role-card .perm-list li .perm-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #3e97ff;
        flex-shrink: 0;
    }
    .role-card .perm-more {
        font-size: 0.8rem;
        color: #a1a5b7;
        font-style: italic;
        padding-top: 0.25rem;
    }
    .role-card .card-footer {
        background: transparent;
        border-top: 1px solid #f1f3f8;
        padding: 0.85rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Add role card */
    .add-role-card {
        border: 2px dashed #d4d8e4;
        border-radius: 0.85rem;
        transition: all 0.25s ease;
        cursor: pointer;
        min-height: 280px;
    }
    .add-role-card:hover {
        border-color: #3e97ff;
        background: #f8fbff;
    }
    .add-role-card .add-icon-circle {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #e8f0fe 0%, #d6e4ff 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        transition: transform 0.25s ease;
    }
    .add-role-card:hover .add-icon-circle {
        transform: scale(1.08);
    }
    .add-role-card .add-icon-circle i {
        font-size: 1.5rem;
        color: #3e97ff;
    }

    /* Search bar */
    .roles-search-bar {
        max-width: 280px;
    }

    /* Stats pills */
    .role-stats-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: #f8f9fc;
        border: 1px solid #e4e6ef;
        border-radius: 8px;
        padding: 0.45rem 0.85rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: #7e8299;
    }
    .role-stats-pill .pill-value {
        color: #181c32;
        font-weight: 700;
    }

    /* Modal improvements */
    .modal-perm-group-card {
        border: 1px solid #e4e6ef;
        border-radius: 0.6rem;
        margin-bottom: 0.75rem;
        overflow: hidden;
    }
    .modal-perm-group-card .modal-group-header {
        background: #f8f9fc;
        padding: 0.65rem 1rem;
        font-weight: 600;
        font-size: 0.875rem;
        color: #181c32;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 1px solid #eef0f4;
    }
    .modal-perm-group-card .modal-group-header .modal-toggle-icon {
        transition: transform 0.2s ease;
        color: #a1a5b7;
    }
    .modal-perm-group-card .modal-group-header.collapsed .modal-toggle-icon {
        transform: rotate(-90deg);
    }
    .modal-perm-group-card .modal-group-body {
        padding: 0;
    }
    .modal-perm-group-card .modal-perm-item {
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #f5f5f8;
        display: flex;
        align-items: center;
    }
    .modal-perm-group-card .modal-perm-item:last-child {
        border-bottom: none;
    }
    .modal-perm-group-card .modal-perm-item:hover {
        background: #fafbfc;
    }

    /* Delete confirmation */
    .btn-delete-role {
        transition: all 0.2s ease;
    }
    .btn-delete-role:hover {
        background: #fff5f8 !important;
        color: #f8285a !important;
    }
</style>
@endpush

@section('isi')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-4 py-lg-8">
            <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack flex-wrap">
                <div class="app-toolbar-wrapper d-flex flex-stack flex-wrap gap-4 w-100">
                    <div class="page-title d-flex flex-column justify-content-center gap-1 me-3">
                        <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">
                            {{ __('Daftar Role') }}</h1>
                        <span class="text-gray-500 fs-7 fw-semibold">Kelola role dan permission pengguna sistem</span>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <!--begin::Stats-->
                        <div class="role-stats-pill d-none d-md-inline-flex">
                            <i class="ki-outline ki-shield-tick fs-5 text-primary"></i>
                            <span class="pill-value">{{ $roles->count() }}</span> Role
                        </div>
                        <!--end::Stats-->
                        <a href="{{ route('roles.create') }}" class="btn btn-sm btn-primary">
                            <i class="ki-outline ki-plus fs-5 me-1"></i> Tambah Role
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Toolbar-->

        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-fluid">

                <!--begin::Search & Filter bar-->
                <div class="d-flex flex-wrap justify-content-between align-items-center mb-6 gap-3">
                    <div class="d-flex align-items-center position-relative roles-search-bar">
                        <i class="ki-outline ki-magnifier fs-4 position-absolute ms-4 text-gray-500"></i>
                        <input type="text" id="roleSearchInput"
                            class="form-control form-control-solid form-control-sm ps-11"
                            placeholder="Cari role..." />
                    </div>
                    <div class="text-gray-500 fs-7 fw-semibold" id="roleSearchCount" style="display:none;">
                        Menampilkan <span class="fw-bold text-dark" id="filteredCount">0</span> dari <span class="fw-bold text-dark">{{ $roles->count() }}</span> role
                    </div>
                </div>
                <!--end::Search & Filter bar-->

                <!--begin::Row-->
                <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-5 g-xl-7" id="rolesGrid">

                    @foreach ($roles as $role)
                        <div class="col role-col" data-role-name="{{ strtolower($role->name) }}">
                            <div class="card role-card h-100">
                                <div class="card-header border-0">
                                    <div class="d-flex align-items-center justify-content-between w-100">
                                        <h3 class="role-name">{{ Str::headline($role->name) }}</h3>
                                        <span class="user-count-badge {{ $role->users->count() > 0 ? 'has-users' : '' }}">
                                            <i class="ki-outline ki-people fs-6"></i>
                                            {{ $role->users->count() }} user{{ $role->users->count() !== 1 ? 's' : '' }}
                                        </span>
                                    </div>
                                </div>
                                <div class="card-body pt-2 pb-3">
                                    <div class="text-gray-500 fs-7 fw-semibold mb-3">
                                        {{ $role->permissions->count() }} permission{{ $role->permissions->count() !== 1 ? 's' : '' }} ditetapkan
                                    </div>
                                    <ul class="perm-list">
                                        @foreach ($role->permissions->take(5) as $perm)
                                            <li>
                                                <span class="perm-dot"></span>
                                                {{ $perm->name }}
                                            </li>
                                        @endforeach
                                    </ul>
                                    @if ($role->permissions->count() > 5)
                                        <div class="perm-more">
                                            + {{ $role->permissions->count() - 5 }} permission lainnya
                                        </div>
                                    @endif
                                </div>
                                <div class="card-footer">
                                    <a href="{{ route('roles.edit', $role->id) }}"
                                        class="btn btn-sm btn-light-primary btn-active-primary">
                                        <i class="ki-outline ki-pencil fs-6 me-1"></i> Edit
                                    </a>

                                    @can('delete developer/roles')
                                        <form action="{{ route('roles.destroy', $role->id) }}" method="POST"
                                            class="d-inline delete-role-form">
                                            @method('DELETE')
                                            @csrf
                                            <button type="button" class="btn btn-sm btn-light btn-delete-role"
                                                data-role-name="{{ Str::headline($role->name) }}"
                                                data-user-count="{{ $role->users->count() }}">
                                                <i class="ki-outline ki-trash fs-6 me-1"></i> Hapus
                                            </button>
                                        </form>
                                    @endcan
                                </div>
                            </div>
                        </div>
                    @endforeach

                    @can('create developer/roles')
                        <div class="col role-col" id="addRoleCol">
                            <div class="card add-role-card h-100 d-flex align-items-center justify-content-center"
                                data-bs-toggle="modal" data-bs-target="#kt_modal_add_role">
                                <div class="card-body d-flex flex-column align-items-center justify-content-center text-center p-5">
                                    <div class="add-icon-circle">
                                        <i class="ki-outline ki-plus fs-1"></i>
                                    </div>
                                    <div class="fw-bold fs-5 text-gray-700">{{ __('Tambah Role Baru') }}</div>
                                    <div class="text-gray-400 fs-7 mt-1">Buat role dengan set permission khusus</div>
                                </div>
                            </div>
                        </div>
                    @endcan
                </div>
                <!--end::Row-->

                <!--begin::Empty search state-->
                <div class="text-center py-15 d-none" id="noRolesFound">
                    <i class="ki-outline ki-shield-search fs-2tx text-gray-300 d-block mb-4"></i>
                    <div class="text-gray-500 fw-semibold fs-5">Tidak ada role yang cocok dengan pencarian</div>
                    <button class="btn btn-sm btn-light-primary mt-4" id="clearSearchBtn">
                        <i class="ki-outline ki-arrows-circle fs-5 me-1"></i> Reset Pencarian
                    </button>
                </div>
                <!--end::Empty search state-->

            </div>
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection

@section('modals')
    <!--begin::Modal - Add role-->
    <div class="modal fade" id="kt_modal_add_role" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="fw-bold">{{ __('Tambah Role Baru') }}</h2>
                    <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                        <i class="ki-outline ki-cross fs-1"></i>
                    </div>
                </div>
                <div class="modal-body scroll-y mx-lg-5 my-7">
                    <form id="kt_modal_add_role_form" class="form" action="{{ route('roles.store') }}" method="POST">
                        @csrf
                        <div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_add_role_scroll"
                            data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}"
                            data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_role_header"
                            data-kt-scroll-wrappers="#kt_modal_add_role_scroll" data-kt-scroll-offset="300px">

                            <div class="fv-row mb-8">
                                <label class="fs-5 fw-bold form-label mb-2">
                                    <span class="required">Nama Role</span>
                                </label>
                                <input class="form-control form-control-solid" placeholder="Masukkan nama role"
                                    name="name" />
                            </div>

                            <div class="fv-row">
                                <div class="d-flex align-items-center justify-content-between mb-4">
                                    <label class="fs-5 fw-bold form-label mb-0">Permission Role</label>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-sm btn-light-success py-1 px-3" id="modalSelectAll">
                                            <i class="ki-outline ki-check-square fs-6 me-1"></i> Semua
                                        </button>
                                        <button type="button" class="btn btn-sm btn-light-danger py-1 px-3" id="modalDeselectAll">
                                            <i class="ki-outline ki-cross-square fs-6 me-1"></i> Reset
                                        </button>
                                    </div>
                                </div>

                                @foreach ($permissionsGroups as $mIdx => $item)
                                    <div class="modal-perm-group-card">
                                        <div class="modal-group-header" data-bs-toggle="collapse" data-bs-target="#modalPermGroup{{ $mIdx }}">
                                            <div class="d-flex align-items-center gap-2">
                                                <label class="form-check form-check-sm form-check-custom form-check-solid" onclick="event.stopPropagation()">
                                                    <input class="form-check-input modal-select-all-group" type="checkbox" data-modal-group="{{ $mIdx }}">
                                                </label>
                                                <span>{{ $item->name }}</span>
                                                <span class="text-gray-400 fs-8">({{ $item->permissions->count() }})</span>
                                            </div>
                                            <i class="ki-outline ki-down modal-toggle-icon fs-7"></i>
                                        </div>
                                        <div class="modal-group-body collapse show" id="modalPermGroup{{ $mIdx }}">
                                            @foreach ($item->permissions as $permission)
                                                <div class="modal-perm-item">
                                                    <label class="form-check form-check-sm form-check-custom form-check-solid">
                                                        <input class="form-check-input modal-perm-check" type="checkbox"
                                                            value="{{ $permission->name }}" name="permission[]"
                                                            data-modal-group="{{ $mIdx }}" />
                                                        <span class="form-check-label fs-7">{{ $permission->name }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="text-center pt-10">
                            <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">{{ __('Batal') }}</button>
                            <button type="submit" class="btn btn-primary">
                                <span class="indicator-label">
                                    <i class="ki-outline ki-check fs-4 me-1"></i> {{ __('Simpan Role') }}
                                </span>
                                <span class="indicator-progress">{{ __('Menyimpan') }}...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal - Add role-->
@endsection

@push('js-vendor')
@endpush

@push('js-page')
<script>
$(document).ready(function() {
    // --- Search / filter roles ---
    $('#roleSearchInput').on('input', function() {
        const query = $(this).val().toLowerCase().trim();
        const $cols = $('.role-col:not(#addRoleCol)');
        let visibleCount = 0;

        if (!query) {
            $cols.removeClass('d-none');
            $('#roleSearchCount').hide();
            $('#noRolesFound').addClass('d-none');
            $('#rolesGrid').removeClass('d-none');
            return;
        }

        $cols.each(function() {
            const name = $(this).data('role-name');
            const match = name && name.includes(query);
            $(this).toggleClass('d-none', !match);
            if (match) visibleCount++;
        });

        $('#filteredCount').text(visibleCount);
        $('#roleSearchCount').show();

        if (visibleCount === 0) {
            $('#noRolesFound').removeClass('d-none');
            $('#rolesGrid').addClass('d-none');
        } else {
            $('#noRolesFound').addClass('d-none');
            $('#rolesGrid').removeClass('d-none');
        }
    });

    $('#clearSearchBtn').on('click', function() {
        $('#roleSearchInput').val('').trigger('input');
    });

    // --- Delete confirmation with SweetAlert ---
    $(document).on('click', '.btn-delete-role', function() {
        const $form = $(this).closest('form');
        const roleName = $(this).data('role-name');
        const userCount = $(this).data('user-count');

        let warningText = `Role "${roleName}" akan dihapus secara permanen.`;
        if (userCount > 0) {
            warningText += ` Saat ini ada ${userCount} user yang menggunakan role ini.`;
        }

        Swal.fire({
            title: 'Hapus Role?',
            text: warningText,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#f8285a',
            cancelButtonColor: '#e4e6ef',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal',
            customClass: {
                cancelButton: 'text-gray-700'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $form.submit();
            }
        });
    });

    // --- Modal: Select all per group ---
    $(document).on('change', '.modal-select-all-group', function() {
        const group = $(this).data('modal-group');
        const isChecked = $(this).is(':checked');
        $(`.modal-perm-check[data-modal-group="${group}"]`).prop('checked', isChecked);
    });

    // --- Modal: Update group checkbox state ---
    $(document).on('change', '.modal-perm-check', function() {
        const group = $(this).data('modal-group');
        const total = $(`.modal-perm-check[data-modal-group="${group}"]`).length;
        const checked = $(`.modal-perm-check[data-modal-group="${group}"]:checked`).length;
        const $groupCb = $(`.modal-select-all-group[data-modal-group="${group}"]`);
        $groupCb.prop('checked', checked === total);
        $groupCb.prop('indeterminate', checked > 0 && checked < total);
    });

    // --- Modal: Global select / deselect ---
    $('#modalSelectAll').on('click', function() {
        $('.modal-perm-check').prop('checked', true);
        $('.modal-select-all-group').prop('checked', true).prop('indeterminate', false);
    });
    $('#modalDeselectAll').on('click', function() {
        $('.modal-perm-check').prop('checked', false);
        $('.modal-select-all-group').prop('checked', false).prop('indeterminate', false);
    });

    // --- Modal collapse toggle icon ---
    $('.modal-group-body').on('show.bs.collapse', function() {
        $(this).prev('.modal-group-header').removeClass('collapsed');
    }).on('hide.bs.collapse', function() {
        $(this).prev('.modal-group-header').addClass('collapsed');
    });
});
</script>
@endpush