@extends('base')
@section('titulo')
    Clientes
@endsection
@section('extracss')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
@endsection
@section('extrajs')
    <script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#tab_clientes').DataTable({
                "language": {
                    "lengthMenu": "Mostrar _MENU_ Clientes por página",
                    "zeroRecords": "No hay files",
                    "info": "Mostrando _PAGE_ de _PAGES_ páginas",
                    "infoEmpty": "No hya páginas",
                    "infoFiltered": "(filtered from _MAX_ total records)",
                    'search': "Buscar:",
                    "paginate": {
                        "first": "Primero",
                        "last": "Ultimo",
                        "next": "Siguiente",
                        "previous": "Atrás"
                    },
                }
            });
        });
    </script>
@endsection
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Listado de clientes</li>
        </ol>
    </nav>
    {{-- @can('cliente.store') --}}
    <!-- Boton agregar cliente modal -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <button type="button" class="btn btn-primary" onclick="limpiarCampos()" data-toggle="modal" data-target="#addModal">
            Agregar cliente
        </button>
    </div>
    {{-- @endcan --}}
    <!-- Fin Boton agregar categoria modal -->
    <!-- Agregar Modal -->
    @include('cliente.modals.addClient')
    <!-- Fin Agregar Modal -->
    <!-- Mensaje Exito -->
    @include('sessions')

    <!-- Fin Mensaje Exito -->
    @if (count($clientes) > 0)
        <!-- Table -->
        <table class="table InitializeDataTable">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Nombre</th>
                    <th scope="col">Telefono</th>

                    <th scope="col">Acciones</th>
                </tr>
            </thead>
            <tbody>
                                @foreach ($clientes as $cliente)
                                        <tr>
                        <td> {{ $cliente->codigo }} </td>
                        <td> {{ $cliente->nombre_cliente }} </td>
                        <td> {{ $cliente->telefono1 }} </td>
                        <td style="display: flex;align-items: center;justify-content: space-around">

                            {{-- @can('cliente.show') --}}
                            <a class="fas fa-w fa-eye" title="Mostrar" href="{{ route('cliente.show', $cliente->id) }}"
                                style="color:gray !important@ margin-right: 12px"></a>
                            {{-- @endcan --}}

                            {{-- @can('cliente.edit_view') --}}
                            <button type="button" title="Editar" data-toggle="modal" data-target="#editModal"
                                class="fas fa-w fa-edit"
                                style="color:gray !important; background-color:transparent; border: 0px solid;"
                                onclick="fun_edit('{{ $cliente->id }}')"></button>
                            {{-- @endcan --}}
                            {{-- @can('cliente.destroy') --}}
                            <button type="button" title="Eliminar" data-toggle="modal" data-target="#deleteModal"
                                class="fas fa-w fa-trash"
                                style="color:gray !important; background-color:transparent; border: 0px solid;"
                                onclick="fun_destroy('{{ $cliente->id }}')"></button>
                            <a class="far fa-file" title="Adjuntos" href="{{ route('adjunto.index', $cliente->id) }}"
                                style="color:gray !important; margin-right: 12px"></a>
                            {{-- @endcan --}}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <!-- Fin Table -->
        <!-- Paginacion de tabla -->
        <div class="d-flex justify-content-center">
            {{-- {{ $clientes->links() }} --}}
        </div>
        <!-- Fin Paginacion de tabla-->
        <!-- Editar Modal -->

        <!-- Fin Editar Modal-->
        @include('cliente.modals.editClient')
        <!-- Eliminar Modal -->
        @include('cliente.modals.deleteCliente')
    @else
        <div class="alert alert-danger">
            <strong>¡Opps! Parece que no tienes ningun cliente registrado.</strong>
        </div>
    @endif
    <script>
        function fun_destroy(id) {

            $("#delete_idC").val(id);

        }

        function fun_edit(id) {
            var view_url = '{{ route('cliente.edit_view', ':id') }}';
            view_url = view_url.replace(':id', id);
            $.ajax({
                url: view_url,
                type: "GET",
                data: {
                    "id": id
                },
                success: function(result) {
                    console.log(result.nombre_cliente);
                    $("#edit_id").val(result.id);
                    $('#codigoE').val(result.codigo);
                    $('#clienteE').val(result.cliente);
                    $('#condicionE').val(result.condicion);
                    $('#dias_creditoE').val(result.dias_credito);
                    $('#tipo_contribuyenteE').val(result.tipo_contribuyente);
                    $('#nrcE').val(result.nrc);
                    $('#nombre_clienteE').val(result.nombre_cliente);
                    $('#direccionE').val(result.direccion);
                    $('#direccion_complementariaE').val(result.direccion_complementaria);
                    $('#ciudadE').val(result.ciudad);
                    $('#departamentoE').val(result.departamento);
                    $('#paisE').val(result.pais);
                    $('#giro_negocioE').val(result.giro_negocio);
                    $('#nitE').val(result.nit);
                    $('#contacto1E').val(result.contacto1);
                    $('#telefono1E').val(result.telefono1);
                    $('#observacion1E').val(result.observacion1);
                    $('#contacto2E').val(result.contacto2);
                    $('#telefono2E').val(result.telefono2);
                    $('#observacion2E').val(result.observacion2);
                    $('#contacto3E').val(result.contacto3);
                    $('#telefono3E').val(result.telefono3);
                    $('#observacion3E').val(result.observacion3);
                    $('#cuenta_contableE').val(result.cuenta_contable);
                    $('#tipo_documento_id').val(result.tipo_documento_id);

                    console.log(result);
                }
            });
        }
        //Limpiar los campos de la modal de traslados
        function limpiarCampos() {
            $('#nombre_cliente').val(''); //Limpiando el input
        }
    </script>
@endsection