@extends('layouts.web')

@section('content')
    <div class="mb-3 text-end">
        <a href="{{ route('admin.absen.export') }}" class="btn btn-success">Download Excel</a>
    </div>
    <div class="table-responsive small">
        <table class="table table-striped table-bordered w-100" 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">Email</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">Location</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">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">Profiling &
                        Kuesioner</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Photo</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->team }}</td>
                        <td>{{ $item->area }}</td>
                        <td>{{ $item->kota }}</td>
                        <td>{{ $item->channel }}</td>
                        <td><a href="https://www.google.com/maps/search/?api=1&query={{ $item->location }}"
                                target="_blank">Map</a></td>
                        <td>{{ date('d/m/Y', strtotime($item->date)) }}</td>
                        <td>{{ date('H:i', strtotime($item->date)) }}</td>
                        <td>{{ $item->sampling }}</td>
                        <td>{{ $item->selling }}</td>
                        <td>{{ $item->profile }}</td>
                        <td><a href="{{ url('images/absen/' . $item->photo) }}" target="_blank">Photo</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection


@push('scripts')
    <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>
    <link href="https://cdn.datatables.net/v/bs5/dt-1.13.10/r-2.5.0/datatables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/v/bs5/dt-1.13.10/r-2.5.0/datatables.min.js"></script>
    <script>
        $('#datatable').DataTable();
    </script>
@endpush