@extends('adminlte::page')

@section('title', 'Nuevo Rol')

@section('content_header')
    <div class="d-flex align-items-center">
        <x-ui.btn-back url="{{ route('roles.index') }}" />
        <h1 class="ml-3 mb-0"><i class="fas fa-shield-alt text-primary mr-2"></i> Crear Rol</h1>
    </div>
@stop

@section('content')
    <div x-data="roleCreate()" x-init="initData()">
        <form @submit.prevent="save()" class="api-form">
            <x-ui.card shadow="shadow-sm">
                <x-slot:header>
                    <x-ui.card-header title="Datos del Rol" icon="fas fa-tag text-primary" />
                </x-slot:header>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <x-form.input name="name" label="Nombre del Rol" required="true" autofocus icon="fas fa-shield-alt" placeholder="ej. Cajero, Gerente" x-model="form.name" />
                        <template x-if="errors.name">
                            <span class="text-danger small"><i class="fas fa-exclamation-circle mr-1"></i> <span x-text="errors.name[0]"></span></span>
                        </template>
                    </div>
                </div>
            </x-ui.card>

            <x-ui.card class="mt-4" shadow="shadow-sm">
                <x-slot:header>
                    <x-ui.card-header title="Permisos del Sistema" icon="fas fa-lock text-primary" />
                </x-slot:header>
                <div x-show="loading" class="text-center py-3">
                    <x-ui.loading />
                </div>
                
                <div class="row" x-show="!loading">
                    <template x-for="(perms, group) in groupedPermissions" :key="group">
                        <div class="col-md-3 col-sm-6 mb-4">
                            <h6 class="section-header text-uppercase font-weight-bold" x-text="group"></h6>
                            <hr class="mt-0 mb-2">
                            <template x-for="perm in perms" :key="perm">
                                <div class="mb-1">
                                    <x-form.checkbox ::name="'perm_' + perm.replace(/[\.\s]/g, '_')" ::id="'perm_' + perm.replace(/[\.\s]/g, '_')" ::label="perm" x-model="form.permissions" ::value="perm" />
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </x-ui.card>

            <div class="text-right mt-3">
                <x-form.btn-save x-bind:disabled="isSaving || loading" url="{{ route('roles.index') }}">
                    <span x-show="!isSaving"><i class="fas fa-save mr-1"></i> Guardar</span>
                    <span x-show="isSaving"><i class="fas fa-spinner fa-spin mr-1"></i> Guardando...</span>
                </x-form.btn-save>
            </div>
        </form>
    </div>
@stop

@section('js')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('roleCreate', () => ({
            form: {
                name: '',
                permissions: []
            },
            groupedPermissions: {},
            errors: {},
            loading: true,
            isSaving: false,

            async initData() {
                try {
                    const response = await axios.get('/api/v1/roles/permissions');
                    const allPerms = response.data.data;
                    
                    // Group permissions by the part before the dot
                    const grouped = {};
                    allPerms.forEach(perm => {
                        const parts = perm.split('.');
                        let group = parts.length > 1 ? parts[0] : 'Generales';
                        // Capitalize first letter
                        group = group.charAt(0).toUpperCase() + group.slice(1);
                        
                        if (!grouped[group]) {
                            grouped[group] = [];
                        }
                        grouped[group].push(perm);
                    });
                    
                    this.groupedPermissions = grouped;
                } catch (error) {
                    console.error("Error al cargar permisos:", error);
                } finally {
                    this.loading = false;
                }
            },

            async save() {
                this.isSaving = true;
                this.errors = {};
                
                try {
                    await axios.post('/api/v1/roles', this.form);
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: 'Rol creado correctamente',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = "{{ route('roles.index') }}";
                    });
                } catch (error) {
                    if (error.response && error.response.status === 422) {
                        this.errors = error.response.data.errors;
                        Swal.fire({
                            icon: 'error',
                            title: 'Error de validación',
                            text: 'Por favor, revisa los campos en rojo.'
                        });
                    } else if (error.response && error.response.data && error.response.data.message) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.response.data.message
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error inesperado',
                            text: 'Ha ocurrido un error al guardar el rol.'
                        });
                    }
                } finally {
                    this.isSaving = false;
                }
            }
        }));
    });
</script>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/premium-ui.css') }}">
@stop