@extends('layouts.layout_admin')
@section('productos', 'selected')
@section('productos_active', 'active')
@section('title', 'Módulo Productos | ')

@section('page-breadcrumb')
<h4 class="page-title">@if($tipo == 'crear'){{'Agregar producto'}}@else{{'Editar Producto'}}@endif</h4>
<div class="d-flex align-items-center">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{url('/mod_producto/')}}">Módulo Productos</a></li>
            <li class="breadcrumb-item active" aria-current="page">@if($tipo ==
                'crear'){{'Agregar producto'}}@else{{'Editar Producto'}}@endif</li>
        </ol>
    </nav>
</div>
@endsection

@section('assets')
<!-- This page plugin CSS -->
<link href="{{asset('plugin/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
<link href="{{asset('plugin/summernote-0.8.16-dist/summernote.min.css')}}" rel="stylesheet">
<link href="{{asset('plugin/fancybox-master/dist/jquery.fancybox.min.css')}}" rel="stylesheet">
<link href="{{asset('plugin/bootstrap-fileinput-master/css/fileinput.min.css')}}" rel="stylesheet">
<link href="{{asset('plugin/cropperjs-master/dist/cropper.min.css')}}" rel="stylesheet">
<link href="{{asset('css/admin/modulos.css')}}" rel="stylesheet">
@endsection

@section('scripts')
<!--This page plugins -->
<script src="{{URL::asset('plugin/datatables/media/js/jquery.dataTables.min.js')}}"></script>
<script src="{{URL::asset('plugin/dist/js/pages/datatable/custom-datatable.js')}}"></script>
<script src="{{URL::asset('plugin/block-ui/jquery.blockUI.js')}}"></script>
<script src="{{URL::asset('plugin/summernote-0.8.16-dist/summernote.min.js')}}"></script>
<script src="{{URL::asset('plugin/summernote-0.8.16-dist/lang/summernote-es-ES.min.js')}}"></script>
<script src="{{URL::asset('plugin/fancybox-master/dist/jquery.fancybox.min.js')}}"></script>
<script src="{{URL::asset('plugin/bootstrap-fileinput-master/js/fileinput.js')}}"></script>
<script src="{{URL::asset('plugin/bootstrap-fileinput-master/js/locales/es.js')}}"></script>
<script src="{{URL::asset('plugin/bootstrap-fileinput-master/themes/fa/theme.js')}}"></script>
<script src="{{URL::asset('plugin/cropperjs-master/dist/cropper.min.js')}}"></script>
<script src="{{URL::asset('js/admin/form_producto.js')}}"></script>
@endsection

