@extends('admin.layout')

@section('title', isset($role) ? 'Edit Role' : 'Add Role')
@section('header_title', isset($role) ? 'Edit Role' : 'Create New Role')
@section('header_subtitle', isset($role) ? 'Update the role name and module access levels.' : 'Define a role name and specify accessible modules.')

@section('content')
<form action="{{ route('admin.save_role') }}" method="POST">
    @csrf
    @if(isset($role))
        <input type="hidden" name="role_id" value="{{ $role->id }}">
    @endif
    <div class="row">
        <div class="col-xl-4 mb-4">
            <div class="card-premium">
                <h5 style="font-weight: 800; margin-bottom: 25px;">Basic Settings</h5>
                <div class="form-group mb-4">
                    <label style="font-weight: 700; color: #475569; margin-bottom: 8px;">Role Name*</label>
                    <input type="text" name="role_name" class="form-control" placeholder="e.g. Sales Manager" required style="height: 50px; border-radius: 12px; border: 1px solid #e2e8f0;" value="{{ old('role_name', $role->role_name ?? '') }}">
                    @error('role_name')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="form-group mb-4">
                    <label style="font-weight: 700; color: #475569; margin-bottom: 8px;">Description</label>
                    <textarea name="description" class="form-control" placeholder="Briefly describe this role's responsibility" style="border-radius: 12px; border: 1px solid #e2e8f0; min-height: 100px;">{{ old('description', $role->description ?? '') }}</textarea>
                </div>
                <button type="submit" class="btn-premium w-100 justify-content-center py-3">
                    <i class="fa fa-save mr-2"></i> {{ isset($role) ? 'Update Role' : 'Save Role' }}
                </button>
            </div>
        </div>

        <div class="col-xl-8 mb-4">
            <div class="card-premium">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 style="font-weight: 800; margin: 0;">Module Permissions</h5>
                    <button type="button" id="selectAll" class="btn btn-link text-primary p-0" style="font-weight: 700; text-decoration: none; font-size: 14px;">Select All</button>
                </div>

                <div class="row">
                    @php
                        $modules = [
                            ['id' => 'centers', 'name' => 'Centers Management', 'icon' => 'fa-building'],
                            ['id' => 'employees', 'name' => 'Employee Management', 'icon' => 'fa-users'],
                            ['id' => 'customers', 'name' => 'Customer Relations', 'icon' => 'fa-heart'],
                            ['id' => 'cms', 'name' => 'Content Management', 'icon' => 'fa-file-text'],
                            ['id' => 'blogs', 'name' => 'Blog & News', 'icon' => 'fa-rss'],
                            ['id' => 'banners', 'name' => 'Banners & Ads', 'icon' => 'fa-image'],
                            ['id' => 'reports', 'name' => 'Analytics & Reports', 'icon' => 'fa-bar-chart'],
                            ['id' => 'settings', 'name' => 'System Settings', 'icon' => 'fa-cog'],
                        ];
                    @endphp

                    @php
                        $assigned_perms = isset($role) && !empty($role->permissions) ? explode(',', $role->permissions) : [];
                    @endphp

                    @foreach($modules as $module)
                    <div class="col-md-6 mb-4">
                        <div class="perm-card" onclick="document.getElementById('mod_{{ $module['id'] }}').click()" style="background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 16px; padding: 20px; transition: all 0.3s; height: 100%; cursor: pointer;">
                            <div class="d-flex align-items-center mb-0 w-100 cursor-pointer">
                                <div style="width: 40px; height: 40px; background: #fff; color: var(--primary-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; font-size: 18px;">
                                    <i class="fa {{ $module['icon'] }}"></i>
                                </div>
                                <div class="ml-3 flex-grow-1" style="user-select: none;">
                                    <h6 style="font-weight: 700; margin: 0; color: var(--text-main);">{{ $module['name'] }}</h6>
                                    <p style="font-size: 12px; color: #64748b; margin: 2px 0 0 0;">Toggle access for this module</p>
                                </div>
                                <div class="custom-control custom-switch" onclick="event.stopPropagation();">
                                    <input type="checkbox" name="permissions[]" value="{{ $module['name'] }}" class="custom-control-input perm-check" id="mod_{{ $module['id'] }}" {{ in_array($module['name'], $assigned_perms) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="mod_{{ $module['id'] }}" style="cursor: pointer;"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('extra_scripts')
<script>
    $(document).ready(function() {
        $('#selectAll').on('click', function() {
            var allChecked = $('.perm-check:checked').length === $('.perm-check').length;
            $('.perm-check').prop('checked', !allChecked);
            $(this).text(allChecked ? 'Select All' : 'Deselect All');
        });

        $('.perm-check').on('change', function() {
            var allChecked = $('.perm-check:checked').length === $('.perm-check').length;
            $('#selectAll').text(allChecked ? 'Deselect All' : 'Select All');
        });
    });
</script>
@endsection