@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Event'])
    <div class="container">
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h4>Event</h4>
                <a href="{{route('event-add')}}" class="btn btn-primary text-end"><i class="fa-solid fa-plus mx-2"></i>Add
                    Event</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="myTable1">
                        <thead>
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">Event Name</th>
                                <th class="text-center">Event Date</th>
                                <th class="text-center">Remarks</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($event as $data)
                                <tr>
                                    <td class="text-center">{{ $loop->iteration}}</td>
                                    <td class="text-center">{{$data->event_name ?? ''}}</td>
                                    <td class="text-center">{{$data->event_date ?? ''}}</td>
                                    <td class="text-center">{{$data->remarks ?? ''}}</td>
                                    <td class="text-center">
                                        <a href="{{route('event-edit', ['id' => $data->id])}}" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="Edit">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="{{route('event-expense', ['id' => $data->id])}}" class="ms-2"
                                            data-bs-toggle="tooltip" data-bs-placement="top" title="Expenses">
                                            <i class="fa-solid fa-wallet"></i>
                                        </a>
                                        <a href="{{route('event-revenue', ['id' => $data->id])}}" class="ms-2"
                                            data-bs-toggle="tooltip" data-bs-placement="top" title="Revenue">
                                            <i class="fa-solid fa-hand-holding-dollar"></i>
                                        </a>
                                        <a href="{{route('event-delete', ['id' => $data->id])}}" class="ms-2"
                                            data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
@endpush