@section('content')
<div class="row nm">
    <div class="col-12 text-right mb-3">
        @if($tipo == 'crear')
        <button class="btn btn-primary" id="btnSave">Guardar</button>
        @else
        <button class="btn btn-primary" id="btnUpdate">Guardar</button>
        @endif
        <a href="{{url('/productos')}}" class="btn btn-secondary">Retroceder</a>
    </div>
    <div class="col-12 mo_form_producto pb-5">
        <input type="hidden" id="idproducto" value="@if($tipo == 'editar'){{$producto->id}}@endif">
        <!-- Panel de informacion general del producto -->
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="fa fa-info panel-icon"></i> Información del producto
                    </button>
                </h2>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
                <div class="card-body">
                    <div class="col-12 col-lg-10 offset-lg-1">
                        <div class="form-group row">
                            <label for="categoria_producto" class="col-sm-3 col-form-label">Categoría</label>
                            <div class="col-sm-5">
                                <select id="categoria_producto" class="form-control">
                                    <option value="0" hidden selected>Seleccionar</option>
                                    @foreach($categorias as $val)
                                        <option 
                                            value="{{$val->id}}"
                                            {{(isset($producto) && $producto->idcategoria == $val->id) ? 'selected':''}}        
                                        >{{$val->nombre_es}}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Campo requerido.</div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="p_nombre_es" class="col-sm-3 col-form-label">Nombre español</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="p_nombre_es"
                                    value="@if($tipo == 'editar' && $producto->nombre_es != null){{$producto->nombre_es}}@endif">
                                <div class="invalid-feedback">Campo requerido.</div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="p_nombre_en" class="col-sm-3 col-form-label">Nombre inglés</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="p_nombre_en"
                                    value="@if($tipo == 'editar' && $producto->nombre_en != null){{$producto->nombre_en}}@endif">
                                <div class="invalid-feedback">Campo requerido.</div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="p_descripcion_es" class="col-sm-3 col-form-label">Descripcion español</label>
                            <div class="col-sm-9">
                                <textarea name="" id="p_descripcion_es" class="form-control">@if($tipo == 'editar' && $producto->descripcion_es != null){{$producto->descripcion_es}}@endif</textarea>
                                <div class="invalid-feedback">Campo requerido.</div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="p_descripcion_en" class="col-sm-3 col-form-label">Descripcion inglés</label>
                            <div class="col-sm-9">
                                <textarea name="" id="p_descripcion_en" class="form-control">@if($tipo == 'editar' && $producto->descripcion_en != null){{$producto->descripcion_en}}@endif</textarea>
                                <div class="invalid-feedback">Campo requerido.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panel para imagenes -->
        <div class="card" id="panel_imagenes">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
                        data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                        <i class="far fa-images"></i> Imágenes
                    </button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
                <div class="card-body">
                    @if($tipo == 'editar')
                    <div class="row nm mb-5">
                        @if($producto->imagen1)
                        <div class="col-12 col-sm-auto">
                            <a href="{{asset('img/productosWeb/'.$producto->imagen1)}}"
                                class="fancybox fancy_producto d-inline-block">
                                <div class="img_producto"
                                    style="background-image:url({{asset('img/productosWeb/'.$producto->imagen1)}})">
                                </div>
                                <p class="text-center">Imagen 1</p>
                            </a>
                        </div>
                        @endif
                        @if($producto->imagen2)
                        <div class="col-12 col-sm-auto">
                            <a href="{{asset('img/productosWeb/'.$producto->imagen2)}}"
                                class="fancybox fancy_producto d-inline-block">
                                <div class="img_producto"
                                    style="background-image:url({{asset('img/productosWeb/'.$producto->imagen2)}})">
                                </div>
                                <p class="text-center">Imagen 2</p>
                            </a>
                        </div>
                        @endif
                        @if($producto->imagen3)
                        <div class="col-12 col-sm-auto">
                            <a href="{{asset('img/productosWeb/'.$producto->imagen3)}}"
                                class="fancybox fancy_producto d-inline-block">
                                <div class="img_producto"
                                    style="background-image:url({{asset('img/productosWeb/'.$producto->imagen3)}})">
                                </div>
                                <p class="text-center">Imagen 3</p>
                            </a>
                        </div>
                        @endif
                        <input type="hidden" id="img1_registrado" value="@if($tipo == 'editar' && $producto->imagen1 != null){{$producto->imagen1}}@endif">
                        <input type="hidden" id="img2_registrado" value="@if($tipo == 'editar' && $producto->imagen2 != null){{$producto->imagen2}}@endif">
                        <input type="hidden" id="img3_registrado" value="@if($tipo == 'editar' && $producto->imagen3 != null){{$producto->imagen3}}@endif">
                    </div>
                    @endif

                    <div class="row nm">
                        <div class="col-12 col-sm-4 mb-3">
                            <div class="cont_input_file">
                                <p class="mb-1">Imagen 1 (Obligatorio):</p>
                                <div class="img_preview" id="imagen1_preview"></div>
                                <div class="img_select">
                                    <input type="file" class="form-control input-img-mod" id="imagen_producto1"
                                        accept="image/*">
                                    <textarea id="img1_base64" class="d-none"></textarea>
                                    <div class="invalid-feedback">Campo requerido.</div>
                                    <small><b>Nota:</b> Medidas recomendadas 800 píxeles de ancho por 800
                                        píxeles de alto. Peso máximo de 250KB.</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4 mb-3">
                            <div class="cont_input_file">
                                <p class="mb-1">Imagen 2:</p>
                                <div class="img_preview" id="imagen2_preview"></div>
                                <div class="img_select">
                                    <input type="file" class="form-control input-img-mod" id="imagen_producto2"
                                        accept="image/*">
                                    <textarea id="img2_base64" class="d-none"></textarea>
                                    <small><b>Nota:</b> Medidas recomendadas 800 píxeles de ancho por 800
                                        píxeles de alto. Peso máximo de 250KB.</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4 mb-3">
                            <div class="cont_input_file">
                                <p class="mb-1">Imagen 3:</p>
                                <div class="img_preview" id="imagen3_preview"></div>
                                <div class="img_select">
                                    <input type="file" class="form-control input-img-mod" id="imagen_producto3"
                                        accept="image/*">
                                    <textarea id="img3_base64" class="d-none"></textarea>
                                    <small><b>Nota:</b> Medidas recomendadas 800 píxeles de ancho por 800
                                        píxeles de alto. Peso máximo de 250KB.</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para recortar imagenes -->
<div class="modal fade" id="modal_crop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
    aria-labelledby="staticBackdropLabel" aria-hidden="true" style="z-index: 2000">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Recortar imagen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <img id="image_modal" src="" style="max-width: 100%;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="crop">Recortar</button>
            </div>
        </div>
    </div>
</div>

@endsection