@extends('layouts.app')

@section('title', ($role ?? null) ? 'Edit User Role - NGBVD' : 'Add User Role - NGBVD')

@section('content')
@php
    $editing = isset($role) && $role;
    $roleRef = '';
    if ($editing) {
        $roleRef = !empty($role->uuid) ? $role->uuid : $role->id;
    }
@endphp

<div class="ngbvd-page-header mb-3">
    <div>
        <h2>{{ $editing ? 'Edit User Role' : 'Add User Role' }}</h2>
        <p>{{ $editing ? 'Update role details before reviewing module and action permissions.' : 'Create a role that can be assigned responsibilities, permissions and data scope.' }}</p>
    </div>
    <div class="ml-auto ngbvd-hero-actions">
        <a href="{{ url('/roles/list') }}" class="btn ngbvd-btn-soft"><i class="ti-arrow-left"></i> Back to Roles</a>
        @if($editing)
            <a href="{{ url('/roles/permissions/'.$roleRef) }}" class="btn ngbvd-btn-primary"><i class="ti-settings"></i> Configure Permissions</a>
        @endif
    </div>
</div>

<div class="ngbvd-role-form-layout">
    <section class="ngbvd-role-form-card">
        <div class="ngbvd-role-card-header">
            <div>
                <h3>{{ $editing ? 'Role Details' : 'New Role Details' }}</h3>
                <p>Use clear role names that reflect actual operational responsibilities.</p>
            </div>
            <span class="ngbvd-role-mode-badge">{{ $editing ? 'Edit Mode' : 'Create Mode' }}</span>
        </div>

        @if(session('message'))
            <div class="alert alert-success">{{ session('message') }}</div>
        @endif
        @if(session('error_message'))
            <div class="alert alert-danger">{{ session('error_message') }}</div>
        @endif
        @if(isset($errors) && $errors->any())
            <div class="alert alert-danger">
                <strong>Please correct the following:</strong>
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form id="indexform" method="POST" action="{{ url('/roles/save') }}" class="ngbvd-role-form">
            @csrf
            <input type="hidden" name="action" value="{{ $editing ? 'edit' : 'create' }}">
            <input type="hidden" name="id" value="{{ $roleRef }}">
            <input type="hidden" name="uuid" value="{{ $editing && !empty($role->uuid) ? $role->uuid : '' }}">

            <div class="form-group">
                <label>User Role <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="role" id="role" value="{{ old('role', $editing ? ($role->name ?? '') : '') }}" placeholder="Example: District Data Officer" required>
                <small class="text-muted">This is the role name shown when assigning users and permissions.</small>
            </div>

            <div class="form-group">
                <label>Role Description</label>
                <textarea class="form-control" name="details" rows="5" placeholder="Describe the role responsibilities and expected access level.">{{ old('details', $editing ? ($role->details ?? '') : '') }}</textarea>
            </div>

            @if(isset($role) && property_exists($role, 'is_viewonly'))
                <div class="form-group">
                    <label>Read-only Role</label>
                    <select class="form-control" name="is_viewonly">
                        <option value="0" {{ old('is_viewonly', $editing ? ($role->is_viewonly ?? 0) : 0) == 0 ? 'selected' : '' }}>No</option>
                        <option value="1" {{ old('is_viewonly', $editing ? ($role->is_viewonly ?? 0) : 0) == 1 ? 'selected' : '' }}>Yes</option>
                    </select>
                </div>
            @endif

            <div class="ngbvd-form-actions ngbvd-role-form-actions">
                <a href="{{ url('/roles/list') }}" class="btn ngbvd-btn-soft"><i class="ti-close"></i> Cancel</a>
                <button type="submit" class="btn ngbvd-btn-primary"><i class="ti-save"></i> {{ $editing ? 'Update Role' : 'Save Role' }}</button>
            </div>
        </form>
    </section>

    <aside class="ngbvd-role-side-panel">
        <div class="ngbvd-role-side-card primary">
            <span class="ngbvd-side-icon"><i class="ti-key"></i></span>
            <h4>Permission Assignment</h4>
            <p>After saving the role, configure the modules, actions and data scope the role is allowed to access.</p>
            @if($editing)
                <a href="{{ url('/roles/permissions/'.$roleRef) }}" class="btn ngbvd-btn-primary btn-block"><i class="ti-settings"></i> Configure Permissions</a>
            @else
                <span class="ngbvd-muted-note">Save the role first to enable permission configuration.</span>
            @endif
        </div>

        <div class="ngbvd-role-side-card">
            <h4><i class="ti-info-alt"></i> Role Setup Flow</h4>
            <ol>
                <li>Create or update the role details.</li>
                <li>Return to the role workspace.</li>
                <li>Configure module/action permissions.</li>
                <li>Assign data scope where required.</li>
            </ol>
        </div>
    </aside>
</div>

<style>
.ngbvd-role-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}.ngbvd-role-form-card,.ngbvd-role-side-card{background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:22px;box-shadow:0 18px 44px rgba(15,23,42,.08)}.ngbvd-role-form-card{padding:24px}.ngbvd-role-card-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #eef2f7;padding-bottom:16px;margin-bottom:20px}.ngbvd-role-card-header h3{font-size:20px;margin:0;color:#111827;font-weight:800}.ngbvd-role-card-header p{margin:4px 0 0;color:#6b7280}.ngbvd-role-mode-badge{background:#fef3c7;color:#92400e;border-radius:999px;font-weight:800;font-size:12px;padding:7px 12px;white-space:nowrap}.ngbvd-role-form .form-group{margin-bottom:18px}.ngbvd-role-form label{font-weight:800;color:#374151;margin-bottom:7px;display:block}.ngbvd-role-form .form-control{border-radius:14px;border:1px solid #d8dee9;min-height:46px}.ngbvd-role-form textarea.form-control{min-height:130px}.ngbvd-role-form .form-control:focus{border-color:var(--ngbvd-primary,#b8860b);box-shadow:0 0 0 3px rgba(184,134,11,.12)}.ngbvd-role-form-actions{border-top:1px solid #eef2f7;padding-top:18px;margin-top:8px;display:flex;justify-content:flex-end;gap:10px}.ngbvd-role-side-panel{display:flex;flex-direction:column;gap:16px}.ngbvd-role-side-card{padding:20px}.ngbvd-role-side-card.primary{background:linear-gradient(180deg,#fff,#fffaf0);border-color:rgba(184,134,11,.22)}.ngbvd-role-side-card h4{margin:0 0 10px;color:#111827;font-weight:800;font-size:16px}.ngbvd-role-side-card p,.ngbvd-role-side-card li{color:#6b7280;font-size:13px;line-height:1.55}.ngbvd-role-side-card ol{padding-left:18px;margin:0}.ngbvd-side-icon{width:48px;height:48px;border-radius:18px;background:linear-gradient(135deg,var(--ngbvd-primary,#b8860b),#f4d06f);display:grid;place-items:center;color:#fff;font-size:20px;margin-bottom:14px}.ngbvd-muted-note{display:block;border-radius:14px;background:#f8fafc;border:1px dashed #cbd5e1;color:#64748b;padding:12px;font-size:13px}.btn-block{width:100%;display:block;text-align:center}@media(max-width:992px){.ngbvd-role-form-layout{grid-template-columns:1fr}.ngbvd-role-form-actions{justify-content:stretch}.ngbvd-role-form-actions .btn{flex:1}}
</style>
@endsection
