@extends('layouts.main')

@section('title')
    Edit Role - {{ Str::headline($roles->name) }}
@endsection

@push('css')
<style>
    /* Permission group card styles */
    .perm-group-card {
        border: 1px solid #e4e6ef;
        border-radius: 0.75rem;
        overflow: hidden;
        margin-bottom: 1rem;
        transition: box-shadow 0.2s ease;
    }
    .perm-group-card:hover {
        box-shadow: 0 0.15rem 0.75rem rgba(0, 0, 0, 0.05);
    }
    .perm-group-card .group-header {
        background: linear-gradient(135deg, #f8f9fc 0%, #f1f3f8 100%);
        padding: 0.85rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        user-select: none;
        border-bottom: 1px solid #e4e6ef;
        transition: background 0.15s ease;
    }
    .perm-group-card .group-header:hover {
        background: linear-gradient(135deg, #f1f3f8 0%, #e8eaf0 100%);
    }
    .perm-group-card .group-header .group-title {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-weight: 600;
        font-size: 0.95rem;
        color: #181c32;
    }
    .perm-group-card .group-header .group-title .group-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: #3e97ff;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
    .perm-group-card .group-header .header-right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .perm-group-card .group-header .check-count {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.2rem 0.55rem;
        border-radius: 5px;
        background: #e8f0fe;
        color: #3e97ff;
        transition: all 0.2s ease;
    }
    .perm-group-card .group-header .check-count.has-checked {
        background: #e8fff3;
        color: #17c653;
    }
    .perm-group-card .group-header .toggle-icon {
        color: #a1a5b7;
        transition: transform 0.25s ease;
        font-size: 0.7rem;
    }
    .perm-group-card .group-header.collapsed .toggle-icon {
        transform: rotate(-90deg);
    }
    .perm-group-body {
        padding: 0;
    }
    .perm-group-body .select-all-row {
        padding: 0.6rem 1.25rem;
        background: #fafbfc;
        border-bottom: 1px solid #f1f3f8;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .perm-group-body .select-all-row label {
        font-size: 0.8rem;
        color: #7e8299;
        font-weight: 600;
        cursor: pointer;
    }
    .perm-checkbox-item {
        display: flex;
        align-items: center;
        padding: 0.65rem 1.25rem;
        border-bottom: 1px solid #f5f5f8;
        transition: background 0.1s ease;
    }
    .perm-checkbox-item:last-child {
        border-bottom: none;
    }
    .perm-checkbox-item:hover {
        background: #f8f9fc;
    }
    .perm-checkbox-item .form-check-label {
        font-size: 0.875rem;
        color: #3f4254;
        font-weight: 500;
        cursor: pointer;
    }
    .perm-checkbox-item .perm-action-badge {
        margin-left: auto;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.15rem 0.45rem;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .perm-action-badge.badge-create { background: #e8fff3; color: #17c653; }
    .perm-action-badge.badge-read { background: #e8f0fe; color: #3e97ff; }
    .perm-action-badge.badge-update { background: #fff8dd; color: #f6b100; }
    .perm-action-badge.badge-delete { background: #fff5f8; color: #f8285a; }
    .perm-action-badge.badge-other { background: #f1f1f4; color: #7e8299; }

    /* Search */
    #permSearchInput:focus {
        border-color: #3e97ff;
        box-shadow: 0 0 0 0.15rem rgba(62, 151, 255, 0.15);
    }

    /* Error alert improved */
    .alert-validation {
        border-radius: 0.75rem;
        border: 1px solid #f8285a33;
        background: #fff5f8;
    }

    /* Sticky footer */
    .form-actions-bar {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #e4e6ef;
        padding: 1rem 1.5rem;
        margin: 0 -1.5rem -1.5rem;
        border-radius: 0 0 0.75rem 0.75rem;
        z-index: 10;
    }
</style>
@endpush

@section('isi')
    <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-xxl 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">
                            Edit Role</h1>
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('roles.index') }}" class="text-muted text-hover-primary">Roles</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-muted">Edit</li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-dark">{{ Str::headline($roles->name) }}</li>
                        </ul>
                    </div>
                    <div>
                        <a href="{{ route('roles.index') }}" class="btn btn-sm btn-light-primary">
                            <i class="ki-outline ki-arrow-left fs-5 me-1"></i> Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Toolbar-->

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">

                @if (count($errors) > 0)
                    <div class="alert alert-validation d-flex align-items-center p-5 mb-6">
                        <i class="ki-outline ki-information-5 fs-2hx text-danger me-4"></i>
                        <div class="d-flex flex-column">
                            <h4 class="mb-1 text-danger fs-6">Terdapat kesalahan pada input:</h4>
                            <ul class="mb-0 ps-4">
                                @foreach ($errors->all() as $error)
                                    <li class="text-gray-700 fs-7">{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                <form action="{{ route('roles.update', $roles->id) }}" class="form" method="POST" id="editRoleForm">
                    @method('PATCH')
                    @csrf

                    <div class="row g-6">
                        <!--begin::Left column - Role info-->
                        <div class="col-lg-4">
                            <div class="card card-flush mb-6" style="position: sticky; top: 90px;">
                                <div class="card-header border-0 pt-6 pb-0">
                                    <div class="card-title">
                                        <h3 class="fw-bold m-0">Detail Role</h3>
                                    </div>
                                </div>
                                <div class="card-body pt-5">
                                    <div class="fv-row mb-5">
                                        <label class="fs-6 fw-semibold form-label mb-2">
                                            <span class="required">Nama Role</span>
                                        </label>
                                        <input class="form-control form-control-solid" placeholder="Masukkan nama role"
                                            name="name" required value="{{ $roles->name }}" id="roleName" />
                                    </div>

                                    <div class="separator my-5"></div>

                                    <div class="d-flex flex-column gap-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-gray-600 fs-7 fw-semibold">Total Permission Group</span>
                                            <span class="fw-bold text-dark" id="statTotalGroups">{{ $permissionsGroups->count() }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-gray-600 fs-7 fw-semibold">Permission Dipilih</span>
                                            <span class="fw-bold text-primary" id="statChecked">0</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-gray-600 fs-7 fw-semibold">Total Permission</span>
                                            <span class="fw-bold text-dark" id="statTotal">0</span>
                                        </div>
                                    </div>

                                    <div class="separator my-5"></div>

                                    <div class="d-flex gap-3">
                                        <button type="button" class="btn btn-sm btn-light-success flex-grow-1" id="btnSelectAll">
                                            <i class="ki-outline ki-check-square fs-5 me-1"></i> Pilih Semua
                                        </button>
                                        <button type="button" class="btn btn-sm btn-light-danger flex-grow-1" id="btnDeselectAll">
                                            <i class="ki-outline ki-cross-square fs-5 me-1"></i> Hapus Semua
                                        </button>
                                    </div>
                                </div>

                                <div class="card-footer pt-4 pb-5">
                                    <button type="submit" class="btn btn-primary w-100" id="btnSubmit">
                                        <span class="indicator-label">
                                            <i class="ki-outline ki-check fs-4 me-1"></i> Simpan Perubahan
                                        </span>
                                        <span class="indicator-progress">Menyimpan...
                                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!--end::Left column-->

                        <!--begin::Right column - Permissions-->
                        <div class="col-lg-8">
                            <div class="card card-flush">
                                <div class="card-header border-0 pt-6">
                                    <div class="card-title">
                                        <h3 class="fw-bold m-0">Permission</h3>
                                    </div>
                                    <div class="card-toolbar">
                                        <div class="d-flex align-items-center position-relative">
                                            <i class="ki-outline ki-magnifier fs-4 position-absolute ms-4"></i>
                                            <input type="text" id="permSearchInput"
                                                class="form-control form-control-solid form-control-sm w-200px ps-11"
                                                placeholder="Cari permission..." />
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body pt-2" id="permGroupContainer">
                                    @foreach ($permissionsGroups as $idx => $item)
                                        <div class="perm-group-card" data-group-name="{{ strtolower($item->name) }}">
                                            <div class="group-header" data-bs-toggle="collapse" data-bs-target="#editPermGroup{{ $idx }}">
                                                <div class="group-title">
                                                    <span class="group-icon">{{ $idx + 1 }}</span>
                                                    {{ $item->name }}
                                                </div>
                                                <div class="header-right">
                                                    <span class="check-count" data-group-idx="{{ $idx }}">
                                                        <span class="checked-count">0</span> / {{ $item->permissions->count() }}
                                                    </span>
                                                    <i class="ki-outline ki-down toggle-icon"></i>
                                                </div>
                                            </div>
                                            <div class="perm-group-body collapse show" id="editPermGroup{{ $idx }}">
                                                @if($item->permissions->count() > 1)
                                                    <div class="select-all-row">
                                                        <label class="form-check form-check-sm form-check-custom form-check-solid">
                                                            <input class="form-check-input select-all-group" type="checkbox" data-group="{{ $idx }}">
                                                            <span class="form-check-label text-gray-500 fw-semibold" style="font-size:0.8rem;">Pilih semua</span>
                                                        </label>
                                                    </div>
                                                @endif
                                                @foreach ($item->permissions as $permission)
                                                    @php
                                                        $action = Str::headline(substr($permission->name, 0, strpos($permission->name, ' ') ?: strlen($permission->name)));
                                                        $actionLower = strtolower($action);
                                                        $badgeClass = match(true) {
                                                            str_contains($actionLower, 'create') => 'badge-create',
                                                            str_contains($actionLower, 'read') => 'badge-read',
                                                            str_contains($actionLower, 'update') => 'badge-update',
                                                            str_contains($actionLower, 'delete') => 'badge-delete',
                                                            default => 'badge-other'
                                                        };
                                                    @endphp
                                                    <div class="perm-checkbox-item" data-perm-name="{{ strtolower($permission->name) }}">
                                                        <label class="form-check form-check-sm form-check-custom form-check-solid">
                                                            <input class="form-check-input perm-check" type="checkbox"
                                                                value="{{ $permission->name }}" name="permission[]"
                                                                data-group="{{ $idx }}"
                                                                {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }} />
                                                            <span class="form-check-label">{{ $permission->name }}</span>
                                                        </label>
                                                        <span class="perm-action-badge {{ $badgeClass }}">{{ $action }}</span>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <!--end::Right column-->
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@section('modals')
@endsection

@push('js-vendor')
@endpush

@push('js-page')
<script>
$(document).ready(function() {
    // --- Update stats & badge counts ---
    function updateStats() {
        const total = $('.perm-check').length;
        const checked = $('.perm-check:checked').length;

        $('#statTotal').text(total);
        $('#statChecked').text(checked);

        // Update per-group counts
        @foreach ($permissionsGroups as $idx => $item)
        (function(idx) {
            const groupChecked = $(`.perm-check[data-group="${idx}"]:checked`).length;
            const groupTotal = $(`.perm-check[data-group="${idx}"]`).length;
            const $badge = $(`.check-count[data-group-idx="${idx}"]`);
            $badge.find('.checked-count').text(groupChecked);
            $badge.toggleClass('has-checked', groupChecked > 0);

            // Update select-all checkbox for the group
            const $selectAll = $(`.select-all-group[data-group="${idx}"]`);
            $selectAll.prop('checked', groupChecked === groupTotal && groupTotal > 0);
            $selectAll.prop('indeterminate', groupChecked > 0 && groupChecked < groupTotal);
        })({{ $idx }});
        @endforeach
    }

    // Initial stats
    updateStats();

    // Checkbox change
    $(document).on('change', '.perm-check', updateStats);

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

    // Select all / Deselect all global
    $('#btnSelectAll').on('click', function() {
        // Only select visible (not filtered out)
        $('.perm-checkbox-item:not(.d-none) .perm-check').prop('checked', true);
        updateStats();
    });
    $('#btnDeselectAll').on('click', function() {
        $('.perm-check').prop('checked', false);
        updateStats();
    });

    // Search filter
    $('#permSearchInput').on('input', function() {
        const query = $(this).val().toLowerCase().trim();
        const $cards = $('.perm-group-card');

        if (!query) {
            $cards.removeClass('d-none');
            $cards.find('.perm-checkbox-item').removeClass('d-none');
            return;
        }

        $cards.each(function() {
            const $card = $(this);
            const groupName = $card.data('group-name');
            const $items = $card.find('.perm-checkbox-item');
            let hasMatch = false;

            if (groupName.includes(query)) {
                $items.removeClass('d-none');
                hasMatch = true;
            } else {
                $items.each(function() {
                    const permName = $(this).data('perm-name');
                    if (permName.includes(query)) {
                        $(this).removeClass('d-none');
                        hasMatch = true;
                    } else {
                        $(this).addClass('d-none');
                    }
                });
            }

            $card.toggleClass('d-none', !hasMatch);
        });
    });

    // Collapse toggle icon
    $('.perm-group-body').on('show.bs.collapse', function() {
        $(this).prev('.group-header').removeClass('collapsed');
    }).on('hide.bs.collapse', function() {
        $(this).prev('.group-header').addClass('collapsed');
    });

    // Submit loading state
    $('#editRoleForm').on('submit', function() {
        const $btn = $('#btnSubmit');
        $btn.attr('data-kt-indicator', 'on').prop('disabled', true);
    });
});
</script>
@endpush