@extends('app')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="panel-title">Nueva Categoría</h3>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-bottom: 20px;">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="{{ url('/admin') }}">Opciones Administrador</a></li> 
                        </ul>
                    </div>
                    {!! Form::open(['url' => 'nuevaCategoria', 'method' => 'POST', 'role' => 'form']) !!}
                        {!! Form::token() !!}
                        <div class="form-group">
                            <label>Nombre de la Categoría</label>
                            {!! Form::text('nombre_categoria', old('nombre_categoria'), ['class' => 'form-control', 'required']) !!}
                        </div>
                        <div class="form-group">
                            <label>Estado</label>
                            {!! Form::select('estado', ['1' => 'Activo', '0' => 'Inactivo'], null, ['class' => 'form-control']) !!}
                        </div>
                        <button type="submit" class="btn btn-success btn-nueva-categoria">Guardar</button>
                        <a href="{{ url('consultarCategoria') }}" class="btn btn-default">Cancelar</a>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

@if(session('alert-success'))
    <script>
        Swal.fire({
            icon: 'success',
            title: '¡Éxito!',
            html: '{{ session('alert-success') }}',
            confirmButtonText: 'Aceptar'
        });
    </script>
@endif

@if($errors->any())
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Error',
            html: `{!! implode('<br>', $errors->all()) !!}`,
            confirmButtonText: 'Aceptar'
        });
    </script>
@endif
<script>
    document.querySelector('.btn-nueva-categoria').addEventListener('click', function(event) {
        event.preventDefault(); // Evita el envío inmediato del formulario

        Swal.fire({
            title: '¿Estás seguro de crear la categoría?',
            text: "¡La categoría será creada!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, crear',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Si el usuario confirma, envía el formulario
                event.target.closest('form').submit();
            }
        });
    });
</script>
@endsection