@extends('layouts.master')

@section('title', 'Usuarios')

@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">Ajustes <small>Clientes</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="fas fa-users mr-1"></i>
                                Clientes
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-toggle="modal" data-target="#gestor">
                                    <i class="fas fa-user-tie fa-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            @if(count($clientes))
                                <table id="datatable" class="table table-hover table-striped nowrap" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th style="display:none;">ID</th>
                                            <th>Nombre</th>
                                            <th>CUIT</th>
                                            <th>Email</th>
                                            <th>Telefono</th>
                                            <th>Reset</th>
                                            <th>Editar</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($clientes as $key => $cliente)
                                            <tr>
                                                <td style="display:none;">{{ $cliente->id }}</td>
                                                <td>{{ $cliente->name }}</td>
                                                <td>{{ $cliente->cuit }}</td>
                                                <td>{{ $cliente->email }}</td>
                                                <td>{{ $cliente->telefono }}</td>
                                                <td class="text-center"><a target="_blank" href="{{ route('administrador.usuario.resetWhap', [$cliente->id]) }}" style="color:inherit;"><i class="fab fa-whatsapp fa-lg"></i></a><br></td>
                                                <td><button class="edit-modal btn btn-info">Edit</button></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 Gestor -->
    <div class="modal fade" id="gestor" 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 Gestor</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' => 'administrador.cliente.gestor', 'method'=>'POST', 'files'=> true]) }}

                    {{ Form::label('', "Cliente", ['style'=>'font-weight: bold;']) }} *
                    {{ Form::select('user_id', $clientes->pluck('name', 'id'), null, ['required' => 'required', 'class'=>'form-control', 'placeholder'=>'Seleccione un cliente para transformar en gestor']) }}
                    <hr>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                            {{ Form::submit('Gestor', array('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>

    <!-- Modal Gestor -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Cliente</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' => ['login', 1], 'method'=>'POST', 'id'=>'editForm']) }}

                    {{ Form::label('', "Nombre *", ['style'=>'font-weight: bold;']) }}
                    {{ Form::text('name', null, ['required' => 'required', 'id'=>'name', 'class'=>'form-control']) }}
                    <br>
                    {{ Form::label('', "CUIT *", ['style'=>'font-weight: bold;']) }}
                    {{ Form::text('cuit', null, ['required' => 'required', 'id'=>'cuit', 'class'=>'form-control']) }}
                    <br>
                    {{ Form::label('', "Email *", ['style'=>'font-weight: bold;']) }}
                    {{ Form::text('email', null, ['required' => 'required', 'id'=>'email', 'class'=>'form-control']) }}
                    <br>
                    {{ Form::label('', "Telefono *", ['style'=>'font-weight: bold;']) }}
                    {{ Form::text('telefono', null, ['required' => 'required', 'id'=>'telefono', 'class'=>'form-control']) }}
                    <hr>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                            {{ Form::submit('Guardar', array('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>

    <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() {
        var table = $('#datatable').DataTable( {
            "columnDefs": [
                { "orderable": false, "targets": [2,3,4,5,6] }
            ],
            "order": [[ 0, 'asc' ]],
            "scrollX": true,
            "language": {
                "lengthMenu": "Mostrar _MENU_ por pagina",
                "zeroRecords": "No existen Registros",
                "info": "", // Mostrando Pagina _PAGE_ de _PAGES_
                "infoEmpty": "",// No existen Registros
                "infoFiltered": "", // (filtrado de _MAX_ registros)
                "search": "Buscar:",
                "paginate": {
                    "first":      "Primera",
                    "last":       "Ultima",
                    "next":       "Siguiente",
                    "previous":   "Anterior"
                },
            },
            "pageLength": 250,
            //"dom": 'f<<t>p>'
            "dom": '<"top"f>rt<"bottom"p><"clear">'
        } );

        table.on('click', '.edit-modal', function () {

            $tr = $(this).closest('tr');
            if ($($tr) .hasClass('child')) {
                $tr = $tr.prev('.parent');
            }
            var data = table.row($tr).data();

            $('#name').val(data[1]);
            $('#cuit').val(data[2]);
            $('#email').val(data[3]);
            $('#telefono').val(data[4]);

            $('#editForm').attr('action','/administrador/cliente/actualizar/'+data[0]);

        });


    } );

    </script>

    <!-- JavaScript para generar y abrir el modal de movimientos -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            const openModalButton = document.querySelector(".open-modal-button");

            openModalButton.addEventListener("click", function () {

                const modalId = openModalButton.getAttribute("data-modal-id");


                const modalContent = `
                    <div class="modal fade" id="usuarioMovimientos{{$cliente->id}}" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Movimientos <small>{{ $cliente->nombre }}</small></h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    @if(count($cliente->movimientos))
                                        <table class="table table-hover table-striped nowrap" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>Nombre</th>
                                                    <th>Medio</th>
                                                    <th>Evento</th>
                                                    <th class="text-right">Movimiento</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($cliente->movimientos as $key => $movimiento)
                                                    <tr>
                                                        <td>{{ $movimiento->nombre }}</td>
                                                        <td>{{ $movimiento->medio->nombre }}</td>
                                                        <td>{{ @$movimiento->evento->nombre }}</td>
                                                        @if($movimiento->credito != null)
                                                            <td class="text-right" style="color:green;">$ {{ number_format($movimiento->credito, 2, '.', ',') }}</td>
                                                        @elseif($movimiento->debito != null)
                                                            <td class="text-right" style="color:red;">$ {{ number_format($movimiento->debito, 2, '.', ',') }}</td>
                                                        @endif
                                                    </tr>
                                                @endforeach
                                                <tr>
                                                    <th colspan="3">Saldo</th>
                                                    @if($cliente->saldoRaw() >= 0)
                                                        <td class="text-right" style="color:green;">$ {{ $cliente->saldo() }}</td>
                                                    @else
                                                        <td class="text-right" style="color:red;">$ {{ $cliente->saldo() }}</td>
                                                    @endif
                                                </tr>
                                            </tbody>
                                        </table>
                                    @else
                                        <div><br><p class="text-center">No Existen Registros</p><br></div>
                                    @endif
                                    <hr>
                                    <form action="{{ route('administrativo.cliente.movimineto.guardar', [Hashids::encode($cliente->id, time())]) }}" method="POST">
                                        {{ csrf_field() }}
                                        <label for="nombre" style="font-weight: bold;">Nombre *</label>
                                        <input type="text" name="nombre" required class="form-control" placeholder="Ingrese el nombre del usuario">
                                        <br>
                                        <label for="credito" style="font-weight: bold;">Crédito</label>
                                        <input type="number" name="credito" class="form-control" placeholder="Ingrese el monto a acreditar">
                                        <br>
                                        <label for="debito" style="font-weight: bold;">Débito</label>
                                        <input type="number" name="debito" class="form-control" placeholder="Ingrese el monto a debitar">
                                        <br>
                                        <label for="medio_id" style="font-weight: bold;">Medio *</label>
                                        <select name="medio_id" required class="form-control" placeholder="Seleccione un medio">
                                            @foreach ($ddMedios as $medioId => $medioNombre)
                                                <option value="{{ $medioId }}">{{ $medioNombre }}</option>
                                            @endforeach
                                        </select>
                                        <br>
                                        <label for="evento_id" style="font-weight: bold;">Evento</label>
                                        <select name="evento_id" class="form-control" placeholder="Seleccione un evento">
                                            @foreach ($ddEventos as $eventoId => $eventoNombre)
                                                <option value="{{ $eventoId }}">{{ $eventoNombre }}</option>
                                            @endforeach
                                        </select>
                                        <hr>
                                        <div class="row">
                                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                                                <button type="submit" class="btn btn-success btn-block">Cargar</button>
                                            </div>
                                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                                                <a href="{{ route('administrativo.cliente.saldoWhatsApp', [Hashids::encode($cliente->id, time())]) }}" class="btn btn-warning btn-block" target="_blank">Whatsapp</a>
                                            </div>
                                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                                                <button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">Cerrar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                document.body.insertAdjacentHTML("beforeend", modalContent);

                $(`#usuarioMovimientos{{$cliente->id}}`).modal("show");
            });
        });
    </script>
    <script>
    $(document).ready(function() {
        $('#usuariosActivos').DataTable( {
            "columnDefs": [
                { "orderable": false, "targets": [1,3,4] }
            ],
            "order": [[ 1, 'asc' ]],
            "scrollX": true,
            "language": {
                "lengthMenu": "Mostrar _MENU_ por pagina",
                "zeroRecords": "No existen Registros",
                "info": "", // Mostrando Pagina _PAGE_ de _PAGES_
                "infoEmpty": "",// No existen Registros
                "infoFiltered": "", // (filtrado de _MAX_ registros)
                "search": "Buscar:",
                "paginate": {
                    "first":      "Primera",
                    "last":       "Ultima",
                    "next":       "Siguiente",
                    "previous":   "Anterior"
                },
            },
            "pageLength": 10,
            //"dom": 'f<<t>p>'
            "dom": '<"top"f>rt<"bottom"p><"clear">',
        } );


        $('.edit-modal').click(function (objeto) {

            var clienteId = objeto.currentTarget.id;

            $.ajax({
                url: '/administrativo/getCliente/' + clienteId,
                method: 'GET',
                dataType:'json',
                success: function (cliente) {
                    $('#name').val(cliente.name);
                    $('#email').val(cliente.email);
                    $('#telefono').val(cliente.telefono);

                    $('#editForm').attr('action','/administrativo/cliente/actualizar/'+ clienteId );
                },
                error: function (error) {
                    console.log(error);
                }
            });
        });

        $('.editMovimiento-modal').click(function (objeto) {
            var clienteId = objeto.currentTarget.id;

            $.ajax({
                url: '/administrativo/getMovimiento/' + clienteId,
                method: 'GET',
                dataType:'json',
                success: function (cliente) {
                    nombre= '';
                    inicio = '<table class="table table-hover table-striped nowrap" style="width:100%"> <tr> <th> Nombre </th><th class="text-center"> Medio </th><th class="text-center"> Evento </th><th class="text-right"> Movimiento </th></tr></thead><tbody>';
                    lineas = '';
                    cliente.movimientoo.forEach((movimiento) => {
                        lineas += '<tr><td>' + movimiento.nombre + '</td><td class="text-center">' + movimiento.medioo + '</td><td class="text-center">' + movimiento.eventoo + '</td>';
                         if (movimiento.credito != null) {
                            lineas += "<td class='text-right' style='color:green;'> $ " + movimiento.credito + "</td></tr>";
                         }else{
                            lineas += "<td class='text-right' style='color:red;'> $ " + movimiento.debito + "</td></tr>";
                         }
                    });
                    console.log(lineas);
                    fin = "<td colspan='3' align='left'><b> Saldo </b>";
                    if (cliente.saldoo >= 0) {
                        fin += "<td align='right' style='color:green;'>$" + cliente.saldoo + "</td></td></tbody></table>"
                    } else {
                        fin += "<td align='right' style='color:red;'>$" + cliente.saldoo + "</td></td></tbody></table>"
                    }
                    console.log(fin);
                    document.getElementById('nombre').innerHTML = "<div class='modal-header'><h5 class='modal-title'>Movimientos de "+ cliente.name + "</h5><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>";
                    document.getElementById('movimientos').innerHTML = inicio + lineas + fin;

                    $('#editFormMovimiento').attr('action','/administrativo/cliente/movimineto/guardar/'+ clienteId );
                },
                error: function (error) {
                    console.log(error);
                }
            });

        });

    } );
    </script>

 @foreach ($clientes as $cliente)

    @endsection