@extends('layouts.web')

@section('content')
    <div class="table-responsive small">
        <table class="table table-striped table-bordered" id="datatable">
            <thead>
                <tr>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">No</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Nama</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Email</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">No. Handphone</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">NIK</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Area</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Sub Area</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Profiling</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Sampling</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Selling</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Kuisioner</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Gimmick</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Last Login</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key => $item)
                    <tr>
                        <td class="text-center">{{ $key + 1 }}</td>
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->email }}</td>
                        <td>{{ $item->phone }}</td>
                        <td>{{ $item->nik }}</td>
                        <td>{{ $item->area }}</td>
                        <td>{{ $item->sub_area }}</td>
                        <td class="text-end">{{ $item->sampling }}</td>
                        <td class="text-end">{{ $item->tempel }}</td>
                        <td class="text-end">{{ $item->selling }}</td>
                        <td class="text-end">{{ $item->survey }}</td>
                        <td class="text-end">{{ $item->gimmick }}</td>
                        <td class="text-end">{{ $item->updated_at }}</td>
                        <td class="text-center">
                            <a href="{{url('admin/sales/edit/' . $item->id) }}" class="text-primary me-2"><svg class="bi"><use xlink:href="#edit"></use></svg></a>
                            <a href="{{url('admin/sales/delete/' . $item->id) }}" class="text-danger"><svg class="bi"><use xlink:href="#trash"></use></svg></a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection


@push('scripts')
    <link
        href="https://cdn.datatables.net/v/bs5/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/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <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/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>
        $('#datatable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel',
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions : {
                        columns : [0,1,2, 3, 5, 6,7,8,9,10,11]
                    },
                    customize: function ( doc ) {
                        doc.content[1].table.widths = ['3%','12%','12%','10%','10%','13%','8%','8%','8%','8%','8%']
                    }
                }, 
                {
                    extend: 'print',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions : {
                        columns : [0,1,2, 3, 5, 6,7,8,9,10,11]
                    },
                    customize: function ( doc ) {
                        doc.content[1].table.widths = ['3%','12%','12%','10%','10%','13%','8%','8%','8%','8%','8%']
                    }
                },
            ]
        });
    </script>
@endpush