@extends('layouts.master')

@section('title', 'Role & Permission - Industrial Pump Logic')

@section('content')
<style>
    .management-wrapper {
        padding: 40px;
        background: var(--bg-main);
        min-height: calc(100vh - 64px);
    }
    
    .tabs-nav {
        display: flex;
        gap: 32px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 32px;
    }
    .tab-link {
        padding: 12px 0;
        font-weight: 700;
        font-size: 14px;
        color: var(--text-muted);
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
        cursor: pointer;
    }
    .tab-link.active {
        color: var(--primary);
        border-color: var(--primary);
    }

    .role-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 24px;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .role-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
    }

    .permission-badge {
        display: inline-flex;
        align-items:center;
        gap: 6px;
        background: var(--bg-main);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 6px;
        border: 1px solid var(--border);
        text-transform: uppercase;
    }

    .modal-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(4px);
        display: none;
        align-items: center; justify-content: center;
        z-index: 1000;
    }
    .modal-card {
        background: white; width: 450px; border-radius: 20px; overflow: hidden;
    }
</style>

<div class="management-wrapper">
    <div class="master-container">
        <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px;">
            <div>
                <h1 style="font-size:28px; font-weight:800; color:var(--text-main); letter-spacing:-1px; margin-bottom:8px;">Access Control</h1>
                <p style="color:var(--text-muted); font-size:14px;">Manage system roles and granular permissions.</p>
            </div>
            <div id="actionButtons">
                @if(auth()->user()->hasPermission('manage-roles'))
                <button class="btn btn-primary" onclick="showModal('roleModal')" style="height:44px; border-radius:12px; font-weight:700;">
                    <i data-lucide="plus" size="16"></i> Add Role
                </button>
                @elseif(auth()->user()->hasPermission('manage-permission'))
                <button class="btn btn-primary" onclick="showModal('permModal')" style="height:44px; border-radius:12px; font-weight:700;">
                    <i data-lucide="plus" size="16"></i> Add Permission
                </button>
                @endif
            </div>
        </div>

        @if(session('success'))
            <div style="background:#dcfce7; color:#16a34a; padding:14px; border-radius:12px; margin-bottom:24px; font-weight:600; font-size:13px; border:1px solid #16a34a20;">
                {{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div style="background:#fee2e2; color:#ef4444; padding:14px; border-radius:12px; margin-bottom:24px; font-weight:600; font-size:13px; border:1px solid #ef444420;">
                {{ $errors->first() }}
            </div>
        @endif

        <div class="tabs-nav">
            @if(auth()->user()->hasPermission('manage-roles'))
                <div class="tab-link active" onclick="switchTab('roles')" data-target="roles">Roles & Permissions</div>
            @endif
            @if(auth()->user()->hasPermission('manage-permission'))
                <div class="tab-link {{ !auth()->user()->hasPermission('manage-roles') ? 'active' : '' }}" onclick="switchTab('permissions')" data-target="permissions">Global Permissions Registry</div>
            @endif
        </div>

        @if(auth()->user()->hasPermission('manage-roles'))
        <!-- Roles Tab -->
        <div id="rolesTab" class="tab-content" style="{{ auth()->user()->hasPermission('manage-roles') ? 'block' : 'display:none;' }}">
            <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap:24px;">
                @foreach($roles as $role)
                <div class="role-card">
                    <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px;">
                        <div>
                            <h3 style="font-size:18px; font-weight:800; color:var(--text-main); margin-bottom:4px;">{{ $role->name }}</h3>
                            <code style="font-size:11px; background:var(--bg-main); padding:2px 6px; border-radius:4px; color:var(--primary)">{{ $role->slug }}</code>
                        </div>
                        @if($role->slug !== 'admin')
                        <form action="{{ route('admin.roles.delete', $role->id) }}" method="POST" onsubmit="return confirm('Delete this role?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn" style="padding:6px; color:#ef4444; border:none; background:transparent;"><i data-lucide="trash-2" size="16"></i></button>
                        </form>
                        @endif
                    </div>
                    
                    <p style="font-size:13px; color:var(--text-muted); margin-bottom:24px;">{{ $role->description ?? 'No description provided for this role.' }}</p>

                    <form action="{{ route('admin.roles.permissions', $role->id) }}" method="POST">
                        @csrf
                        <div style="margin-bottom:24px;">
                            <label style="font-size:11px; font-weight:800; color:var(--text-muted); text-transform:uppercase; margin-bottom:12px; display:block;">Functional Permissions</label>
                            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
                                @foreach($permissions as $permission)
                                <label style="display:flex; align-items:center; gap:10px; cursor:pointer;">
                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" 
                                        {{ $role->permissions->contains($permission->id) ? 'checked' : '' }}
                                        style="width:16px; height:16px; accent-color:var(--primary);">
                                    <span style="font-size:13px; font-weight:600; color:var(--text-main)">{{ $permission->name }}</span>
                                </label>
                                @endforeach
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center; height:40px; border-radius:10px; font-weight:700;">
                            Sync Permissions
                        </button>
                    </form>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        @if(auth()->user()->hasPermission('manage-permission'))
        <!-- Permissions Tab -->
        <div id="permissionsTab" class="tab-content" style="{{ !auth()->user()->hasPermission('manage-roles') ? 'block' : 'display:none;' }}">
            <div style="background:white; border:1px solid var(--border); border-radius:16px; overflow:hidden;">
                <table style="width:100%; border-collapse:collapse; text-align:left;">
                    <thead>
                        <tr style="background:var(--bg-main); border-bottom:1px solid var(--border)">
                            <th style="padding:16px 24px; font-size:11px; font-weight:800; color:var(--text-muted); text-transform:uppercase;">Permission Name</th>
                            <th style="padding:16px 24px; font-size:11px; font-weight:800; color:var(--text-muted); text-transform:uppercase;">Slug</th>
                            <th style="padding:16px 24px; font-size:11px; font-weight:800; color:var(--text-muted); text-transform:uppercase;">Description</th>
                            <th style="padding:16px 24px; font-size:11px; font-weight:800; color:var(--text-muted); text-transform:uppercase; text-align:right;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($permissions as $permission)
                        <tr style="border-bottom:1px solid var(--border)">
                            <td style="padding:16px 24px; font-size:14px; font-weight:700; color:var(--text-main)">{{ $permission->name }}</td>
                            <td style="padding:16px 24px;"><code style="font-size:12px;">{{ $permission->slug }}</code></td>
                            <td style="padding:16px 24px; font-size:13px; color:var(--text-muted)">{{ $permission->description ?? '-' }}</td>
                            <td style="padding:16px 24px; text-align:right;">
                                <form action="{{ route('admin.permissions.delete', $permission->id) }}" method="POST" onsubmit="return confirm('Delete this permission registry?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn" style="padding:6px; color:#ef4444; border:none; background:transparent;"><i data-lucide="trash-2" size="16"></i></button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Add Role Modal -->
<div id="roleModal" class="modal-overlay">
    <div class="modal-card">
        <div style="padding:20px 24px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h2 style="font-size:18px; font-weight:800;">Define New Role</h2>
            <button class="btn" onclick="hideModal('roleModal')" style="border:none; background:transparent;"><i data-lucide="x" size="20"></i></button>
        </div>
        <div style="padding:24px;">
            <form action="{{ route('admin.roles.store') }}" method="POST">
                @csrf
                <div style="display:grid; gap:20px;">
                    <div class="field">
                        <label style="font-weight:700; font-size:13px; margin-bottom:8px; display:block;">Role Name</label>
                        <input type="text" name="name" class="input" placeholder="e.g. Sales Manager" required>
                    </div>
                    <div class="field">
                        <label style="font-weight:700; font-size:13px; margin-bottom:8px; display:block;">Role Slug</label>
                        <input type="text" name="slug" class="input" placeholder="e.g. sales-manager" required>
                    </div>
                    <div class="field">
                        <label style="font-weight:700; font-size:13px; margin-bottom:8px; display:block;">Description</label>
                        <textarea name="description" class="input" style="height:80px; padding:12px;"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" style="height:44px; width:100%; justify-content:center; font-weight:700;">Create Role</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Permission Modal -->
<div id="permModal" class="modal-overlay">
    <div class="modal-card">
        <div style="padding:20px 24px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h2 style="font-size:18px; font-weight:800;">Register New Permission</h2>
            <button class="btn" onclick="hideModal('permModal')" style="border:none; background:transparent;"><i data-lucide="x" size="20"></i></button>
        </div>
        <div style="padding:24px;">
            <form action="{{ route('admin.permissions.store') }}" method="POST">
                @csrf
                <div style="display:grid; gap:20px;">
                    <div class="field">
                        <label style="font-weight:700; font-size:13px; margin-bottom:8px; display:block;">Permission Name</label>
                        <input type="text" name="name" class="input" placeholder="e.g. Delete Reports" required>
                    </div>
                    <div class="field">
                        <label style="font-weight:700; font-size:13px; margin-bottom:8px; display:block;">Permission Slug</label>
                        <input type="text" name="slug" class="input" placeholder="e.g. delete-reports" required>
                    </div>
                    <div class="field">
                        <label style="font-weight:700; font-size:13px; margin-bottom:8px; display:block;">Description</label>
                        <textarea name="description" class="input" style="height:80px; padding:12px;"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" style="height:44px; width:100%; justify-content:center; font-weight:700;">Register Permission</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function switchTab(tab) {
        document.querySelectorAll('.tab-link').forEach(el => el.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
        
        let linkElement = document.querySelector('.tab-link[data-target="' + tab + '"]');
        if(linkElement) linkElement.classList.add('active');

        if (tab === 'roles') {
            let rs = document.getElementById('rolesTab');
            if(rs) rs.style.display = 'block';
            document.getElementById('actionButtons').innerHTML = `
                <button class="btn btn-primary" onclick="showModal('roleModal')" style="height:44px; border-radius:12px; font-weight:700;">
                    <i data-lucide="plus" size="16"></i> Add Role
                </button>
            `;
        } else {
            let ps = document.getElementById('permissionsTab');
            if(ps) ps.style.display = 'block';
            document.getElementById('actionButtons').innerHTML = `
                <button class="btn btn-primary" onclick="showModal('permModal')" style="height:44px; border-radius:12px; font-weight:700;">
                    <i data-lucide="plus" size="16"></i> Add Permission
                </button>
            `;
        }
        lucide.createIcons();
    }

    function showModal(id) {
        document.getElementById(id).style.display = 'flex';
    }
    function hideModal(id) {
        document.getElementById(id).style.display = 'none';
    }

    // Close on outside click
    window.onclick = function(event) {
        if (event.target.classList.contains('modal-overlay')) {
            event.target.style.display = 'none';
        }
    }
</script>
@endsection
