@extends('dashboard.layouts.main')

@section('container')
    <div class="p-4 sm:ml-64">
        <div class="mt-16">
            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-12 lg:col-span-8">

                    @include('dashboard.layouts.partials.breadcumb')

                    <h2
                        class="mb-7 text-3xl font-bold leading-none tracking-tight text-gray-900 md:text-4xl dark:text-white">
                        Ticket Management
                    </h2>

                    @can('admin')
                        @include('dashboard.layouts.partials.ticketAdmin')
                    @endcan

                    @can('superadmin')
                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400" id="table">
                                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                    <tr>
                                        <th scope="col" class="px-6 py-3">No.</th>
                                        <th scope="col" class="px-6 py-3">Judul</th>
                                        <th scope="col" class="px-6 py-3 text-center">Jumlah aduan (Tiket)</th>
                                        <th scope="col" class="px-6 py-3 text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($units as $unit)
                                        <tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
                                            <th scope="row"
                                                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                                {{ $loop->index + 1 }}
                                            </th>
                                            <td class="px-6 py-4">{{ $unit->name }}</td>

                                            <td class="px-6 py-4 text-center">{{ $unit->tickets->count() ?? '' }}</td>

                                            <td><a href="/dashboard/tickets/{{ $unit->slug }}"
                                                    class="btn-link-orange mx-6">Pratinjau</a>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    @endcan

                </div>
                <div class="flex col-span-4 items-end justify-center rounded bg-transparent dark:bg-transparent h-96">
                </div>
            </div>
        </div>
    </div>
@endsection