@extends('restaurant.layouts.app')

@section('title', __('restaurant.my_menu'))

@section('styles')
    <style>
        .resto-menu-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
        .resto-menu-search { display:flex; gap:8px; }
        .resto-menu-search input { border:1px solid #ddd; border-radius:10px; padding:10px 14px; min-width:220px; }

        /* Sur mobile, le bouton passe sous la zone de recherche, en pleine largeur. */
        @media (max-width: 767px) {
            .resto-menu-search { flex-direction:column; align-items:stretch; }
            .resto-menu-search input { min-width:0; width:100%; }
            .resto-menu-search button { width:100%; }
        }

        .resto-menu-table { width:100%; border-collapse:collapse; }
        .resto-menu-table th, .resto-menu-table td { padding:14px 12px; border-bottom:1px solid #eee; text-align:left; vertical-align:middle; }
        .resto-menu-table th { font-size:13px; text-transform:uppercase; color:#888; }
        .resto-menu-thumb { width:56px; height:56px; object-fit:cover; border-radius:50%; border:1px solid #eee; }
        .resto-menu-thumb-empty { width:56px; height:56px; border-radius:50%; background:#f3f3f3; display:flex; align-items:center; justify-content:center; color:#bbb; }
        .resto-badge-on { color:#1c7a3f; font-weight:600; }
        .resto-badge-off { color:#a12626; font-weight:600; }
        .resto-actions { display:flex; gap:8px; }
        .resto-actions a, .resto-actions button { border:none; border-radius:8px; padding:7px 12px; font-size:13px; cursor:pointer; text-decoration:none; }
        .resto-edit { background:#111; color:#C3AD66; }
        .resto-delete { background:#fbe9e9; color:#a12626; }
    </style>
@endsection

@section('content')
    <div class="sm-page">
        <div class="sm-card">
            <div class="resto-menu-toolbar">
                <div>
                    <h3>{{ __('restaurant.my_menu') }}</h3>
                    <p class="sm-lead" style="margin:0;">{{ __('restaurant.menu_list_intro') }}</p>
                </div>
                <a href="{{ route('restaurant.menu.create') }}" class="rts-btn btn-primary">+ {{ __('restaurant.add_dish') }}</a>
            </div>

            @if(session('success'))
                <div class="sm-alert-success">{{ session('success') }}</div>
            @endif

            <form action="{{ route('restaurant.menu.index') }}" method="GET" class="resto-menu-search" style="margin-bottom:18px;">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('restaurant.menu_search_placeholder') }}">
                <button type="submit" class="rts-btn btn-primary">{{ __('restaurant.search') }}</button>
            </form>

            @if($items->isEmpty())
                <p style="color:#888;">{{ __('restaurant.no_dish') }}</p>
            @else
                <div style="overflow-x:auto;">
                    <table class="resto-menu-table">
                        <thead>
                            <tr>
                                <th>{{ __('restaurant.dish_photo') }}</th>
                                <th>{{ __('restaurant.dish_name') }}</th>
                                <th>{{ __('restaurant.dish_category') }}</th>
                                <th>{{ __('restaurant.dish_price') }}</th>
                                <th>{{ __('restaurant.dish_availability') }}</th>
                                <th>{{ __('restaurant.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($items as $item)
                                <tr>
                                    <td>
                                        @php $thumb = $item->firstPhotoPath(); @endphp
                                        @if($thumb)
                                            <img class="resto-menu-thumb" src="{{ asset('storage/' . $thumb) }}" alt="{{ $item->name }}">
                                        @else
                                            <span class="resto-menu-thumb-empty"><i class="fa-light fa-utensils"></i></span>
                                        @endif
                                    </td>
                                    <td>{{ $item->name }}</td>
                                    <td>{{ $item->category }}</td>
                                    <td>{{ number_format($item->price, 2, ',', ' ') }} {{ $item->currency }}</td>
                                    <td>
                                        @if($item->is_available)
                                            <span class="resto-badge-on">{{ __('restaurant.available') }}</span>
                                        @else
                                            <span class="resto-badge-off">{{ __('restaurant.unavailable') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="resto-actions">
                                            <a class="resto-edit" href="{{ route('restaurant.menu.edit', $item) }}">{{ __('restaurant.edit') }}</a>
                                            <form action="{{ route('restaurant.menu.destroy', $item) }}" method="POST"
                                                  onsubmit="return confirm('{{ __('restaurant.confirm_delete') }}');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="resto-delete">{{ __('restaurant.delete') }}</button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

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