@extends('layouts.app')
@section('titulo', (!$model->exists ? 'Creando' : 'Editando') . ' Categoria')
@php
    $manual = true;
@endphp

@section('content')
    <div class="row">
        <div class="col">
            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Datos de la categoria</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                    @php
                        $metodo = !$model->exists ? 'POST' : 'PATCH';
                        $ruta = !$model->exists
                            ? route('gestion.categorias.store')
                            : route('gestion.categorias.update', [$model->id]);
                    @endphp
                    {{ html()->modelForm($model, $metodo, $ruta)->open() }}
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="nombre">Nombre</label>
                                {{ html()->text('Nombre')->class('form-control')->attributes(['oninput' => 'this.value = this.value.toUpperCase()']) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="Orden">Orden</label>
                                {{ html()->number('Orden')->class('form-control') }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="idServicio">Servicio</label>
                                <select id="idServicio" name="idServicio" class="selector form-control">
                                    <option value="">Seleccione un servicio</option>
                                    @foreach ($servicios as $servicio)
                                        <option value="{{ $servicio->id }}"
                                            {{ $model->idServicio == $servicio->id ? 'selected' : '' }}>
                                            {{ $servicio->Nombre }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            {{ html()->submit('<i class="far fa-save"></i> ' . (!$model->exists ? 'Guardar' : 'Editar'))->class('btn btn-primary') }}
                        </div>
                    </div>
                    {{ html()->closeModelForm() }}
                </div>
            </div>
        </div>
    </div>
    @if ($model->exists)
        <div class="row">
            <div class="col">
                <div class="card shadow mb-4">
                    <!-- Card Header - Dropdown -->
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">Imagenes</h6>
                    </div>
                    <!-- Card Body -->
                    <div class="card-body">
                        @livewire('gestion.imagenes', ['Model' => $model, 'Path' => 'Categorias'])
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('modales')
    @include('modales.modal-form-add-imagen', ['Model' => $model])
    @include('modales.modal-form-edit-imagen', ['Model' => $model])
@endsection
@section('css')
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/select2.min.css') }}" />
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/select2-bootstrap4.min.css') }}" />
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/cropper.min.css') }}" />
    @stack('modal-add-imagen-css')
    @stack('modal-edit-imagen-css')
@endsection
@section('js')
    <script src="{{ asset('build/js/select2.min.js') }}"></script>
    <script src="{{ asset('js/jquery.inputmask.min.js') }}"></script>
    <script src="{{ asset('build/js/cropper.min.js') }}"></script>
    <script>
        var modalAbierto = '';

        $(document).ready(function() {
            $('.selector').select2({
                theme: 'bootstrap4',
                language: 'es',
            });

            $('.moneda').inputmask({
                alias: "numeric",
                allowMinus: false,
                prefix: 'L ',
                digits: 2,
                digitsOptional: false,
                autoGroup: true,
                groupSeparator: ",",
                groupSize: 3,
                radixPoint: ".",
                placeholder: '0.00',
                removeMaskOnSubmit: true,
                rightAlign: false,
                unmaskAsNumber: true,
                clearMaskOnLostFocus: false,
            });
        });

        function mostrarModal() {
            $('#' + modalAbierto).modal('show');
        }

        function ocultarModal() {
            $('#' + modalAbierto).modal('hide');
        }

        Livewire.on('mostrarError', function(mensajeError, ocultar = true) {
            if (ocultar) ocultarModal();
            Swal.close();
            Swal.fire({
                icon: 'warning',
                title: mensajeError,
                showConfirmButton: false,
                timerProgressBar: false,
                timer: 3000,
                didOpen: () => {
                    Swal.hideLoading()
                }
            })
        });

        Livewire.on('mostrarCargando', function(mensaje) {
            Swal.close();
            Swal.fire({
                title: mensaje,
                html: 'Por favor espere...',
                allowOutsideClick: false,
                timerProgressBar: true,
                didOpen: () => {
                    Swal.showLoading()
                }
            })
        });

        Livewire.on('mostrarMensaje', function(mensaje, ocultar = true, recargar = false) {
            if (ocultar) ocultarModal();
            Swal.close();
            setTimeout(function() {
                Swal.fire({
                    icon: 'success',
                    title: mensaje,
                    showConfirmButton: false,
                    timer: 1500
                }).then((result) => {
                    if (result.dismiss === Swal.DismissReason.timer && recargar) {
                        location.reload();
                    }
                });
            }, 500);
        });
    </script>
    @stack('imagenes-js')
    @stack('modal-add-imagen-js')
    @stack('modal-edit-imagen-js')
@endsection