@extends('layouts.app')
@section('titulo', (!$model->exists ? 'Creando' : 'Editando') . ' Sub 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 sub categoria</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                    @php
                        $metodo = !$model->exists ? 'POST' : 'PATCH';
                        $ruta = !$model->exists
                            ? route('gestion.sub-categorias.store')
                            : route('gestion.sub-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">Servicios</label>
                                <select id="idServicio" class="form-control w-100" name="idServicio">
                                    <option value="">Seleccione un servicio</option>
                                    @foreach ($servicios as $servicio)
                                        <option value="{{ $servicio->id }}"
                                            {{ $model->exists && $model->idServicio == $servicio->id ? 'selected' : '' }}>
                                            {{ $servicio->Nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="idCategoria">Categoria</label>
                                <select id="idCategoria" class="form-control w-100" name="idCategoria">
                                    <option value="">Seleccione una categoria</option>
                                    @if ($model->exists)
                                        @foreach ($categorias as $categoria)
                                            <option value="{{ $categoria->id }}"
                                                {{ $model->exists && $model->idCategoria == $categoria->id ? 'selected' : '' }}>
                                                {{ $categoria->Nombre }}</option>
                                        @endforeach
                                    @endif
                                </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>
@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') }}" />
    @if (Auth::user()->tema == 'oscuro')
        <style>
            .select2-search {
                background-color: #343A40 !important;
            }

            .select2-search input {
                color: #ffffff !important;
                background-color: #343A40 !important;
            }

            .select2-results {
                background-color: #343A40 !important;
            }
        </style>
    @endif
@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() {
            $('#idServicio').select2({
                placeholder: 'Seleccione un servicio',
                theme: 'bootstrap4',
                language: 'es',
            });

            $('#idCategoria').select2({
                placeholder: 'Seleccione una categoria',
                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 cargarSelectCategorias(idServicio) {
            $('#idCategoria').empty();
            $.ajax({
                url: "{{ route('gestion.productos.categorias', '') }}/" + idServicio,
                type: 'GET',
                success: function(data) {
                    $('#idCategoria').select2({
                        placeholder: 'Seleccione una categoria',
                        theme: 'bootstrap4',
                        language: 'es',
                        data: data.results
                    });
                    // $('#idResponsable').val(data.seleccionado).trigger('change');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert('Error al cargar los responsables');
                }
            });
        }

        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);
        });

        $(function() {
            $('#idServicio').on('select2:select', function(e) {
                var data = e.params.data;
                if (data.id == '') {
                    cargarSelectCategorias(0);
                    return;
                }
                cargarSelectCategorias(data.id);
            });
        });
    </script>
@endsection