@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>Status</th>
                    <th>Invited 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>
                            <span class="badge {{ $item->invited ? 'bg-success' : 'bg-danger' }}">
                                @if (!$item->invited)
                                    <a href="{{ url('invitation/resend/' . $item['id']) }}"
                                        class="btn-link text-success small text-light text-decoration-none">
                                        Un Sent
                                        <svg class="feather ms-2 text-light">
                                            <use xlink:href="#refresh"></use>
                                        </svg>
                                    </a>
                                @else
                                    Sent
                                @endif
                            </span>
                        </td>
                        <td>{{ date('d/m/Y H:i', strtotime($item->invited_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 me-2" href="#">
                            <svg class="feather me-1">
                                <use xlink:href="#graph"></use>
                            </svg>
                            Export to Excel
                        </a>
                        <a class="btn btn-sm btn-light text-primary" href="{{ route('invitation.new') }}">
                            <svg class="feather me-1">
                                <use xlink:href="#plus"></use>
                            </svg>
                            Create New
                        </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