@extends('layouts.app')

@section('title', 'Menu Items')

@section('content')

<style>
    .menu-page {
        padding-bottom: 40px;
    }

    .menu-thumbnail {
        width: 76px;
        height: 60px;
        object-fit: cover;
        border-radius: 14px;
        background: #e9ede7;
        display: block;
    }

    .menu-thumbnail-placeholder {
        width: 76px;
        height: 60px;
        border-radius: 14px;
        background: #e9ede7;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7b8577;
        font-size: 11px;
        font-weight: 700;
        text-align: center;
    }

    .menu-name {
        font-weight: 800;
        color: #172017;
    }

    .menu-category {
        margin-top: 4px;
        color: #7c8779;
        font-size: 14px;
    }

    .nutrition-badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .nutrition-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 9px;
        border-radius: 999px;
        background: #edf5e9;
        color: #47653f;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .nutrition-badge.warning {
        background: #fff3d6;
        color: #8a6417;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
    }

    .status-badge.available {
        background: #edf5e9;
        color: #47653f;
    }

    .status-badge.hidden {
        background: #fff3d6;
        color: #8a6417;
    }

    .price-value {
        font-weight: 800;
        color: #172017;
    }

    .menu-table-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .menu-table-actions form {
        margin: 0;
    }

    @media (max-width: 900px) {
        .table-wrapper {
            overflow-x: auto;
        }

        table {
            min-width: 950px;
        }
    }
</style>

<div class="container menu-page">

    <div class="page-heading">
        <div>
            <div class="eyebrow">
                Restaurant Menu
            </div>

            <h1>
                Menu Items
            </h1>

            <p>
                Add food and drinks, manage ingredients and publish nutrition information.
            </p>
        </div>

        <a
            class="btn btn-primary"
            href="{{ route('dashboard.menu-items.create') }}"
        >
            + Add Menu Item
        </a>
    </div>


    @if(session('success'))
        <div
            style="
                margin-bottom:20px;
                padding:14px 18px;
                background:#edf5e9;
                color:#3f6338;
                border-radius:12px;
                font-weight:700;
            "
        >
            {{ session('success') }}
        </div>
    @endif


    <div class="card table-card">

        <div class="table-wrapper">

            <table>

                <thead>
                    <tr>
                        <th>Photo</th>
                        <th>Menu Item</th>
                        <th>Nutrition</th>
                        <th>Price</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>

                    @forelse($items as $item)

                        <tr>

                            {{-- PHOTO --}}
                            <td>

                                @php
                                    /*
                                    |--------------------------------------------------------------------------
                                    | Image Support
                                    |--------------------------------------------------------------------------
                                    |
                                    | Supports:
                                    |
                                    | 1. Online URL
                                    | https://images.unsplash.com/...
                                    |
                                    | 2. Laravel uploaded image
                                    | menu-items/chicken.jpg
                                    |
                                    */

                                    $photo = $item->image ?? $item->photo ?? null;

                                    if ($photo) {

                                        if (
                                            \Illuminate\Support\Str::startsWith(
                                                $photo,
                                                ['http://', 'https://']
                                            )
                                        ) {
                                            $photoUrl = $photo;
                                        } else {
                                            $photoUrl = asset(
                                                'storage/' . ltrim($photo, '/')
                                            );
                                        }

                                    } else {
                                        $photoUrl = null;
                                    }
                                @endphp


                                @if($photoUrl)

                                    <img
                                        class="menu-thumbnail"
                                        src="{{ $photoUrl }}"
                                        alt="{{ $item->name }}"
                                        loading="lazy"
                                        onerror="
                                            this.style.display='none';
                                            this.nextElementSibling.style.display='flex';
                                        "
                                    >

                                    <div
                                        class="menu-thumbnail-placeholder"
                                        style="display:none;"
                                    >
                                        No photo
                                    </div>

                                @else

                                    <div class="menu-thumbnail-placeholder">
                                        No photo
                                    </div>

                                @endif

                            </td>


                            {{-- MENU ITEM --}}
                            <td>

                                <div class="menu-name">
                                    {{ $item->name }}
                                </div>

                                <div class="menu-category">

                                    @if($item->category)

                                        {{ $item->category->name }}

                                    @else

                                        No category

                                    @endif

                                </div>

                            </td>


                            {{-- NUTRITION --}}
                            <td>

                                @if($item->nutrition_calculated)

                                    <div class="nutrition-badges">

                                        <span class="nutrition-badge">

                                            {{ number_format(
                                                (float) $item->calories,
                                                0
                                            ) }}

                                            kcal

                                        </span>


                                        <span class="nutrition-badge">

                                            {{ number_format(
                                                (float) $item->protein,
                                                1
                                            ) }}

                                            g protein

                                        </span>


                                        @if($item->carbs !== null)

                                            <span class="nutrition-badge">

                                                {{ number_format(
                                                    (float) $item->carbs,
                                                    1
                                                ) }}

                                                g carbs

                                            </span>

                                        @endif


                                        @if($item->fat !== null)

                                            <span class="nutrition-badge">

                                                {{ number_format(
                                                    (float) $item->fat,
                                                    1
                                                ) }}

                                                g fat

                                            </span>

                                        @endif

                                    </div>

                                @else

                                    <span class="nutrition-badge warning">

                                        Not calculated

                                    </span>

                                @endif

                            </td>


                            {{-- PRICE --}}
                            <td>

                                <span class="price-value">

                                    {{ optional(auth()->user()->restaurant)->currency ?? '$' }}

                                    {{ number_format(
                                        (float) $item->price,
                                        2
                                    ) }}

                                </span>

                            </td>


                            {{-- STATUS --}}
                            <td>

                                @if($item->is_available)

                                    <span class="status-badge available">
                                        Available
                                    </span>

                                @else

                                    <span class="status-badge hidden">
                                        Hidden
                                    </span>

                                @endif

                            </td>


                            {{-- ACTIONS --}}
                            <td>

                                <div class="menu-table-actions">

                                    <a
                                        class="btn btn-primary btn-sm"
                                        href="{{ route(
                                            'dashboard.menu-items.ingredients.edit',
                                            $item
                                        ) }}"
                                    >
                                        Ingredients
                                    </a>


                                    <a
                                        class="btn btn-light btn-sm"
                                        href="{{ route(
                                            'dashboard.menu-items.edit',
                                            $item
                                        ) }}"
                                    >
                                        Edit
                                    </a>


                                    <form
                                        method="POST"
                                        action="{{ route(
                                            'dashboard.menu-items.toggle',
                                            $item
                                        ) }}"
                                    >

                                        @csrf
                                        @method('PATCH')

                                        <button
                                            type="submit"
                                            class="btn btn-dark btn-sm"
                                        >
                                            {{ $item->is_available
                                                ? 'Hide'
                                                : 'Show'
                                            }}
                                        </button>

                                    </form>


                                    <form
                                        method="POST"
                                        action="{{ route(
                                            'dashboard.menu-items.destroy',
                                            $item
                                        ) }}"
                                        onsubmit="
                                            return confirm(
                                                'Delete this menu item?'
                                            )
                                        "
                                    >

                                        @csrf
                                        @method('DELETE')

                                        <button
                                            type="submit"
                                            class="btn btn-danger btn-sm"
                                        >
                                            Delete
                                        </button>

                                    </form>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="6"
                                style="
                                    padding:40px;
                                    text-align:center;
                                    color:#7c8779;
                                "
                            >

                                No menu items yet.

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>


    @if(method_exists($items, 'links'))

        <div style="margin-top:20px;">
            {{ $items->links() }}
        </div>

    @endif

</div>

@endsection