@extends('layouts.app')
@section('titulo', (!$model->exists ? 'Creando' : 'Editando') . ' Producto')
@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 del producto</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                    @php
                        $metodo = !$model->exists ? 'POST' : 'PATCH';
                        $ruta = !$model->exists
                            ? route('gestion.productos.store')
                            : route('gestion.productos.update', [$model->id]);
                    @endphp
                    {{ html()->modelForm($model, $metodo, $ruta)->open() }}
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="Descripcion">Descripcion</label>
                                {{ html()->text('Descripcion')->class('form-control')->attributes(['oninput' => 'this.value = this.value.toUpperCase()']) }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="DescripcionPublica">Descripcion Publica</label>
                                {{ html()->text('DescripcionPublica')->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="Codigo1">Codigo1</label>
                                {{ html()->text('Codigo1')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="Codigo2">Codigo2</label>
                                {{ html()->text('Codigo2')->class('form-control') }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="Costo">Costo</label>
                                {{ html()->number('Costo')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="Descuento">Descuento</label>
                                {{ html()->number('Descuento')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="DescuentoTipo">DescuentoTipo</label>
                                {{ html()->text('DescuentoTipo')->class('form-control') }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="Precio1">Precio1</label>
                                {{ html()->number('Precio1')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="Precio2">Precio2</label>
                                {{ html()->number('Precio2')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="Precio3">Precio3</label>
                                {{ html()->number('Precio3')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="Ganancia">Ganancia</label>
                                {{ html()->number('Ganancia')->class('form-control') }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="Utilidad">Utilidad</label>
                                {{ html()->number('Utilidad')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="Unidades">Unidades</label>
                                {{ html()->number('Unidades')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="RangoPrecio1">RangoPrecio1</label>
                                {{ html()->number('RangoPrecio1')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="RangoPrecio2">RangoPrecio2</label>
                                {{ html()->number('RangoPrecio2')->class('form-control') }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="RangoPrecio3">RangoPrecio3</label>
                                {{ html()->number('RangoPrecio3')->class('form-control') }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="idServicio">Servicio</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 class="col">
                            <div class="form-group">
                                <label for="idProveedor">Proveedor</label>
                                <select id="idProveedor" class="form-control w-100" name="idProveedor">
                                    <option value="">Seleccione un proveedor</option>
                                    @foreach ($proveedores as $proveedor)
                                        <option value="{{ $proveedor->id }}"
                                            {{ $model->exists && $model->idProveedor == $proveedor->id ? 'selected' : '' }}>
                                            {{ $proveedor->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 class="col">
                            <div class="form-group">
                                <label for="idSubCategoria">SubCategoria</label>
                                <select id="idSubCategoria" class="form-control w-100" name="idSubCategoria">
                                    <option value="">Seleccione una subcategoria</option>
                                    @if ($model->exists)
                                        @foreach ($subcategorias as $subcategoria)
                                            <option value="{{ $subcategoria->id }}"
                                                {{ $model->exists && $model->idSubCategoria == $subcategoria->id ? 'selected' : '' }}>
                                                {{ $subcategoria->Nombre }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="idEtiqueta">Etiquetas</label>
                                <select id="idEtiqueta" class="form-control w-100" name="Etiquetas[]" multiple="multiple">
                                    @if ($model->exists)
                                        @foreach ($etiquetas as $etiqueta)
                                            <option value="{{ $etiqueta->id }}"
                                                {{ $model->exists && $model->etiquetas->contains($etiqueta->id) ? 'selected' : '' }}>
                                                {{ $etiqueta->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>
    @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' => 'Productos'])
                    </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') }}" />
    @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
    @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() {
            $('#idServicio').select2({
                theme: 'bootstrap4',
                language: 'es',
            });

            $('#idCategoria').select2({
                theme: 'bootstrap4',
                language: 'es',
            });

            $('#idSubCategoria').select2({
                theme: 'bootstrap4',
                language: 'es',
            });

            $('#idEtiqueta').select2({
                theme: 'bootstrap4',
                language: 'es',
            });

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

        function cargarSelectSubCategorias(idCategoria) {
            $('#idSubCategoria').empty();
            $.ajax({
                url: "{{ route('gestion.productos.subcategorias', '') }}/" + idCategoria,
                type: 'GET',
                success: function(data) {
                    $('#idSubCategoria').select2({
                        theme: 'bootstrap4',
                        language: 'es',
                        data: data.results
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert('Error al cargar los responsables');
                }
            });
        }

        function cargarSelectEtiquetas(idServicio) {
            $('#idEtiqueta').empty();
            $.ajax({
                url: "{{ route('gestion.productos.etiquetas', '') }}/" + idServicio,
                type: 'GET',
                success: function(data) {
                    $('#idEtiqueta').select2({
                        theme: 'bootstrap4',
                        language: 'es',
                        data: data.results
                    });
                },
                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);
                    cargarSelectEtiquetas(0);
                    return;
                }
                cargarSelectCategorias(data.id);
                cargarSelectEtiquetas(data.id);
            });

            $('#idCategoria').on('select2:select', function(e) {
                var data = e.params.data;
                if (data.id == '') {
                    cargarSelectSubCategorias(0);
                    return;
                }
                cargarSelectSubCategorias(data.id);
            });
        });
    </script>
    @stack('imagenes-js')
    @stack('modal-add-imagen-js')
    @stack('modal-edit-imagen-js')
@endsection