@extends('layouts.app')

@section('title', __('dashboard.Product Options'))
@section('page_heading', __('dashboard.Product Options'))

@section('content')
@include('layouts.partials.collection-page-styles')

<div class="collection-shell">
    <div class="collection-shell__body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-table-cells"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.All Product Options') }}</h2>
                    <p>خيارات المنتجات المستخدمة عند إنشاء الحجوزات.</p>
                </div>
            </div>
            <div class="collection-toolbar">
                <span class="collection-card__meta">{{ $options->count() }} خيار</span>
                @can('create product options')
                <a href="{{ route('dashboard.product_options.create') }}" class="app-btn app-btn--primary app-btn--sm inline-flex items-center gap-1">
                    <i class="fa-solid fa-plus"></i>{{ __('dashboard.Add New Option') }}
                </a>
                @endcan
            </div>
        </div>

        <div class="collection-card__body">
            @if($options->isEmpty())
                @include('layouts.partials.index-empty-state', [
                    'icon' => 'fa-solid fa-table-cells',
                    'title' => __('dashboard.No options found.'),
                    'message' => 'لا توجد خيارات منتجات مضافة حاليًا.'
                ])
            @else
            <div class="app-table-wrap">
                <table class="app-table app-table--striped collection-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('dashboard.Category') }}</th>
                            <th>{{ __('dashboard.Name') }}</th>
                            <th>{{ __('dashboard.Type') }}</th>
                            <th>{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($options as $opt)
                        <tr>
                            <td class="text-slate-500 dark:text-slate-400 font-bold">{{ $opt->id }}</td>
                            <td>{{ $opt->category->name ?? '—' }}</td>
                            <td class="font-bold">{{ $opt->name }}</td>
                            <td>{{ $opt->type }}</td>
                            <td>
                                @canany(['edit product options', 'delete product options'])
                                <div class="custom-dropdown">
                                    <button class="custom-dropdown__toggle" type="button">{{ __('dashboard.Actions') }}</button>
                                    <ul class="custom-dropdown__menu custom-dropdown__menu--end">
                                        @can('edit product options')
                                        <li><a href="{{ route('dashboard.product_options.edit', $opt->id) }}" class="custom-dropdown__item"><i class="fa-solid fa-pen me-2"></i>{{ __('dashboard.Edit') }}</a></li>
                                        @endcan
                                        @can('delete product options')
                                        <li>
                                            <form action="{{ route('dashboard.product_options.destroy', $opt->id) }}" method="POST">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="custom-dropdown__item custom-dropdown__item--danger" data-confirm-delete="{{ __('dashboard.Are you sure you want to delete this option?') }}">
                                                    <i class="fa-solid fa-trash me-2"></i>{{ __('dashboard.Delete') }}
                                                </button>
                                            </form>
                                        </li>
                                        @endcan
                                    </ul>
                                </div>
                                @endcanany
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection