@extends('layouts.app')

@section('content')
  <div class="panel-body">
    <h4>Clientes</h4>
    <span>Total: {{count($data)}}</span>
    <table id="tabla"  class="table table-striped table-bordered dtr-inline dt-responsive" styles="" cellspacing="0">
        <thead>
            <tr>
                <th class="" scope="col">N° Cliente</th>
                <th class="" scope="col">Nombre</th>
                <th class="" scope="col">Telefono 1</th>
                <th class="" scope="col">Telefono 2</th>
                <th class="" scope="col">Telefono 3</th>
                <th class="" scope="col">Telefono 4</th>
                <th class="" scope="col">Email</th>
                <th class="" scope="col">Direccion</th>
            </tr>
        </thead>
        <tbody id = "tablaBody">
            @foreach($data as $item)
                <tr>
                    <td>{{$item->code}}</td>
                    <td>{{$item->fullName}}</td>
                    <td>{{$item->phone}}</td>
                    <td>{{$item->phone}}</td>
                    <td>{{$item->phone3}}</td>
                    <td>{{$item->phone4}}</td>
                    <td>{{$item->email}}</td>
                    <td>{{$item->address}}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
  </div>
@endsection

@section('scripts')
    <script src="/js/dataTables-buttons.min.js"></script>
    <script src="/js/buttons-html5.min.js"></script>
    <script src="/js/jszip.min.js"></script>
    <script src="/js/pdfmake.min.js"></script>
    <script src="/js/buttons.print.min.js"></script>
    <script src="/js/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min.js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" type="text/css" href="/cdn/slickloader/slickLoader.css">
    <script src="/cdn/slickloader/slickLoader.js"></script>
@endsection