@extends('admin.layout.app')

@section('content')
    <div class="app-content">
        <div class="container-fluid mt-4">
            <div class="row justify-content-center">
                <div class="col-lg-12 col-md-10">

                    {{-- Card --}}
                    <div class="card shadow-lg border-0 rounded-4">
                        <div class="card-header bg-gradient bg-primary text-white rounded-top-4 d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-shield-lock-fill me-2" style="font-size: 1.3rem;"></i>
                                <h4 class="mb-0 fw-semibold">Create Role</h4>
                            </div>
                            {{-- IMPORTANT: Link should go to roles.index, not admin.roles.index --}}
                            <a href="{{ route('roles.index') }}" class="btn btn-light btn-sm">
                                <i class="bi bi-arrow-left"></i> Back
                            </a>
                        </div>
                        <div class="card-body p-4">
                            {{-- Form action should go to roles.store, not admin.roles.store --}}
                            <form action="{{ route('roles.store') }}" method="POST" autocomplete="off" enctype="multipart/form-data">
                                @csrf

                                <div class="row g-3 mb-4">
                                    {{-- Employee ID --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold" for="employee_id">
                                            <i class="bi bi-person-badge me-1 text-primary"></i> Employee ID <span class="text-danger">*</span>
                                        </label>
                                        <input
                                            type="text"
                                            class="form-control form-control-lg rounded-3 shadow-sm @error('employee_id') is-invalid @enderror"
                                            name="employee_id"
                                            id="employee_id"
                                            placeholder="Enter Employee ID"
                                            value="{{ old('employee_id') ?: 'EMP' . rand(10000,99999) }}"
                                            autocomplete="off"
                                            required
                                        >
                                        @error('employee_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Name --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold" for="name">
                                            <i class="bi bi-type me-1 text-primary"></i> Name <span class="text-danger">*</span>
                                        </label>
                                        <input
                                            type="text"
                                            class="form-control form-control-lg rounded-3 shadow-sm @error('name') is-invalid @enderror"
                                            name="name"
                                            id="name"
                                            placeholder="Enter Role Name"
                                            value="{{ old('name') }}"
                                            required
                                        >
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Email --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold" for="email">
                                            <i class="bi bi-envelope me-1 text-primary"></i> Email <span class="text-danger">*</span>
                                        </label>
                                        <input
                                            type="email"
                                            class="form-control form-control-lg rounded-3 shadow-sm @error('email') is-invalid @enderror"
                                            name="email"
                                            id="email"
                                            placeholder="Enter Email"
                                            value="{{ old('email') }}"
                                            required
                                        >
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Phone --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold" for="phone">
                                            <i class="bi bi-telephone me-1 text-primary"></i> Phone
                                        </label>
                                        <input
                                            type="tel"
                                            pattern="[0-9]{10}"
                                            inputmode="numeric"
                                            class="form-control form-control-lg rounded-3 shadow-sm @error('phone') is-invalid @enderror"
                                            name="phone"
                                            id="phone"
                                            placeholder="Enter 10-digit Phone"
                                            value="{{ old('phone') }}"
                                            maxlength="10"
                                            autocomplete="off"
                                        >
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Designation --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold" for="designation">
                                            <i class="bi bi-patch-check me-1 text-primary"></i> Designation
                                        </label>
                                        <input
                                            type="text"
                                            class="form-control form-control-lg rounded-3 shadow-sm @error('designation') is-invalid @enderror"
                                            name="designation"
                                            id="designation"
                                            placeholder="Enter Designation"
                                            value="{{ old('designation') }}"
                                        >
                                        @error('designation')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Image --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold" for="image">
                                            <i class="bi bi-image me-1 text-primary"></i> Image
                                        </label>
                                        <input
                                            type="file"
                                            class="form-control form-control-lg rounded-3 shadow-sm @error('image') is-invalid @enderror"
                                            name="image"
                                            id="image"
                                            accept="image/*"
                                        >
                                        @error('image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">Optional: Upload an image. JPEG, PNG, SVG supported.</div>
                                    </div>

                                    {{-- Password --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold" for="password">
                                            <i class="bi bi-key me-1 text-primary"></i> Password <span class="text-danger">*</span>
                                        </label>
                                        <input
                                            type="password"
                                            class="form-control form-control-lg rounded-3 shadow-sm @error('password') is-invalid @enderror"
                                            name="password"
                                            id="password"
                                            placeholder="Enter Password"
                                            required
                                            pattern="^(?=.*[A-Z])(?=.*[0-9])(?=.*[\W_]).{8,}$"
                                            title="At least 8 chars, 1 uppercase, 1 number, 1 special character."
                                            autocomplete="new-password"
                                        >
                                        @error('password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">
                                            Must be 8+ characters, use upper/lowercase, number & special character.
                                        </div>
                                    </div>

                                    {{-- Status --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold" for="status">
                                            <i class="bi bi-toggle-on me-1 text-primary"></i> Status <span class="text-danger">*</span>
                                        </label>
                                        <select
                                            name="status"
                                            id="status"
                                            class="form-select form-select-lg rounded-3 shadow-sm @error('status') is-invalid @enderror"
                                            required
                                        >
                                            <option value="" disabled {{ old('status')=="" ? "selected" : "" }}>Select Status</option>
                                            <option value="active" {{ old('status')=='active' ? 'selected' : '' }}>Active</option>
                                            <option value="inactive" {{ old('status')=='inactive' ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                {{-- ================= Permissions Table ================= --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold mb-2">
                                        <i class="bi bi-lock me-1 text-primary"></i> Permissions <span class="text-danger">*</span>
                                    </label>
                                    <div class="table-responsive">
                                        <table class="table table-bordered align-middle">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="min-width: 150px;">Module</th>
                                                    <th class="text-center">Add</th>
                                                    <th class="text-center">Edit</th>
                                                    <th class="text-center">View</th>
                                                    <th class="text-center">Delete</th>
                                                    <th class="text-center">
                                                        <span>
                                                            <input type="checkbox" class="form-check-input" id="perm-select-all" />
                                                            All
                                                        </span>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $menu = $menu ?? config('admin_menu', []);
                                                    $allModules = [];
                                                    foreach ($menu as $group) {
                                                        foreach (($group['items'] ?? []) as $item) {
                                                            if (!empty($item['module']) && !empty($item['label'])) {
                                                                $allModules[$item['module']] = $item['label'];
                                                            }
                                                        }
                                                    }
                                                    $permissionActions = [
                                                        'can_add' => 'Add',
                                                        'can_edit' => 'Edit',
                                                        'can_view' => 'View',
                                                        'can_delete' => 'Delete',
                                                    ];
                                                @endphp
                                                @foreach($allModules as $module => $display)
                                                    <tr>
                                                        <td class="fw-semibold">
                                                            {{ $display }}
                                                        </td>
                                                        @foreach($permissionActions as $action => $label)
                                                            <td class="text-center">
                                                                <input
                                                                    type="checkbox"
                                                                    class="form-check-input perm-checkbox row-{{ $module }}"
                                                                    name="permissions[{{ $module }}][{{ $action }}]"
                                                                    id="perm-{{ $module }}-{{ $action }}"
                                                                    value="1"
                                                                    {{ old("permissions.$module.$action") ? 'checked' : '' }}
                                                                />
                                                            </td>
                                                        @endforeach
                                                        <td class="text-center">
                                                            <input
                                                                type="checkbox"
                                                                class="form-check-input select-row"
                                                                data-row="{{ $module }}"
                                                                id="perm-row-{{ $module }}"
                                                            />
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    @error('permissions')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="d-flex justify-content-end mt-4">
                                    <button type="submit" class="btn btn-primary btn-lg px-4 rounded-3 shadow">
                                        <i class="bi bi-plus-circle me-2"></i> Create
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    {{-- /Card --}}

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

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Row select all
            document.querySelectorAll('.select-row').forEach(function(rowToggle){
                rowToggle.addEventListener('change', function(){
                    let rowClass = '.row-' + this.dataset.row;
                    document.querySelectorAll(rowClass).forEach(function(cb){
                        cb.checked = rowToggle.checked;
                    });
                });
            });

            // Table select all
            var selectAll = document.getElementById('perm-select-all');
            if (selectAll) {
                selectAll.addEventListener('change', function(){
                    const allChecks = document.querySelectorAll('.perm-checkbox');
                    allChecks.forEach(cb => cb.checked = selectAll.checked);
                    // update all row toggles too
                    document.querySelectorAll('.select-row').forEach(function(row){
                        row.checked = selectAll.checked;
                    });
                });
            }

            // Generate random Employee ID if input is empty
            var empIdInput = document.getElementById('employee_id');
            if(empIdInput && !empIdInput.value){
                function generateEmpId() {
                    var num = Math.floor(10000 + Math.random() * 90000);
                    return "EMP" + num;
                }
                empIdInput.value = generateEmpId();
            }
        });
    </script>
@endpush