@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">Edit Role</h4>
                            </div>
                            <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="{{ route('roles.update', $role->id) }}" method="POST" autocomplete="off" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')

                                <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', $role->employee_id) }}"
                                            autocomplete="off"
                                            required
                                            readonly
                                        >
                                        @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', $role->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', $role->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', $role->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', $role->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>
                                        @if($role->image)
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/'.$role->image) }}" alt="Role Image" class="img-thumbnail" width="80">
                                            </div>
                                        @endif
                                    </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-muted small">(Leave blank to keep current)</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 New Password"
                                            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', $role->status)=="" ? "selected" : "" }}>Select Status</option>
                                            <option value="active" {{ old('status', $role->status)=='active' ? 'selected' : '' }}>Active</option>
                                            <option value="inactive" {{ old('status', $role->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:120px">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 class="d-inline-block">
                                                            <input type="checkbox" class="form-check-input" id="perm-select-all">
                                                            All
                                                        </span>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $menu = $menu ?? config('admin_menu', []);
                                                    $tableModules = [];
                                                    foreach ($menu as $group) {
                                                        foreach (($group['items'] ?? []) as $item) {
                                                            if (!empty($item['module']) && !empty($item['label'])) {
                                                                $tableModules[$item['module']] = $item['label'];
                                                            }
                                                        }
                                                    }
                                                @endphp

                                                @foreach($tableModules as $moduleKey => $moduleLabel)
                                                    <tr>
                                                        <td class="text-capitalize fw-semibold">
                                                            {{ $moduleLabel }}
                                                        </td>
                                                        @foreach(['can_add','can_edit','can_view','can_delete'] as $action)
                                                            <td class="text-center">
                                                                @php
                                                                    // Show checked state if:
                                                                    // - old() exists (form re-submit), otherwise use rolePermissions default
                                                                    $currentSelected = old("permissions.$moduleKey.$action", $rolePermissions[$moduleKey][$action] ?? false);
                                                                @endphp
                                                                <input
                                                                    type="checkbox"
                                                                    class="form-check-input perm-checkbox row-{{ $moduleKey }}"
                                                                    name="permissions[{{ $moduleKey }}][{{ $action }}]"
                                                                    id="perm-{{ $moduleKey }}-{{ $action }}"
                                                                    value="1"
                                                                    {{ $currentSelected ? 'checked' : '' }}
                                                                >
                                                            </td>
                                                        @endforeach
                                                        {{-- Row Select All --}}
                                                        <td class="text-center">
                                                            <input
                                                                type="checkbox"
                                                                class="form-check-input select-row"
                                                                data-row="{{ $moduleKey }}"
                                                                id="perm-row-{{ $moduleKey }}"
                                                            >
                                                        </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-pencil-square me-2"></i> Update
                                    </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;
                    });
                });
            }

            // On page load: set proper row "select all" state if all checkboxes in a row are checked
            document.querySelectorAll('tr').forEach(function(row) {
                var module = row.querySelector('.select-row')?.dataset.row;
                if(module) {
                    var checkboxes = row.querySelectorAll('.row-' + module);
                    var selectRow = row.querySelector('.select-row');
                    if(checkboxes.length && selectRow) {
                        selectRow.checked = Array.from(checkboxes).every(cb => cb.checked);
                    }
                }
            });
        });
    </script>
@endpush