@php
$isEdit = isset($role) && $role->exists && $role->id;
$formAction = $isEdit
? route('admin.roles.update', $role->id)
: route('admin.roles.store');
$formMethod = $isEdit ? 'PUT' : 'POST';
$formTitle = $isEdit ? 'Edit Role' : 'Create Role';
$submitText = $isEdit ? 'Update Role' : 'Save Role';

// Get selected permissions
$selectedPermissions = [];
if ($isEdit && $role->permissions) {
$selectedPermissions = is_array($role->permissions)
? $role->permissions
: (json_decode($role->permissions, true) ?? []);
}
@endphp

<style>
    /* ============================================
       ROLE FORM - REDSPIDER THEME
    ============================================ */

    .form-section .form-group-custom:last-child {
        margin-bottom: 0;
    }

    .form-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #E8E8E8;
    }

    .form-card-header h4 {
        font-size: 18px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .form-card-header h4 i {
        color: #C1121F;
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border-radius: 10px;
        background: #F8F9FA;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        transition: all 0.3s ease;
    }

    .btn-back:hover {
        background: rgba(193, 18, 31, 0.06);
        border-color: rgba(193, 18, 31, 0.2);
        color: #C1121F;
        transform: translateX(-2px);
    }

    .form-section {
        background: #FAFBFC;
        border-radius: 14px;
        padding: 20px 24px;
        border: 1px solid #F0F0F0;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .form-section:hover {
        border-color: rgba(193, 18, 31, 0.08);
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .section-header i {
        font-size: 18px;
        color: #C1121F;
    }

    .section-header h5 {
        font-size: 15px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .form-group-custom {
        margin-bottom: 18px;
    }

    .form-group-custom label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #1A1A2E;
        margin-bottom: 6px;
    }

    .form-group-custom label .required {
        color: #DC2626;
        margin-left: 2px;
    }

    .form-control-custom {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid #E8E8E8;
        border-radius: 10px;
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        color: #1A1A2E;
        background: #FFFFFF;
        transition: all 0.3s ease;
        outline: none;
    }

    .form-control-custom:focus {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .form-control-custom.is-invalid {
        border-color: #DC2626;
    }

    .form-control-custom.is-invalid:focus {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.06);
    }

    .form-control-custom::placeholder {
        color: #9CA3AF;
        font-size: 13px;
    }

    textarea.form-control-custom {
        resize: vertical;
        min-height: 80px;
    }

    select.form-control-custom {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }

    .form-hint {
        display: block;
        font-size: 12px;
        color: #6B7280;
        margin-top: 4px;
    }

    .error-text {
        display: block;
        color: #DC2626;
        font-size: 12px;
        margin-top: 4px;
    }

    .input-with-prefix {
        display: flex;
        align-items: center;
        border: 1.5px solid #E8E8E8;
        border-radius: 10px;
        background: #FFFFFF;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .input-with-prefix:focus-within {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .input-with-prefix .prefix {
        padding: 10px 12px;
        background: #F8F9FA;
        color: #6B7280;
        font-size: 13px;
        font-weight: 500;
        border-right: 1px solid #E8E8E8;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .input-with-prefix .form-control-custom {
        border: none !important;
        border-radius: 0 !important;
        padding: 10px 14px;
    }

    .input-with-prefix .form-control-custom:focus {
        box-shadow: none !important;
    }

    .slug-preview {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
        background: #F8F9FA;
        border-radius: 6px;
        border: 1px solid #E8E8E8;
        font-size: 13px;
        font-family: 'Poppins', sans-serif;
        color: #6B7280;
        margin-top: 6px;
    }

    .slug-preview code {
        color: #C1121F;
        font-weight: 600;
        background: transparent;
        padding: 0;
    }

    .btn-regenerate {
        background: none;
        border: none;
        color: #6B7280;
        cursor: pointer;
        padding: 2px 8px;
        font-size: 12px;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-regenerate:hover {
        color: #C1121F;
    }

    .toggle-switch-custom {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 8px 0;
    }

    .toggle-switch-custom .switch {
        position: relative;
        width: 48px;
        height: 26px;
        flex-shrink: 0;
    }

    .toggle-switch-custom .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-switch-custom .switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #E8E8E8;
        transition: all 0.4s ease;
        border-radius: 26px;
    }

    .toggle-switch-custom .switch .slider::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        background: #FFFFFF;
        transition: all 0.4s ease;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .toggle-switch-custom .switch input:checked+.slider {
        background: linear-gradient(135deg, #C1121F, #780000);
    }

    .toggle-switch-custom .switch input:checked+.slider::before {
        transform: translateX(22px);
    }

    .toggle-switch-custom .switch input:focus+.slider {
        box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.15);
    }

    /* Permission Cards */
    .permission-card {
        background: #FFFFFF;
        border-radius: 10px;
        border: 1px solid #E8E8E8;
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
    }

    .permission-card:hover {
        border-color: rgba(193, 18, 31, 0.15);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
    }

    .permission-card .permission-header {
        padding: 10px 14px;
        background: #F8F9FA;
        border-bottom: 1px solid #E8E8E8;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .permission-card .permission-header .module-checkbox {
        width: 16px;
        height: 16px;
        accent-color: #C1121F;
        cursor: pointer;
    }

    .permission-card .permission-header .module-title {
        font-size: 13px;
        font-weight: 600;
        color: #1A1A2E;
    }

    .permission-card .permission-body {
        padding: 10px 14px;
    }

    .permission-card .permission-body .permission-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
    }

    .permission-card .permission-body .permission-item .permission-checkbox {
        width: 15px;
        height: 15px;
        accent-color: #C1121F;
        cursor: pointer;
    }

    .permission-card .permission-body .permission-item .permission-label {
        font-size: 13px;
        color: #4A5568;
        cursor: pointer;
    }

    .btn-action-permission {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
    }

    .btn-action-permission.select-all {
        background: rgba(34, 197, 94, 0.08);
        color: #22C55E;
    }

    .btn-action-permission.select-all:hover {
        background: rgba(34, 197, 94, 0.15);
    }

    .btn-action-permission.deselect-all {
        background: rgba(220, 38, 38, 0.08);
        color: #DC2626;
    }

    .btn-action-permission.deselect-all:hover {
        background: rgba(220, 38, 38, 0.15);
    }

    .form-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding-top: 20px;
        border-top: 1px solid #E8E8E8;
        flex-wrap: wrap;
    }

    .btn-submit {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 28px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: linear-gradient(135deg, #C1121F, #780000);
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(193, 18, 31, 0.25);
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(193, 18, 31, 0.35);
    }

    .btn-submit:active {
        transform: scale(0.96);
    }

    .btn-cancel {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
    }

    .btn-cancel:hover {
        background: #F8F9FA;
        border-color: #D1D5DB;
    }

    .btn-reset-custom {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid #E8E8E8;
        color: #4A5568;
    }

    .btn-reset-custom:hover {
        background: #F8F9FA;
        border-color: #D1D5DB;
    }

    .permissions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
        margin-top: 12px;
    }

    @media (max-width: 768px) {
        .permissions-grid {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
    }

    @media (max-width: 576px) {
        .form-section {
            padding: 14px 16px !important;
        }

        .form-card-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .form-actions {
            flex-direction: column;
        }

        .form-actions .btn-submit,
        .form-actions .btn-cancel,
        .form-actions .btn-reset-custom {
            width: 100%;
            justify-content: center;
        }

        .permissions-grid {
            grid-template-columns: 1fr;
        }

        .permission-card .permission-header {
            padding: 8px 12px;
        }

        .permission-card .permission-body {
            padding: 8px 12px;
        }
    }
</style>

<!-- ============================================
   ALERT MESSAGES
============================================ -->

@if ($errors->any())
<div class="alert-box alert-error" style="margin-bottom: 20px;">
    <i class="bi bi-exclamation-circle-fill"></i>
    <span>
        <strong>Validation Errors!</strong>
        <ul style="margin: 4px 0 0 20px; padding: 0;">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </span>
    <button type="button" class="alert-close-btn" onclick="this.closest('.alert-box').remove()">
        <i class="bi bi-x"></i>
    </button>
</div>
@endif

<!-- ============================================
   FORM CARD
============================================ -->



    <div class="form-card-header">
        <h4>
            <i class="bi bi-person-badge"></i>
            {{ $formTitle }}
        </h4>
        <a href="{{ route('admin.roles.index') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to List
        </a>
    </div>

    <!-- ===== FORM START ===== -->
    <form action="{{ $formAction }}" method="POST" id="roleForm">
        @csrf
        @if($isEdit)
        @method('PUT')
        @endif

        <!-- ===== BASIC INFORMATION ===== -->
        <div class="form-section">
            <div class="section-header">
                <i class="bi bi-info-circle"></i>
                <h5>Basic Information</h5>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group-custom">
                        <label>Role Name <span class="required">*</span></label>
                        <input type="text"
                            name="name"
                            id="name"
                            class="form-control-custom @error('name') is-invalid @enderror"
                            value="{{ old('name', $role->name ?? '') }}"
                            placeholder="Enter role name"
                            required>
                        @error('name')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group-custom">
                        <label>Slug <span class="required">*</span></label>
                        <div class="input-with-prefix">
                            <span class="prefix">{{ url('/') }}/role/</span>
                            <input type="text"
                                name="slug"
                                id="slug"
                                class="form-control-custom @error('slug') is-invalid @enderror"
                                value="{{ old('slug', $role->slug ?? '') }}"
                                placeholder="role-slug"
                                required
                                data-auto-generated="{{ isset($role) && $role->slug ? 'false' : 'true' }}">
                        </div>
                        @error('slug')
                        <span class="error-text">{{ $message }}</span>
                        @enderror

                        <div class="slug-preview">
                            <i class="bi bi-link"></i>
                            Preview: <code id="slugPreview">
                                @if(isset($role) && $role->slug)
                                {{ $role->slug }}
                                @else
                                auto-generated
                                @endif
                            </code>
                            <button type="button" class="btn-regenerate" onclick="generateSlug()">
                                <i class="bi bi-arrow-repeat"></i> Regenerate
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group-custom">
                <label>Description</label>
                <textarea name="description"
                    rows="3"
                    class="form-control-custom @error('description') is-invalid @enderror"
                    placeholder="Enter role description...">{{ old('description', $role->description ?? '') }}</textarea>
                @error('description')
                <span class="error-text">{{ $message }}</span>
                @enderror
            </div>

            <!-- Default Role -->
            <div class="form-group-custom" style="margin-bottom: 0;">
                <div style="display: flex; align-items: center; gap: 12px; padding-top: 6px;">
                    <input type="hidden" name="is_default" value="0">
                    <input type="checkbox"
                        name="is_default"
                        id="is_default"
                        value="1"
                        {{ old('is_default', $role->is_default ?? 0) ? 'checked' : '' }}
                        style="width: 18px; height: 18px; accent-color: #C1121F; cursor: pointer;">
                    <label for="is_default" style="font-size: 13px; font-weight: 500; color: #1A1A2E; cursor: pointer;">
                        <i class="bi bi-star" style="color: #F59E0B;"></i> Default Role
                    </label>
                </div>
                <span class="form-hint">Default roles cannot be deleted</span>
            </div>
        </div>

        <!-- ===== PERMISSIONS ===== -->
        <div class="form-section" style="margin-bottom: 0;">
            <div class="section-header">
                <i class="bi bi-shield-check"></i>
                <h5>Permissions</h5>
            </div>

            <!-- Select All / Deselect All -->
            <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;">
                <button type="button" class="btn-action-permission select-all" onclick="selectAllPermissions()">
                    <i class="bi bi-check-all"></i> Select All
                </button>
                <button type="button" class="btn-action-permission deselect-all" onclick="deselectAllPermissions()">
                    <i class="bi bi-x"></i> Deselect All
                </button>
            </div>

            <!-- Permissions Grid -->
            <div class="permissions-grid">
                @foreach($permissions as $module => $actions)
                <div class="permission-card">
                    <div class="permission-header">
                        <input type="checkbox" class="module-select-all" data-module="{{ $module }}"
                            onchange="toggleModulePermissions('{{ $module }}', this.checked)">
                        <span class="module-title">{{ ucfirst(str_replace('_', ' ', $module)) }}</span>
                    </div>
                    <div class="permission-body">
                        @foreach($actions as $action)
                        <div class="permission-item">
                            <input type="checkbox"
                                class="permission-checkbox permission-{{ $module }}"
                                name="permissions[{{ $module }}][]"
                                value="{{ $action }}"
                                id="permission-{{ $module }}-{{ $action }}"
                                {{ isset($selectedPermissions[$module]) && in_array($action, $selectedPermissions[$module]) ? 'checked' : '' }}
                                onchange="updateModuleSelectAll('{{ $module }}')">
                            <label class="permission-label" for="permission-{{ $module }}-{{ $action }}">
                                {{ ucfirst($action) }}
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>










        
        <!-- ===== FORM ACTIONS ===== -->
        <div class="form-actions">
            <button type="submit" class="btn-submit">
                <i class="bi bi-save"></i>
                {{ $submitText }}
            </button>
            <a href="{{ route('admin.roles.index') }}" class="btn-cancel">
                <i class="bi bi-x-circle"></i> Cancel
            </a>
            <button type="reset" class="btn-reset-custom">
                <i class="bi bi-arrow-counterclockwise"></i> Reset
            </button>
        </div>

    </form>


<!-- ============================================
   SCRIPT
============================================ -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // SLUG GENERATION
        // ============================================
        const nameInput = document.getElementById('name');
        const slugInput = document.getElementById('slug');
        const slugPreview = document.getElementById('slugPreview');

        if (nameInput && slugInput) {
            nameInput.addEventListener('input', function() {
                if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
                    const slug = generateSlugFromText(this.value);
                    slugInput.value = slug;
                    slugInput.dataset.autoGenerated = 'true';
                    updateSlugPreview(slug);
                }
            });

            if (!slugInput.value) {
                slugInput.dataset.autoGenerated = 'true';
            }
        }

        window.updateSlugPreview = function(slug) {
            if (slugPreview) {
                slugPreview.textContent = slug || 'auto-generated';
            }
        };

        window.generateSlug = function() {
            if (nameInput && nameInput.value) {
                const slug = generateSlugFromText(nameInput.value);
                slugInput.value = slug;
                slugInput.dataset.autoGenerated = 'true';
                updateSlugPreview(slug);
            } else {
                alert('Please enter a name first to generate slug.');
                nameInput.focus();
            }
        };

        function generateSlugFromText(text) {
            return text
                .toLowerCase()
                .replace(/[^a-z0-9]+/g, '-')
                .replace(/^-+|-+$/g, '');
        }

        // ============================================
        // PERMISSION FUNCTIONS
        // ============================================
        window.toggleModulePermissions = function(module, checked) {
            const checkboxes = document.querySelectorAll('.permission-' + module);
            checkboxes.forEach(function(cb) {
                cb.checked = checked;
            });
        };

        window.updateModuleSelectAll = function(module) {
            const checkboxes = document.querySelectorAll('.permission-' + module);
            let checkedCount = 0;
            checkboxes.forEach(function(cb) {
                if (cb.checked) checkedCount++;
            });

            const selectAll = document.querySelector('.module-select-all[data-module="' + module + '"]');
            if (selectAll) {
                selectAll.checked = (checkedCount === checkboxes.length && checkboxes.length > 0);
            }
        };

        window.selectAllPermissions = function() {
            const checkboxes = document.querySelectorAll('.permission-checkbox');
            checkboxes.forEach(function(cb) {
                cb.checked = true;
            });

            const selectAlls = document.querySelectorAll('.module-select-all');
            selectAlls.forEach(function(cb) {
                cb.checked = true;
            });
        };

        window.deselectAllPermissions = function() {
            const checkboxes = document.querySelectorAll('.permission-checkbox');
            checkboxes.forEach(function(cb) {
                cb.checked = false;
            });

            const selectAlls = document.querySelectorAll('.module-select-all');
            selectAlls.forEach(function(cb) {
                cb.checked = false;
            });
        };

        // ============================================
        // INITIALIZE MODULE SELECT ALL STATES
        // ============================================
        const modules = [];
        document.querySelectorAll('.module-select-all').forEach(function(cb) {
            const module = cb.dataset.module;
            if (!modules.includes(module)) {
                modules.push(module);
                updateModuleSelectAll(module);
            }
        });

        // ============================================
        // FORM VALIDATION
        // ============================================
        const form = document.getElementById('roleForm');
        if (form) {
            form.addEventListener('submit', function(e) {
                const name = document.getElementById('name');
                if (name && !name.value.trim()) {
                    e.preventDefault();
                    name.classList.add('is-invalid');
                    alert('Please enter a role name.');
                    name.focus();
                }
            });

            document.querySelectorAll('.form-control-custom').forEach(function(input) {
                input.addEventListener('input', function() {
                    this.classList.remove('is-invalid');
                });
            });
        }

        console.log('✅ Role Form loaded successfully!');
    });
</script>