@extends('layouts.master')

@section('title', 'Clientes')

@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>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 Activos
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-toggle="modal" data-target="#usuarioAgregar">
                                    <i class="fas fa-plus fa-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            @if(count($clientes))
                                <table id="usuariosActivos" class="table table-hover table-striped nowrap" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Nombre</th>
                                            <th>Contacto</th>
                                            <th>Saldo</th>
                                            <th class="text-center">Moviminetos</th>
                                            <th class="text-center">Editar</th>
                                            <th class="text-center">Eliminar</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($clientes as $key => $cliente)
                                            <tr>
                                                <td>{{ $cliente->name }}</td>
                                                <td>{{ $cliente->email }}<br>{{ $cliente->telefono }}</td>
                                                <td>{{ $cliente->saldo() }}</td>
                                                <td class="text-center"><a href="#" class="editMovimiento-modal btn btn-tool" data-toggle="modal" id="{{$cliente->id}}" data-target="#editMovimiento" style="color:inherit;"><i class="fas fa-money-bill-transfer fa-lg"></i></a></td>
                                                <td class="text-center"><a href="#" class="edit-modal btn btn-tool" data-toggle="modal" id="{{$cliente->id}}" data-target="#editModal" style="color:inherit;"><i class="fas fa-edit fa-lg"></i></a></td>
                                                <td class="text-center"><a href="{{ route('administrativo.cliente.eliminar', [Hashids::encode($cliente->id, time())]) }}" onclick="return confirm('{{Auth::User()->nickname()}} estas seguro que desea eliminar a {{$cliente->name}}?');" style="color:inherit;"><i class="fas fa-trash 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 Usuario Agregar -->
    <div class="modal fade" id="usuarioAgregar" 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 Usuario</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.cliente.guardar', 'method'=>'POST', 'files'=> true]) }}

                    {{ Form::label('', "Nombre", ['style'=>'font-weight: bold;']) }} *
                    {{ Form::text('name', null, ['required' => 'required', 'class'=>'form-control', 'placeholder'=>'Ingrese el nombre del usuario']) }}
                    <br>
                    {{ Form::label('', "Email", ['style'=>'font-weight: bold;']) }}
                    {{ Form::email('email', null, ['required' => 'require','class'=>'form-control', 'placeholder'=>'Ingrese el email del usuario']) }}
                    <br>
                    {{ Form::label('', "Telefono", ['style'=>'font-weight: bold;']) }} *
                    {{ Form::text('telefono', null, ['required' => 'required', 'class'=>'form-control', 'placeholder'=>'Ingrese el telefono del usuaio. Ej: 541112341234']) }}
                    <br>
                    {{ Form::label('', "Imagen", ['style'=>'font-weight: bold;']) }} Cuadrada
                    <br>
                    {{ Form::file('img', array()) }}
                    <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>


    <!-- Modal Usuario Editar -->
    <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</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">
                    {{ Form::open(['route' => ['administrativo.cliente.actualizar', 1], 'method'=>'POST', 'id'=>'editForm']) }}

                    {{Form::label('', "Nombre *", ['style'=>'font-weight: bold;']) }}
                    {{ Form::text('name', null, ['required' => 'required','id'=>'name', 'class'=>'form-control name']) }}
                    <br>
                    {{ Form::label('', "Email", ['style'=>'font-weight: bold;']) }}
                    {{ Form::email('email', null, [ 'id'=>'email','class'=>'form-control email', 'placeholder'=>'Ingrese el email del usuario']) }}
                    <br>
                    {{ Form::label('', "Telefono", ['style'=>'font-weight: bold;']) }} *
                    {{ Form::text('telefono', null, ['required' => 'required','id'=>'telefono', 'class'=>'form-control telefono', 'placeholder'=>'Ingrese el telefono del usuario. Ej: 541112341234']) }}
                    <hr>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                            {{ Form::submit('Actualizar', 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 Usuario Moviminetos -->
        <div class="modal fade" id="editMovimiento" tabindex="-1" role="dialog" aria-labelledby="editMovimiento" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div id="nombre">

                    </div>
                    <div class="modal-body">
                        <div id="movimientos">

                        </div>
                        <hr>
                        {{ Form::open(['route' => ['administrativo.cliente.movimineto.guardar', 1], 'method'=>'POST', 'id'=>'editFormMovimiento']) }}

                        {{ Form::label('', "Nombre", ['style'=>'font-weight: bold;']) }} *
                        {{ Form::text('nombre', null, ['required' => 'required', 'class'=>'form-control', 'placeholder'=>'Ingrese el nombre del usuario']) }}
                        <br>
                        {{ Form::label('', "Credito", ['style'=>'font-weight: bold;']) }}
                        {{ Form::number('credito', null, ['class'=>'form-control', 'placeholder'=>'Ingrese el monto a acreditar']) }}
                        <br>
                        {{ Form::label('', "Debito", ['style'=>'font-weight: bold;']) }}
                        {{ Form::number('debito', null, ['class'=>'form-control', 'placeholder'=>'Ingrese el monto a debitar']) }}
                        <br>
                        {{ Form::label('', "Medio", ['style'=>'font-weight: bold;']) }} *
                        {{ Form::select('medio_id', $ddMedios, null, ['required' => 'required', 'class'=>'form-control', 'placeholder'=>'Seleccione un medio']) }}
                        <br>
                        {{ Form::label('', "Evento", ['style'=>'font-weight: bold;']) }}
                        {{ Form::select('evento_id', $ddEventos, null, ['class'=>'form-control', 'placeholder'=>'Seleccione un evento']) }}
                        <hr>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                                {{ Form::submit('Cargar', array('class'=> 'btn btn-success btn-block')) }}
                                {{ Form::close() }}
                            </div>
                            <div id="movimientoWhatsapp" class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                                {{ Html::linkRoute('administrativo.cliente.saldoWhatsApp', 'Whatsapp', Hashids::encode($cliente->id, time()), array('class' => 'btn btn-warning btn-block', 'target'=>'_blank')) }}
                            </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>
                    </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 = $('#usuariosActivos').DataTable({
            "columnDefs": [
                { "orderable": false, "targets": [1, 3, 4] }
            ],
            "order": [[1, 'asc']],
            "scrollX": true,
            "language": {
                "lengthMenu": "Mostrar MENU por página",
                "zeroRecords": "No existen Registros",
                "info": "", // Mostrando Página PAGE de PAGES
                "infoEmpty": "",// No existen Registros
                "infoFiltered": "", // (filtrado de MAX registros)
                "search": "Buscar:",
                "paginate": {
                    "first": "Primera",
                    "last": "Última",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
            },
            "pageLength": 250,
            "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) {
                    if (cliente.movimientoo.length > 0) {
                        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>";
                             }
                        });
                        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>"
                        }
                        document.getElementById('movimientoWhatsapp').innerHTML = "<a href='/administrativo/cliente/saldoWhatsApp/" + clienteId + "' class='btn btn-warning btn-block'>WhatsApp</a>";
                        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;

                    } else {
                        document.getElementById('movimientoWhatsapp').innerHTML = "<a href='/administrativo/cliente/saldoWhatsApp/" + clienteId + "' class='btn btn-warning btn-block'>WhatsApp</a>";
                        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 = "<div><br><p class='text-center'>No Existen Registros</p><br></div>";
                    }

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


        table.on('draw', function () {

            $('.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) {
                        if (cliente.movimientoo.length > 0) {
                            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>";
                                 }
                            });
                            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>"
                            }
                            document.getElementById('movimientoWhatsapp').innerHTML = "<a href='/administrativo/cliente/saldoWhatsApp/" + clienteId + "' class='btn btn-warning btn-block'>WhatsApp</a>";
                            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;

                        } else {
                            document.getElementById('movimientoWhatsapp').innerHTML = "<a href='/administrativo/cliente/saldoWhatsApp/" + clienteId + "' class='btn btn-warning btn-block'>WhatsApp</a>";
                            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 = "<div><br><p class='text-center'>No Existen Registros</p><br></div>";
                        }

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

@endsection

@section('javascript')
@endsection