@extends('layouts.admin')

@section('title', 'Meals')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1">Meals</h1>

        <p class="text-muted mb-0">
            Manage meals, pricing, availability, allergens, and add-ons.
        </p>
    </div>

    <a
        href="{{ route('admin.meals.create') }}"
        class="btn btn-primary-custom"
    >
        <i class="bi bi-plus-lg"></i>
        Add Meal
    </a>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Meal</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Weight</th>
                        <th>Add-ons</th>
                        <th>Allergens</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($meals as $meal)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-3">
                                    <img
                                        src="{{ $meal->image_url }}"
                                        alt="{{ $meal->name }}"
                                        width="65"
                                        height="65"
                                        class="rounded meal-thumbnail"
                                    >

                                    <div>
                                        <strong>{{ $meal->name }}</strong>

                                        @if ($meal->is_featured)
                                            <span class="badge text-bg-warning">
                                                Featured
                                            </span>
                                        @endif

                                        <div class="small text-muted">
                                            {{ $meal->short_description }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td>{{ $meal->category->name }}</td>

                            <td>£{{ number_format($meal->base_price, 2) }}</td>

                            <td>{{ number_format($meal->weight_kg, 3) }} kg</td>

                            <td>{{ $meal->addons_count }}</td>

                            <td>{{ $meal->allergens_count }}</td>

                            <td>
                                @if ($meal->is_available)
                                    <span class="badge text-bg-success">
                                        Available
                                    </span>
                                @else
                                    <span class="badge text-bg-danger">
                                        Sold Out
                                    </span>
                                @endif
                            </td>

                            <td class="text-end">
                                <a
                                    href="{{ route('admin.meals.show', $meal) }}"
                                    class="btn btn-sm btn-outline-info"
                                >
                                    View
                                </a>

                                <a
                                    href="{{ route('admin.meals.edit', $meal) }}"
                                    class="btn btn-sm btn-outline-primary"
                                >
                                    Edit
                                </a>

                                <form
                                    method="POST"
                                    action="{{ route(
                                        'admin.meals.destroy',
                                        $meal
                                    ) }}"
                                    class="d-inline delete-meal-form"
                                >
                                    @csrf
                                    @method('DELETE')

                                    <button
                                        type="submit"
                                        class="btn btn-sm btn-outline-danger"
                                    >
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5">
                                No meals have been created.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{ $meals->links() }}
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('.delete-meal-form').on('submit', function (event) {
        event.preventDefault();

        const form = this;

        Swal.fire({
            title: 'Delete meal?',
            text: 'Its add-ons and allergen associations will also be removed.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it',
            cancelButtonText: 'Cancel'
        }).then(function (result) {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
});
</script>
@endpush