@extends('layouts.master')

@section('title', 'Productos')

@section('content')

    <div class="content-header">
        <div class="container-fluid">

            <div class="row mb-2">

                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">

                    <h1 class="m-0 text-dark">
                        Administrativo
                        <small> Productos</small>
                    </h1>

                </div>

                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">

                    <button
                        type="button"
                        class="btn btn-secondary btn-block"
                        data-toggle="modal"
                        data-target="#ayudaModal"
                    >
                        Ayuda
                    </button>

                </div>

            </div>

        </div>
    </div>


    <section class="content">

        <div class="container-fluid">

            <div class="row">

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                    <div class="card">

                        <div class="card-header ui-sortable-handle bg-dark text-light">

                            <h3 class="card-title">

                                <i class="fa-regular fa-calendar mr-1"></i>

                                Productos

                            </h3>


                            <div class="card-tools">

                                <button
                                    type="button"
                                    class="btn btn-tool"
                                    data-toggle="modal"
                                    data-target="#productoAgregar"
                                >

                                    <i class="fas fa-plus fa-lg"></i>

                                </button>

                            </div>

                        </div>


                        <div class="card-body">

                            @if(count($productos))

                                <table
                                    id="videos"
                                    class="table table-hover table-striped nowrap"
                                    style="width:100%"
                                >

                                    <thead>

                                        <tr>

                                            <th>
                                                Categoria
                                            </th>

                                            <th>
                                                Nombre
                                            </th>


                                            @foreach ($depositos as $key => $deposito)

                                                <th class="text-center">

                                                    {{ $deposito->nombre }}

                                                </th>

                                            @endforeach


                                            <th class="text-center">
                                                Cantidad
                                            </th>


                                            <th class="text-center">
                                                Activo
                                            </th>


                                            <th class="text-center">
                                                Editar
                                            </th>

                                        </tr>

                                    </thead>


                                    <tbody>

                                        @foreach ($productos as $key => $producto)

                                            <tr>

                                                <td>

                                                    {{ @$producto->categoria->nombre }}

                                                </td>


                                                <td>

                                                    {{ $producto->nombre }}

                                                    <small>
                                                        {{ $producto->volumen }}
                                                    </small>

                                                </td>


                                                @foreach ($depositos as $key => $deposito)

                                                    <td class="text-center">

                                                        {{ $producto->cantidadTotalDeposito($deposito->id) }}

                                                    </td>

                                                @endforeach


                                                <td
                                                    class="text-center"
                                                    style="
                                                        font-weight:bold;
                                                        color:{{
                                                            $producto->cantidadTotal() - $producto->minimo >= 0
                                                                ? 'green'
                                                                : 'red'
                                                        }};
                                                    "
                                                >

                                                    {{ $producto->cantidadTotal() }}

                                                    /

                                                    {{ $producto->minimo }}

                                                </td>


                                                {{-- ACTIVO --}}
                                                <td class="text-center">

                                                    <a
                                                        href="#"
                                                        class="btn-cambiar-estado"
                                                        data-id="{{ $producto->id }}"
                                                        style="
                                                            text-decoration:none;
                                                            cursor:pointer;
                                                        "
                                                        title="Cambiar estado"
                                                    >

                                                        @if($producto->act == 1)

                                                            <i
                                                                class="fas fa-check-circle fa-lg icono-estado"
                                                                style="color:green;"
                                                            ></i>

                                                        @else

                                                            <i
                                                                class="fas fa-times-circle fa-lg icono-estado"
                                                                style="color:red;"
                                                            ></i>

                                                        @endif

                                                    </a>

                                                </td>


                                                {{-- EDITAR --}}
                                                <td class="text-center">

                                                    <a
                                                        href="#"
                                                        class="btn btn-tool"
                                                        data-toggle="modal"
                                                        data-target="#productoEditar{{$producto->id}}"
                                                        style="color:inherit;"
                                                    >

                                                        <i class="fas fa-edit fa-lg"></i>

                                                    </a>

                                                </td>

                                            </tr>

                                        @endforeach

                                    </tbody>

                                </table>

                            @else

                                <div>

                                    <br>

                                    <p class="text-center">
                                        No Existen Registros
                                    </p>

                                    <br>

                                </div>

                            @endif

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>



    <!-- ===================================================== -->
    <!-- MODAL AGREGAR -->
    <!-- ===================================================== -->

    <div
        class="modal fade"
        id="productoAgregar"
        tabindex="-1"
        role="dialog"
        aria-labelledby="contactoAgregar"
        aria-hidden="true"
    >

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Agregar Producto
                    </h5>

                    <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                    >

                        <span aria-hidden="true">
                            &times;
                        </span>

                    </button>

                </div>


                <div class="modal-body">


                    {{ Form::open([
                        'route' => 'administrativo.producto.guardar',
                        'method'=>'POST',
                        'files'=> true
                    ]) }}


                    {{ Form::label(
                        '',
                        "Nombre",
                        ['style'=>'font-weight: bold;']
                    ) }}

                    *

                    {{ Form::text(
                        'nombre',
                        null,
                        [
                            'required' => 'required',
                            'class'=>'form-control',
                            'placeholder'=>'Ingrese el nombre del producto'
                        ]
                    ) }}


                    <br>


                    {{ Form::label(
                        '',
                        "Minimo",
                        ['style'=>'font-weight: bold;']
                    ) }}

                    *

                    {{ Form::number(
                        'minimo',
                        null,
                        [
                            'required' => 'required',
                            'class'=>'form-control',
                            'placeholder'=>'Ingrese el minimo del producto en cc'
                        ]
                    ) }}


                    <br>


                    {{ Form::label(
                        '',
                        "Volumen",
                        ['style'=>'font-weight: bold;']
                    ) }}

                    *

                    {{ Form::number(
                        'volumen',
                        null,
                        [
                            'required' => 'required',
                            'class'=>'form-control',
                            'placeholder'=>'Ingrese el volumen del producto en cc'
                        ]
                    ) }}


                    <br>

                    {{ Form::label(
                        '',
                        "Pack",
                        ['style'=>'font-weight: bold;']
                    ) }}

                    *

                    {{ Form::number(
                        'pack',
                        null,
                        [
                            'required' => 'required',
                            'class'=>'form-control',
                            'placeholder'=>'Ingrese la cantidad por pack'
                        ]
                    ) }}


                    <br>


                    {{ Form::label(
                        '',
                        "Categoria",
                        ['style'=>'font-weight: bold;']
                    ) }}

                    *


                    {{ Form::select(
                        'categoria_id',
                        $ddCategorias,
                        null,
                        [
                            'required' => 'required',
                            'class'=>'form-control',
                            'placeholder'=>'Seleccione la catgoria del producto'
                        ]
                    ) }}


                    <hr>


                    <div class="row">

                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

                            {{ Form::submit(
                                'Guardar',
                                [
                                    'class'=> 'btn btn-success btn-block'
                                ]
                            ) }}

                            {{ Form::close() }}

                        </div>


                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

                            <button
                                type="button"
                                class="btn btn-secondary btn-block"
                                data-dismiss="modal"
                            >

                                Cerrar

                            </button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



    <!-- ===================================================== -->
    <!-- MODALES EDITAR -->
    <!-- ===================================================== -->

    @foreach ($productos as $key => $producto)

        <div
            class="modal fade"
            id="productoEditar{{$producto->id}}"
            tabindex="-1"
            role="dialog"
            aria-labelledby="mensajeEditar"
            aria-hidden="true"
        >

            <div class="modal-dialog" role="document">

                <div class="modal-content">

                    <div class="modal-header">

                        <h5 class="modal-title">

                            Editar {{ $producto->nombre }}

                        </h5>


                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Close"
                        >

                            <span aria-hidden="true">
                                &times;
                            </span>

                        </button>

                    </div>


                    <div class="modal-body">


                        {{ Form::model(
                            $producto,
                            [
                                'route' => [
                                    'administrativo.producto.actualizar',
                                    Hashids::encode($producto->id, time())
                                ],
                                'method'=>'POST',
                                'files'=> true
                            ]
                        ) }}


                        {{ Form::label(
                            '',
                            "Nombre",
                            ['style'=>'font-weight: bold;']
                        ) }}

                        *

                        {{ Form::text(
                            'nombre',
                            null,
                            [
                                'required' => 'required',
                                'class'=>'form-control',
                                'placeholder'=>'Ingrese el nombre del producto'
                            ]
                        ) }}


                        <br>


                        {{ Form::label(
                            '',
                            "Minimo",
                            ['style'=>'font-weight: bold;']
                        ) }}

                        *

                        {{ Form::number(
                            'minimo',
                            null,
                            [
                                'required' => 'required',
                                'class'=>'form-control',
                                'placeholder'=>'Ingrese el minimo del producto en cc'
                            ]
                        ) }}


                        <br>


                        {{ Form::label(
                            '',
                            "Volumen",
                            ['style'=>'font-weight: bold;']
                        ) }}

                        *

                        {{ Form::number(
                            'volumen',
                            null,
                            [
                                'required' => 'required',
                                'class'=>'form-control',
                                'placeholder'=>'Ingrese el volumen del producto en cc'
                            ]
                        ) }}


                        <br>

                        {{ Form::label(
                            '',
                            "Pack",
                            ['style'=>'font-weight: bold;']
                        ) }}

                        *

                        {{ Form::number(
                            'pack',
                            null,
                            [
                                'required' => 'required',
                                'class'=>'form-control',
                                'placeholder'=>'Ingrese la cantidad por pack'
                            ]
                        ) }}


                        <br>


                        {{ Form::label(
                            '',
                            "Categoria",
                            ['style'=>'font-weight: bold;']
                        ) }}

                        *


                        {{ Form::select(
                            'categoria_id',
                            $ddCategorias,
                            null,
                            [
                                'required' => 'required',
                                'class'=>'form-control',
                                'placeholder'=>'Seleccione la catgoria del producto'
                            ]
                        ) }}


                        <hr>


                        <div class="row">


                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

                                {{ Form::submit(
                                    'Actualizar',
                                    [
                                        'class'=> 'btn btn-success btn-block'
                                    ]
                                ) }}

                                {{ Form::close() }}

                            </div>


                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

                                <button
                                    type="button"
                                    class="btn btn-secondary btn-block"
                                    data-dismiss="modal"
                                >

                                    Cerrar

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    @endforeach



    <!-- ===================================================== -->
    <!-- DATATABLE -->
    <!-- ===================================================== -->

    <link
        rel="stylesheet"
        href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"
    >

    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
    ></script>

    <script
        src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"
    ></script>

    <script
        src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"
    ></script>


    <script>

        $(document).ready(function() {


            /*
            |--------------------------------------------------------------------------
            | DATATABLE
            |--------------------------------------------------------------------------
            */

            $('#videos').DataTable({

                "columnDefs": [
                    {
                        "orderable": false,
                        "targets": []
                    }
                ],

                "order": [
                    [0, 'asc']
                ],

                "scrollX": true,

                "language": {

                    "lengthMenu": "Mostrar _MENU_ por pagina",

                    "zeroRecords": "No existen Registros",

                    "info": "",

                    "infoEmpty": "",

                    "infoFiltered": "",

                    "search": "Buscar:",

                    "paginate": {

                        "first": "Primera",

                        "last": "Ultima",

                        "next": "Siguiente",

                        "previous": "Anterior"

                    }

                },

                "pageLength": 500,

                "dom": '<"top"f>rt<"bottom"><"clear">'

            });



            /*
            |--------------------------------------------------------------------------
            | ACTIVAR / DESACTIVAR PRODUCTO
            |--------------------------------------------------------------------------
            */

            $(document).on('click', '.btn-cambiar-estado', function(e) {

                e.preventDefault();


                var boton = $(this);

                var productoId = boton.data('id');

                var icono = boton.find('.icono-estado');


                /*
                 * Evita doble click mientras guarda.
                 */
                boton.css('pointer-events', 'none');

                icono.removeClass(
                    'fa-check-circle fa-times-circle'
                );

                icono.addClass(
                    'fa-spinner fa-spin'
                );

                icono.css('color', 'gray');


                $.ajax({

                    url: "{{ route('administrativo.producto.estado') }}",

                    type: "POST",

                    data: {

                        _token: "{{ csrf_token() }}",

                        id: productoId

                    },


                    success: function(response) {


                        icono.removeClass(
                            'fa-spinner fa-spin'
                        );


                        if (response.act == 1) {

                            icono.addClass(
                                'fa-check-circle'
                            );

                            icono.css(
                                'color',
                                'green'
                            );

                        } else {

                            icono.addClass(
                                'fa-times-circle'
                            );

                            icono.css(
                                'color',
                                'red'
                            );

                        }


                        boton.css(
                            'pointer-events',
                            'auto'
                        );

                    },


                    error: function(xhr) {


                        icono.removeClass(
                            'fa-spinner fa-spin'
                        );


                        /*
                         * Restauramos página para asegurar
                         * que el icono coincida con la DB.
                         */

                        alert(
                            'No se pudo actualizar el estado del producto.'
                        );


                        location.reload();

                    }

                });

            });

        });

    </script>


@endsection


@section('javascript')

@endsection