@extends('layouts.web')

@section('content')
    <div class="mb-3 text-end">
        <a href="{{ route('admin.kuesioner.export') }}" class="btn btn-success">Download Excel</a>
    </div>
    <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" style="width:30px" 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">Role</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">Kota</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Channel</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Timestamp</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Date</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Time</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">Usia</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Pekerjaan</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Jenis Kelamin
                    </th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">No. HP</th>
                    @foreach ($field as $item)
                        <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">
                            {{ $item->ask }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key => $item)
                    <tr>
                        <td class="text-center">{{ $key + 1 }}</td>
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->team }}</td>
                        <td>{{ $item->area }}</td>
                        <td>{{ $item->kota }}</td>
                        <td>{{ $item->channel }}</td>
                        <td><a href="{{ asset('images/absen/' . $item->timestamp) }}" target="_blank">Photo</a></td>
                        <td>{{ date('d/m/Y', strtotime($item->created_at)) }}</td>
                        <td>{{ date('H:i', strtotime($item->created_at)) }}</td>
                        <td>{{ $item->nama }}</td>
                        <td>{{ $item->usia }}</td>
                        <td>{{ $item->pekerjaan }}</td>
                        <td>{{ $item->gender }}</td>
                        <td>{{ $item->hp }}</td>
                        @foreach ($field as $it)
                            <td>{{ object_get($item, "a{$it->id}") }}</td>
                        @endforeach
                    </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({
            // 'responsive': true
            // dom: 'Bfrtip',
            // buttons: [
            //     'copy', 'excel',
            //     {
            //         extend: 'pdfHtml5',
            //         orientation: 'portrait',
            //         pageSize: 'A4',
            //         exportOptions: {
            //             columns: [0, 1, 2, 3, 4]
            //         },
            //         customize: function(doc) {
            //             doc.content[1].table.widths = ['5%', '35%', '40%', '10%', '10%']
            //         }
            //     },
            //     {
            //         extend: 'print',
            //         orientation: 'portrait',
            //         pageSize: 'A4',
            //         exportOptions: {
            //             columns: [0, 1, 2, 3, 4]
            //         },
            //         customize: function(doc) {
            //             doc.content[1].table.widths = ['5%', '35%', '40%', '10%', '10%']
            //         }
            //     },
            // ]
        });
    </script>
@endpush