@extends('layouts/admin')

@section('content')
    <div class="table-responsive mb-3">
        <table class="table table-striped table-bordered w-100" id="datatable" width="100%">
            <thead>
                <tr class="table-secondary">
                    <th>No</th>
                    <th>Nama</th>
                    <th>Alamat</th>
                    <th>No. Handphone</th>
                    <th>Gender</th>
                    <th>Usia</th>
                    <th>Pekerjaan</th>
                    <th>SPG</th>
                    <th>Area</th>
                    <th>Sub Area</th>
                    <th>Selling</th>
                    <th>Foto</th>
                    <th>Tempel</th>
                    <th>Massage</th>
                    <th>Gimmick</th>
                    <th>Survey</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key => $item)
                <tr>
                    <td class="text-center">{{ $key + 1 }}</td>
                    <td>{{ $item->name }}</td>
                    <td>{{ $item->address }}</td>
                    <td>{{ $item->phone }}</td>
                    <td>{{ $item->gender }}</td>
                    <td>{{ $item->age }}</td>
                    <td>{{ $item->job }}</td>
                    <td>{{ $item->sales }}</td>
                    <td>{{ $item->area }}</td>
                    <td>{{ $item->sub_area }}</td>
                    <td>{{ $item->selling }}</td>
                    <td>{{ $item->photo }}</td>
                    <td>{{ $item->exp_tempel }}</td>
                    <td>{{ $item->exp_massage }}</td>
                    <td>{{ $item->gimmick }}</td>
                    <td>{{ $item->survey }}</td>
                    <td class="text-center">
                        <a href="{{url('admin/reporting/' . $item->id) }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-task" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M2 2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5zM3 3H2v1h1z"/>
  <path d="M5 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M5.5 7a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 4a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z"/>
  <path fill-rule="evenodd" d="M1.5 7a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5zM2 7h1v1H2zm0 3.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm1 .5H2v1h1z"/>
</svg>
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection


@push('scripts')
    <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/r-2.5.0/datatables.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/r-2.5.0/datatables.min.js"></script>
    <script>
        function getTableDimension(){
            return {
                width : parseInt($('#datatable').width()),
                height : parseInt($('#datatable').width() / 2)
            }
        }
        let dimmension = getTableDimension();
        const table = $('#datatable').DataTable({
            "columnDefs": [{
                "visible": false,
                "width":"5%",
                "targets": [11,12,13,14,15]
            }],
            dom :   "<'row'<'col-sm-12 col-md-3'l><'col-sm-12 col-md-6'B><'col-sm-12 col-md-3'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                'copy', 
                'excel', 
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions : {
                        columns : [0,1,2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]
                    },
                    customize: function ( doc ) {
                        doc.content[1].table.widths = ['3%','7%','7%','7%', '7%', '3%', '7%','7%','7%','7%','7%','7%','7%','7%','7%']
                    }
                }, 
                {
                    extend: 'print',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions : {
                        columns : [0,1,2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15]
                    },
                },
            ]
        });
    </script>
@endpush