@extends('layouts.backend.main')

@section('contents')
    <div class="table-responsive p-1">
        <table class="table table-borderless table-hover table-striped bg-white datatable">
            <thead>
                <tr>
                    <th class="text-center">No.</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Event</th>
                    <th>Attend at</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key => $item)
                    <tr>
                        <td class="text-center">{{ $key + 1 }}.</td>
                        <td>{{ $item->contact->name }}</td>
                        <td>{{ $item->contact->email }}</td>
                        <td>{{ $item->event->name }}</td>
                        <td>{{ date('d/m/Y H:i', strtotime($item->attend_at)) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

@section('headers')
    <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
        <div class="container-fluid px-4">
            <div class="page-header-content">
                <div class="row align-items-center justify-content-between pt-3">
                    <div class="col-auto mb-3">
                        <h1 class="page-header-title">
                            {{ $title }}
                        </h1>
                    </div>
                    <div class="col-auto mb-3">
                        <a class="btn btn-sm btn-light text-success" href="#">
                            <svg class="feather me-1">
                                <use xlink:href="#graph"></use>
                            </svg>
                            Export to Excel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
@endsection


@push('scripts')
    <script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.0.0/datatables.min.js"></script>
    <script>
        new DataTable('.datatable', {
            pagingType: 'full'
        });
    </script>
@endpush
@push('styles')
    <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.0.0/datatables.min.css" rel="stylesheet">
@endpush