@extends('admin.layouts.app')

@php
    $isEdit = isset($role);
    $pageTitle = $isEdit ? 'Editar Rol' : 'Nuevo Rol';

    $permissionGroups = [
        'gestion' => [
            'label' => 'Gestion',
            'icon' => 'ri-dashboard-line',
            'permissions' => [
                'ver_dashboard' => 'Ver Dashboard',
                'gestionar_productos' => 'Productos (Categorias, SubCat, Variedades, Marcas)',
                'gestionar_movimientos' => 'Movimientos de Stock',
            ],
        ],
        'comercial' => [
            'label' => 'Comercial',
            'icon' => 'ri-shopping-cart-line',
            'permissions' => [
                'gestionar_cotizaciones' => 'Cotizaciones',
                'gestionar_envios' => 'Envios',
                'gestionar_ordenes' => 'Ordenes',
                'gestionar_descuentos' => 'Descuentos',
                'gestionar_calificaciones' => 'Calificaciones',
                'gestionar_marketplace' => 'MarketPlace (ML, MP, TN)',
            ],
        ],
        'contenido' => [
            'label' => 'Contenido',
            'icon' => 'ri-article-line',
            'permissions' => [
                'gestionar_blog' => 'Blog',
                'gestionar_faqs' => 'FAQs',
                'gestionar_paginas' => 'Paginas',
                'gestionar_sliders' => 'Sliders',
                'gestionar_banners' => 'Banners',
                'gestionar_testimonios' => 'Testimonios',
            ],
        ],
        'organizacion' => [
            'label' => 'Organizacion',
            'icon' => 'ri-building-line',
            'permissions' => [
                'gestionar_sucursales' => 'Sucursales',
                'gestionar_menus' => 'Menus',
                'gestionar_usuarios' => 'Usuarios',
                'gestionar_contactos' => 'Contactos',
            ],
        ],
        'sistema' => [
            'label' => 'Sistema',
            'icon' => 'ri-settings-3-line',
            'permissions' => [
                'gestionar_configuracion' => 'Configuracion General',
                'gestionar_front_settings' => 'Frontend Settings',
                'gestionar_email_templates' => 'Email Templates',
                'gestionar_themes' => 'Themes',
                'gestionar_herramientas' => 'Herramientas',
                'gestionar_actualizacion' => 'Actualizacion del Sistema',
                'gestionar_integraciones' => 'Integraciones',
                'gestionar_roles' => 'Roles y Permisos',
            ],
        ],
    ];

    $rolePermissions = $isEdit ? $role->permissions->pluck('name')->toArray() : [];
@endphp

@section('content')

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">{{ $pageTitle }}</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Inicio</a></li>
                        <li class="breadcrumb-item">Sistema</li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.roles.index') }}">Roles y Permisos</a></li>
                        <li class="breadcrumb-item active">{{ $isEdit ? 'Editar' : 'Nuevo' }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <form action="{{ $isEdit ? route('admin.roles.update', $role->id) : route('admin.roles.store') }}" method="POST">
        @csrf
        @if($isEdit)
            @method('PUT')
        @endif

        {{-- Nombre del Rol --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Datos del Rol</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="name" class="form-label">Nombre del Rol <span class="text-danger">*</span></label>
                            <input type="text"
                                   name="name"
                                   id="name"
                                   class="form-control @error('name') is-invalid @enderror"
                                   placeholder="Ej: Editor, Operador, Supervisor..."
                                   value="{{ old('name', $isEdit ? $role->name : '') }}"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Permisos --}}
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">Permisos</h5>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="select-all-master">
                    <label class="form-check-label fw-semibold" for="select-all-master">
                        Seleccionar Todos
                    </label>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    @foreach($permissionGroups as $groupKey => $group)
                        <div class="col-lg-6 mb-3">
                            <div class="card border mb-0">
                                <div class="card-header bg-light d-flex align-items-center">
                                    <div class="form-check">
                                        <input class="form-check-input group-select-all"
                                               type="checkbox"
                                               id="group-{{ $groupKey }}"
                                               data-group="{{ $groupKey }}">
                                        <label class="form-check-label fw-semibold" for="group-{{ $groupKey }}">
                                            <i class="{{ $group['icon'] }} me-1"></i> {{ $group['label'] }}
                                        </label>
                                    </div>
                                </div>
                                <div class="card-body pb-1">
                                    <div class="row">
                                        @foreach($group['permissions'] as $permName => $permLabel)
                                            <div class="col-md-6">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input permission-checkbox permission-{{ $groupKey }}"
                                                           type="checkbox"
                                                           name="permissions[]"
                                                           value="{{ $permName }}"
                                                           id="perm-{{ $permName }}"
                                                           data-group="{{ $groupKey }}"
                                                           {{ (old('permissions') && in_array($permName, old('permissions'))) || (!old('permissions') && in_array($permName, $rolePermissions)) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="perm-{{ $permName }}">
                                                        {{ $permLabel }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Botones --}}
        <div class="pb-5 pt-3">
            <button type="submit" class="btn btn-primary">
                <i class="ri-save-line me-1"></i> {{ $isEdit ? 'Actualizar' : 'Crear Rol' }}
            </button>
            <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-dark ms-3">Cancelar</a>
        </div>

    </form>

@endsection

@push('js')
<script>
$(document).ready(function() {

    // --- Sync checkboxes on page load ---
    syncAllGroupSelects();
    syncMasterSelect();

    // --- Master "Select All" ---
    $('#select-all-master').on('change', function() {
        var isChecked = $(this).is(':checked');
        $('.permission-checkbox').prop('checked', isChecked);
        $('.group-select-all').prop('checked', isChecked);
    });

    // --- Group "Select All" ---
    $('.group-select-all').on('change', function() {
        var group = $(this).data('group');
        var isChecked = $(this).is(':checked');
        $('.permission-' + group).prop('checked', isChecked);
        syncMasterSelect();
    });

    // --- Individual permission checkbox ---
    $('.permission-checkbox').on('change', function() {
        var group = $(this).data('group');
        syncGroupSelect(group);
        syncMasterSelect();
    });

    function syncGroupSelect(group) {
        var total = $('.permission-' + group).length;
        var checked = $('.permission-' + group + ':checked').length;
        $('#group-' + group).prop('checked', total === checked);
    }

    function syncAllGroupSelects() {
        $('.group-select-all').each(function() {
            var group = $(this).data('group');
            syncGroupSelect(group);
        });
    }

    function syncMasterSelect() {
        var total = $('.permission-checkbox').length;
        var checked = $('.permission-checkbox:checked').length;
        $('#select-all-master').prop('checked', total === checked);
    }

});
</script>
@endpush