@extends('layouts.app')

@section('title', $prestataire->business_name . ' - Menu')

@push('styles')
<style>
/* ===== CSS VARIABLES ===== */
:root {
    --primary: #f97316;
    --primary-dark: #ea580c;
    --accent: #10b981;
    --bg-page: #f8fafc;
    --bg-white: #ffffff;
    --bg-muted: #f1f5f9;
    --text-dark: #0f172a;
    --text-body: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1);
}

/* ===== DARK MODE - Plus lisible et pro ===== */
.dark {
    --primary: #fb923c;
    --primary-dark: #f97316;
    --accent: #34d399;
    --bg-page: #0c0c0c;
    --bg-white: #161616;
    --bg-muted: #1f1f1f;
    --text-dark: #ffffff;
    --text-body: #e5e5e5;
    --text-muted: #a3a3a3;
    --border: #2a2a2a;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.5);
}

/* Dark mode specific overrides */
.dark .menu-header {
    background: linear-gradient(180deg, #161616 0%, #0c0c0c 100%);
    border-bottom: 1px solid #252525;
}

.dark .cat-bar {
    background: #121212;
    border-bottom: 1px solid #252525;
}

.dark .cat-btn {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
}

.dark .cat-btn:hover {
    background: #252525;
    border-color: #333;
}

.dark .cat-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, #ea580c 100%);
    border-color: transparent;
}

.dark .cat-btn .name {
    color: #d4d4d4;
}

.dark .cat-btn .count {
    background: #2a2a2a;
    color: #a3a3a3;
}

.dark .product-card {
    background: #161616;
    border: 1px solid #252525;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark .product-card:hover {
    border-color: #333;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dark .product-img {
    background: #1a1a1a;
}

.dark .product-img-placeholder {
    background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
}

.dark .product-name {
    color: #ffffff;
}

.dark .product-desc {
    color: #a3a3a3;
}

.dark .product-time {
    background: #1f1f1f;
    color: #a3a3a3;
    border: 1px solid #2a2a2a;
}

.dark .btn-add {
    background: linear-gradient(135deg, var(--primary) 0%, #ea580c 100%);
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.25);
}

.dark .btn-add:hover {
    box-shadow: 0 6px 16px rgba(251, 146, 60, 0.35);
}

.dark .product-customizer {
    background: #1f1f1f;
    border-color: #2a2a2a;
}

.dark .product-customizer-badge {
    background: rgba(251, 146, 60, 0.18);
    color: #fdba74;
}

.dark .product-option-label,
.dark .product-config-hint {
    color: #d4d4d4;
}

.dark .product-option-required,
.dark .product-option-limit {
    background: #2a2a2a;
    color: #f3f4f6;
}

.dark .product-option-select,
.dark .product-note-input {
    background: #161616;
    border-color: #2a2a2a;
    color: #f3f4f6;
}

.dark .product-option-choice {
    background: #161616;
    border-color: #2a2a2a;
    color: #d4d4d4;
}

.dark .product-form-feedback {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.dark .product-modal-dialog {
    background: #161616;
    border-color: #2a2a2a;
}

.dark .product-modal-close {
    background: rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
}

.dark .product-modal-category {
    background: rgba(255, 255, 255, 0.08);
    color: #d4d4d4;
}

.dark .product-modal-pricing {
    background: rgba(251, 146, 60, 0.12);
}

.dark .product-modal-base {
    color: #d4d4d4;
}

.dark .product-modal-cancel {
    background: #1f1f1f;
    color: #d4d4d4;
    border: 1px solid #2a2a2a;
}

.dark .product-modal-actions {
    background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, #161616 18%, #161616 100%);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.dark .btn-login {
    background: #1f1f1f;
    color: #d4d4d4;
    border: 1px solid #2a2a2a;
}

.dark .btn-login:hover {
    background: #252525;
    border-color: #333;
}

.dark .empty-state {
    background: #161616;
    border-color: #2a2a2a;
}

.dark .cart-float-inner {
    background: linear-gradient(135deg, var(--primary) 0%, #ea580c 100%);
    box-shadow: 0 8px 30px rgba(251, 146, 60, 0.3);
}

.dark .cart-float-inner:hover {
    box-shadow: 0 12px 40px rgba(251, 146, 60, 0.4);
}

.dark .resto-logo {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.dark .resto-status {
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.dark .btn-header-outline {
    background: #1f1f1f;
    color: #d4d4d4;
    border: 1px solid #2a2a2a;
}

.dark .btn-header-outline:hover {
    background: #252525;
    border-color: #333;
}

.dark .btn-header-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #ea580c 100%);
}

.dark .btn-back {
    background: #1f1f1f;
    border: 1px solid #2a2a2a;
    color: #d4d4d4;
}

.dark .btn-back:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ===== BASE ===== */
.food-menu {
    min-height: 100vh;
    background: var(--bg-page);
    padding-bottom: 90px;
}

/* ===== HEADER COMPACT ===== */
.menu-header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
}
.menu-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-back {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-body);
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-back:hover {
    background: var(--primary);
    color: white;
}
.btn-back svg {
    width: 16px;
    height: 16px;
}
.resto-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    overflow: hidden;
    flex-shrink: 0;
}
.resto-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.resto-details {
    flex: 1;
    min-width: 0;
}
.resto-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.resto-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 600;
}
.resto-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.resto-status.closed {
    color: #dc2626;
}
.resto-status.closed::before {
    background: #dc2626;
}
.resto-closed-alert {
    margin: 10px 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #991b1b;
    font-size: 0.82rem;
    font-weight: 600;
}
.header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.btn-header {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.btn-header i {
    font-size: 0.8rem;
}
.btn-header-outline {
    background: var(--bg-muted);
    color: var(--text-body);
}
.btn-header-outline:hover {
    background: var(--border);
}
.btn-header-primary {
    background: var(--primary);
    color: white;
}
.btn-header-primary:hover {
    background: var(--primary-dark);
}

/* ===== CATEGORIES COMPACT ===== */
.cat-bar {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.cat-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cat-bar-inner::-webkit-scrollbar { display: none; }
.cat-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--bg-muted);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.cat-btn:hover {
    background: var(--border);
}
.cat-btn.active {
    background: var(--primary);
    color: white;
}
.cat-btn .icon { font-size: 0.9rem; }
.cat-btn .name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
}
.cat-btn.active .name { color: white; }
.cat-btn .count {
    background: var(--border);
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
}
.cat-btn.active .count {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* ===== SWIPE PANELS ===== */
.panels-container {
    overflow: hidden;
}
.panels-track {
    display: flex;
    transition: transform 0.35s ease;
}
.panel {
    flex: 0 0 100%;
    padding: 12px;
}
.panel-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ===== PRODUCT GRID COMPACT ===== */
.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* ===== PRODUCT CARD COMPACT ===== */
.product-card {
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.2s;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: row;
    min-height: 110px;
}
.product-card-clickable {
    cursor: pointer;
}
.product-card:hover {
    box-shadow: var(--shadow-lg);
}
.product-card-clickable:hover {
    border-color: rgba(249, 115, 22, 0.32);
}
.product-card-clickable:focus-visible {
    outline: 2px solid rgba(249, 115, 22, 0.36);
    outline-offset: 2px;
    border-color: rgba(249, 115, 22, 0.42);
}
.product-img {
    width: 110px;
    min-height: 110px;
    background: var(--bg-muted);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background: linear-gradient(135deg, var(--bg-muted), var(--border));
}
.product-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--primary);
    color: white;
}
.product-info {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.product-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.product-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-price {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}
.product-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0;
}
.product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.product-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.product-time i { 
    color: var(--primary); 
    font-size: 0.65rem;
}
.btn-add {
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--primary);
    border: none;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.btn-add:hover {
    background: var(--primary-dark);
}
.btn-add.added {
    background: var(--accent);
}
.btn-add i {
    font-size: 0.7rem;
}
.product-config-hint {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.product-config-hint:hover {
    color: var(--primary-dark);
}
.product-config-hint-static {
    cursor: default;
    color: var(--text-muted);
}
.product-config-hint-static:hover {
    color: var(--text-muted);
}
.product-customizer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.product-customizer-title {
    color: var(--text-dark);
    font-size: 0.73rem;
    font-weight: 700;
}
.product-customizer-badge {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary);
    font-size: 0.62rem;
    font-weight: 700;
}
.product-option-group + .product-option-group {
    margin-top: 8px;
}
.product-option-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--text-body);
    font-size: 0.7rem;
    font-weight: 700;
}
.product-option-required,
.product-option-limit {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-body);
    font-size: 0.6rem;
    font-weight: 700;
}
.product-option-select,
.product-note-input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-dark);
    padding: 8px 10px;
    font-size: 0.72rem;
}
.product-option-select:focus,
.product-note-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.12);
}
.product-option-choices {
    display: grid;
    gap: 6px;
}
.product-option-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-white);
    padding: 8px 10px;
    color: var(--text-body);
    font-size: 0.7rem;
}
.product-option-choice input {
    margin-top: 2px;
}
.product-option-choice strong {
    color: var(--primary);
    font-weight: 700;
}
.product-note-input {
    margin-top: 8px;
    resize: vertical;
}
.product-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
}
.btn-customize {
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary);
}
.btn-customize:hover {
    background: rgba(249, 115, 22, 0.2);
}
.product-form-feedback {
    margin-top: 8px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 600;
}
.product-form-feedback.hidden {
    display: none;
}
.product-customizer {
    padding: 12px;
    border-radius: 14px;
    background: rgba(249, 115, 22, 0.06);
    border: 1px solid rgba(249, 115, 22, 0.16);
}
.btn-login {
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--bg-muted);
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}
.btn-login:hover {
    background: var(--border);
}

/* ===== EMPTY STATE ===== */
.empty-state {
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-white);
    border-radius: 12px;
    border: 2px dashed var(--border);
}
.empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}
.empty-state .text {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ===== FLOATING CART COMPACT ===== */
.cart-float {
    position: fixed;
    bottom: 16px;
    left: 12px;
    right: 12px;
    max-width: 400px;
    margin: 0 auto;
    z-index: 200;
}
.cart-float-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary);
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: white;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
    transition: all 0.2s;
}
.cart-float-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5);
}
.cart-float-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cart-float-icon {
    font-size: 1.1rem;
}
.cart-float-text {
    font-weight: 700;
    font-size: 0.85rem;
}
.cart-float-count {
    font-size: 0.7rem;
    opacity: 0.9;
}
.cart-float-total {
    background: rgba(255,255,255,0.2);
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.85rem;
}

/* ===== MODAL PERSONNALISATION ===== */
.product-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.product-modal.hidden {
    display: none;
}
.product-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(5px);
}
.product-modal-dialog {
    position: relative;
    width: min(640px, 100%);
    max-height: min(94vh, calc(100dvh - 24px));
    overflow: hidden;
    border-radius: 24px;
    background: var(--bg-white);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(255,255,255,0.4);
    display: flex;
    flex-direction: column;
}
.product-modal-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.product-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.product-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.product-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.product-modal-header {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    margin-bottom: 16px;
    padding-right: 42px;
}
.product-modal-media {
    width: 100%;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-muted);
}
.product-modal-media img,
.product-modal-placeholder {
    width: 100%;
    height: 100%;
}
.product-modal-media img {
    object-fit: cover;
}
.product-modal-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
}
.product-modal-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.product-modal-category,
.product-modal-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}
.product-modal-category {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-body);
}
.product-modal-badge {
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary);
}
.product-modal-title {
    color: var(--text-dark);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
}
.product-modal-description {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}
.product-modal-pricing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(249, 115, 22, 0.08);
}
.product-modal-base {
    color: var(--text-body);
    font-size: 0.82rem;
    font-weight: 600;
}
.product-modal-total {
    color: var(--primary);
    font-size: 1.08rem;
    font-weight: 800;
}
.product-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    position: sticky;
    bottom: -20px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, var(--bg-white) 18%, var(--bg-white) 100%);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.product-modal-cancel {
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: var(--bg-muted);
    color: var(--text-body);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.product-modal-submit {
    justify-content: center;
    min-width: 190px;
}
body.customizer-open {
    overflow: hidden;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .btn-header span {
        display: none;
    }
    .btn-header {
        padding: 8px 10px;
    }
    .product-modal {
        padding: 0;
        align-items: flex-end;
    }
    .product-modal-dialog {
        width: 100%;
        max-height: min(96vh, 100dvh);
        border-radius: 24px 24px 0 0;
    }
    .product-modal-scroll {
        padding: 18px 16px 22px;
    }
    .product-modal-header {
        grid-template-columns: 1fr;
        padding-right: 0;
    }
    .product-modal-media {
        height: 190px;
    }
    .product-modal-close {
        top: 10px;
        right: 10px;
    }
    .product-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        bottom: -18px;
    }
    .product-modal-submit,
    .product-modal-cancel {
        width: 100%;
    }
}

@media (min-width: 640px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-card {
        flex-direction: column;
        height: auto;
    }
    .product-img {
        width: 100%;
        height: 140px;
    }
    .product-info {
        padding: 12px;
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .menu-header {
        padding: 14px 20px;
    }
    .resto-logo {
        width: 50px;
        height: 50px;
    }
    .resto-name {
        font-size: 1.15rem;
    }
}
</style>
@endpush

@section('content')
@php
    $emojis = [
        'entree' => '🥗', 'plat' => '🍝', 'dessert' => '🍰', 'boisson' => '🥤',
        'amuse_bouche' => '🧆', 'gateau' => '🎂', 'pizza' => '🍕', 'sandwich' => '🥪',
        'salade' => '🥗', 'burger' => '🍔', 'autre' => '🍴'
    ];
    $totalProducts = 0;
    foreach($products as $items) {
        $totalProducts += $items->count();
    }
    $isFoodOpen = (bool) ($prestataire->food_is_open ?? true);
    $restaurantAvatar = $prestataire->profile_photo
        ?? $prestataire->photo
        ?? $prestataire->profile_image
        ?? $prestataire->foodProducts->pluck('image')->filter()->first()
        ?? $prestataire->user?->profile_photo_url
        ?? null;
@endphp

<div class="food-menu">
    <!-- HEADER -->
    <header class="menu-header">
        <div class="menu-header-inner">
            <a href="{{ route('food.explore', ['available_date' => request('available_date')]) }}" class="btn-back">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M11 14l-5-5 5-5"/></svg>
            </a>
            <div class="resto-logo">
                @if($restaurantAvatar)
                    <img src="{{ storage_asset_url($restaurantAvatar) }}" alt="">
                @else
                    👨‍🍳
                @endif
            </div>
            <div class="resto-details">
                <h1 class="resto-name">{{ $prestataire->business_name ?? $prestataire->user->name }}</h1>
                <span class="resto-status {{ $isFoodOpen ? 'open' : 'closed' }}">{{ $isFoodOpen ? 'Ouvert' : 'Fermé' }}</span>
            </div>
            <div class="header-actions">
                @if($prestataire->public_phone)
                    <a href="tel:{{ $prestataire->public_phone }}" class="btn-header btn-header-outline">
                        <i class="fas fa-phone"></i>
                    </a>
                @endif
                @auth
                    <a href="{{ route('food.cart', $prestataire) }}" class="btn-header btn-header-primary">
                        <i class="fas fa-shopping-cart"></i>
                        <span>Panier</span>
                    </a>
                @else
                    <a href="{{ route('login') }}" class="btn-header btn-header-primary">
                        <i class="fas fa-sign-in-alt"></i>
                    </a>
                @endauth
            </div>
        </div>
    </header>
    @if(!$isFoodOpen)
        <div class="resto-closed-alert">Ce restaurant est actuellement fermé. La prise de commande est indisponible.</div>
    @endif
    @if($availableDate)
        <div class="resto-closed-alert" style="border-color:#fcd34d;background:#fffbeb;color:#92400e;">
            Menu filtré pour le {{ $availableDate->format('d/m/Y') }}.
        </div>
    @endif

    <!-- CATEGORIES -->
    <nav class="cat-bar">
        <div class="cat-bar-inner" id="catBar">
            @foreach($products as $cat => $items)
                <button type="button" class="cat-btn {{ $loop->first ? 'active' : '' }}" data-index="{{ $loop->index }}">
                    <span class="icon">{{ $emojis[$cat] ?? '🍴' }}</span>
                    <span class="name">{{ $categories[$cat] ?? ucfirst($cat) }}</span>
                    <span class="count">{{ $items->count() }}</span>
                </button>
            @endforeach
        </div>
    </nav>

    <!-- PANELS -->
    <div class="panels-container" id="panelsContainer">
        <div class="panels-track" id="panelsTrack">
            @foreach($products as $cat => $items)
                <section class="panel">
                    <div class="panel-inner">
                        @if($items->count() > 0)
                            <div class="products-grid">
                                @foreach($items as $product)
                                    @php
                                        $productInStock = !method_exists($product, 'isInStock') || $product->isInStock();
                                        $productCanOrder = $isFoodOpen && $product->is_available && $productInStock;
                                        $productCanCustomize = auth()->check() && $productCanOrder && $product->has_configurable_options;
                                        $customizerTemplateId = "product-customizer-template-{$product->id}";
                                    @endphp
                                    <article
                                        class="product-card {{ $productCanCustomize ? 'product-card-clickable' : '' }}"
                                        @if($productCanCustomize)
                                            data-customizer-template="{{ $customizerTemplateId }}"
                                            tabindex="0"
                                            role="button"
                                            aria-haspopup="dialog"
                                            aria-label="Personnaliser {{ $product->name }}"
                                        @endif
                                    >
                                        <div class="product-img">
                                            @if($product->image)
                                                <img src="{{ storage_asset_url($product->image) }}" alt="{{ $product->name }}" loading="lazy">
                                            @else
                                                <div class="product-img-placeholder">{{ $emojis[$cat] ?? '🍴' }}</div>
                                            @endif
                                            @if($product->advance_order_label)
                                                <span class="product-badge" style="background:#92400e;">Sur commande</span>
                                            @elseif($loop->first)
                                                <span class="product-badge">Populaire</span>
                                            @endif
                                        </div>
                                        <div class="product-info">
                                            <div class="product-top">
                                                <h3 class="product-name">{{ $product->name }}</h3>
                                                <span class="product-price">
                                                    {{ $product->has_paid_options ? 'Dès ' : '' }}{{ number_format($product->price, 2) }}€
                                                </span>
                                            </div>
                                            @if($product->description)
                                                <p class="product-desc">{{ $product->description }}</p>
                                            @endif
                                            @if($product->has_configurable_options)
                                                @if($productCanCustomize)
                                                    <button type="button" class="product-config-hint" data-open-customizer="{{ $customizerTemplateId }}">
                                                        {{ $product->has_paid_options ? 'Choisir ingrédients et suppléments' : 'Choisir les ingrédients' }}
                                                    </button>
                                                @else
                                                    <p class="product-config-hint product-config-hint-static">
                                                        {{ $product->has_paid_options ? 'Personnalisation et suppléments disponibles' : 'Ingrédients et choix personnalisables' }}
                                                    </p>
                                                @endif
                                            @endif
                                            <div class="product-bottom">
                                                @if($product->advance_order_label)
                                                    <span class="product-time">
                                                        <i class="fas fa-calendar-day"></i>
                                                        {{ $product->advance_order_label }}
                                                    </span>
                                                @elseif($product->preparation_time)
                                                    <span class="product-time">
                                                        <i class="fas fa-clock"></i>
                                                        {{ $product->preparation_time }} min
                                                    </span>
                                                @else
                                                    <span></span>
                                                @endif
                                                @auth
                                                    @if(!$isFoodOpen)
                                                        <span class="text-xs text-red-600 font-medium px-2 py-1 bg-red-50 rounded-lg">Restaurant fermé</span>
                                                    @elseif(!($product->is_available && (!method_exists($product, 'isInStock') || $product->isInStock())))
                                                        <span class="text-xs text-red-500 font-medium px-2 py-1 bg-red-50 rounded-lg">Indisponible</span>
                                                    @endif
                                                @else
                                                    <a href="{{ route('login') }}" class="btn-login">Connexion</a>
                                                @endauth
                                            </div>
                                            @auth
                                                @if($productCanOrder)
                                                    @if($product->has_configurable_options)
                                                        <div class="product-action-row">
                                                            <button type="button" class="btn-add btn-customize" data-open-customizer="{{ $customizerTemplateId }}">
                                                                <i class="fas fa-sliders-h"></i>
                                                                Personnaliser
                                                            </button>
                                                        </div>
                                                    @else
                                                        <form action="{{ route('food.cart.add', [$prestataire, $product]) }}" method="POST" class="form-add">
                                                            @csrf
                                                            <input type="hidden" name="quantity" value="1">
                                                            <div class="product-action-row">
                                                                <button type="submit" class="btn-add">
                                                                    <i class="fas fa-plus"></i>
                                                                    Ajouter
                                                                </button>
                                                            </div>
                                                        </form>
                                                    @endif
                                                @endif
                                            @endauth
                                        </div>
                                    </article>
                                    @if($productCanCustomize)
                                        <template id="{{ $customizerTemplateId }}">
                                            @include('food.partials.product-customizer-modal', [
                                                'product' => $product,
                                                'prestataire' => $prestataire,
                                                'categoryEmoji' => $emojis[$cat] ?? '🍴',
                                            ])
                                        </template>
                                    @endif
                                @endforeach
                            </div>
                        @else
                            <div class="empty-state">
                                <div class="icon">{{ $emojis[$cat] ?? '🍴' }}</div>
                                <p class="text">Aucun produit dans cette catégorie</p>
                            </div>
                        @endif
                    </div>
                </section>
            @endforeach
        </div>
    </div>

    <div class="product-modal hidden" id="productCustomizerModal" role="dialog" aria-modal="true" aria-hidden="true" aria-label="Personnaliser le produit">
        <div class="product-modal-backdrop" data-close-customizer></div>
        <div class="product-modal-dialog">
            <button type="button" class="product-modal-close" data-close-customizer aria-label="Fermer la personnalisation">×</button>
            <div class="product-modal-scroll" id="productCustomizerContent"></div>
        </div>
    </div>

    <!-- FLOATING CART -->
    @auth
        @php
            $cart = session()->get("food_cart.{$prestataire->id}", []);
            $cartCount = 0;
            $cartTotal = 0;
            foreach($cart as $item) {
                $cartCount += $item['quantity'] ?? 0;
                $cartTotal += ($item['unit_price'] ?? $item['price'] ?? 0) * ($item['quantity'] ?? 0);
            }
        @endphp
        @if($cartCount > 0)
            <div class="cart-float">
                <a href="{{ route('food.cart', $prestataire) }}" class="cart-float-inner">
                    <div class="cart-float-left">
                        <span class="cart-float-icon">🛒</span>
                        <div>
                            <div class="cart-float-text">Voir le panier</div>
                            <div class="cart-float-count">{{ $cartCount }} article{{ $cartCount > 1 ? 's' : '' }}</div>
                        </div>
                    </div>
                    <span class="cart-float-total">{{ number_format($cartTotal, 2) }}€</span>
                </a>
            </div>
        @endif
    @endauth
</div>
@endsection

@push('scripts')
<script>
(function() {
    let current = 0;
    const total = {{ $products->count() }};
    const track = document.getElementById('panelsTrack');
    const btns = document.querySelectorAll('.cat-btn');
    const container = document.getElementById('panelsContainer');
    const customizerModal = document.getElementById('productCustomizerModal');
    const customizerContent = document.getElementById('productCustomizerContent');
    let lastCustomizerTrigger = null;

    window.goTo = function(idx) {
        if (idx < 0 || idx >= total) return;
        current = idx;
        track.style.transform = 'translateX(-' + (idx * 100) + '%)';
        btns.forEach((b, i) => b.classList.toggle('active', i === idx));
        btns[idx]?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    };

    btns.forEach(btn => {
        btn.addEventListener('click', () => {
            const idx = Number.parseInt(btn.dataset.index || '', 10);
            if (Number.isInteger(idx)) {
                window.goTo(idx);
            }
        });
    });

    // Touch swipe
    let startX = 0, isDragging = false;
    container.addEventListener('touchstart', e => { startX = e.touches[0].clientX; isDragging = true; }, { passive: true });
    container.addEventListener('touchend', e => {
        if (!isDragging) return;
        isDragging = false;
        const dx = e.changedTouches[0].clientX - startX;
        if (Math.abs(dx) > 50) goTo(current + (dx < 0 ? 1 : -1));
    }, { passive: true });

    function formatEuro(value) {
        return Number(value || 0).toFixed(2).replace('.', ',') + ' €';
    }

    function updateCustomizerTotal(form) {
        if (!form) {
            return;
        }

        const totalTarget = form.querySelector('[data-customizer-total]');
        if (!totalTarget) {
            return;
        }

        const basePrice = parseFloat(form.dataset.basePrice || '0') || 0;
        let optionsTotal = 0;

        form.querySelectorAll('.product-option-select').forEach(select => {
            const selectedOption = select.options[select.selectedIndex];
            if (!selectedOption) {
                return;
            }

            optionsTotal += parseFloat(selectedOption.dataset.choicePrice || '0') || 0;
        });

        form.querySelectorAll('.product-option-choice input[type="checkbox"]:checked').forEach(input => {
            optionsTotal += parseFloat(input.dataset.choicePrice || '0') || 0;
        });

        totalTarget.textContent = formatEuro(basePrice + optionsTotal);
    }

    function closeCustomizerModal() {
        if (!customizerModal || customizerModal.classList.contains('hidden')) {
            return;
        }

        customizerModal.classList.add('hidden');
        customizerModal.setAttribute('aria-hidden', 'true');
        document.body.classList.remove('customizer-open');

        if (customizerContent) {
            customizerContent.innerHTML = '';
        }

        if (lastCustomizerTrigger && typeof lastCustomizerTrigger.focus === 'function') {
            lastCustomizerTrigger.focus();
        }

        lastCustomizerTrigger = null;
    }

    function bindCustomizerPricing(form) {
        form.querySelectorAll('.product-option-select, .product-option-choice input[type="checkbox"]').forEach(field => {
            field.addEventListener('change', () => updateCustomizerTotal(form));
        });
    }

    function bindAddToCartForm(form, options = {}) {
        if (!form || form.dataset.cartBound === 'true') {
            return;
        }

        form.dataset.cartBound = 'true';

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const btn = this.querySelector('.btn-add');
            const feedback = this.querySelector('[data-feedback]');
            const formData = new FormData(this);
            const originalContent = btn.innerHTML;

            if (feedback) {
                feedback.textContent = '';
                feedback.classList.add('hidden');
            }

            btn.disabled = true;
            btn.classList.add('added');
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            
            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(async response => {
                const data = await response.json().catch(() => ({}));
                if (!response.ok) {
                    throw data;
                }
                return data;
            })
            .then(data => {
                btn.innerHTML = '<i class="fas fa-check"></i> Ajouté';
                updateCartUI(data);

                this.reset();
                updateCustomizerTotal(this);

                if (options.closeOnSuccess) {
                    setTimeout(() => closeCustomizerModal(), 220);
                }

                setTimeout(() => {
                    btn.classList.remove('added');
                    btn.innerHTML = originalContent;
                    btn.disabled = false;
                }, 1200);
            })
            .catch(error => {
                const firstValidationMessage = error && error.errors
                    ? Object.values(error.errors).flat()[0]
                    : null;
                const message = firstValidationMessage || error.message || 'Impossible d\'ajouter cet article au panier.';

                if (feedback) {
                    feedback.textContent = message;
                    feedback.classList.remove('hidden');
                } else {
                    window.alert(message);
                }

                btn.classList.remove('added');
                btn.innerHTML = originalContent;
                btn.disabled = false;
            });
        });
    }

    function openCustomizerModal(templateId, trigger) {
        if (!customizerModal || !customizerContent) {
            return;
        }

        const template = document.getElementById(templateId);
        if (!template) {
            return;
        }

        lastCustomizerTrigger = trigger || document.activeElement;
        customizerContent.innerHTML = '';
        customizerContent.appendChild(template.content.cloneNode(true));

        const form = customizerContent.querySelector('.form-add');
        if (form) {
            bindAddToCartForm(form, { closeOnSuccess: true });
            bindCustomizerPricing(form);
            updateCustomizerTotal(form);
        }

        customizerModal.classList.remove('hidden');
        customizerModal.setAttribute('aria-hidden', 'false');
        document.body.classList.add('customizer-open');

        const focusTarget = customizerContent.querySelector('.product-option-select, .product-option-choice input, .product-note-input, .btn-add');
        focusTarget?.focus();
    }

    document.querySelectorAll('.form-add').forEach(form => bindAddToCartForm(form));

    document.addEventListener('click', event => {
        const openTrigger = event.target.closest('[data-open-customizer]');
        if (openTrigger) {
            event.preventDefault();
            openCustomizerModal(openTrigger.dataset.openCustomizer, openTrigger);
            return;
        }

        const closeTrigger = event.target.closest('[data-close-customizer]');
        if (closeTrigger) {
            event.preventDefault();
            closeCustomizerModal();
            return;
        }

        const card = event.target.closest('.product-card-clickable[data-customizer-template]');
        if (!card) {
            return;
        }

        if (event.target.closest('a, button, input, select, textarea, label, form')) {
            return;
        }

        openCustomizerModal(card.dataset.customizerTemplate, card);
    });

    document.addEventListener('keydown', event => {
        if (event.key === 'Escape') {
            closeCustomizerModal();
            return;
        }

        if (!(event.target instanceof Element)) {
            return;
        }

        const card = event.target.closest('.product-card-clickable[data-customizer-template]');
        if (!card) {
            return;
        }

        if (event.key !== 'Enter' && event.key !== ' ') {
            return;
        }

        event.preventDefault();
        openCustomizerModal(card.dataset.customizerTemplate, card);
    });

    function updateCartUI(data) {
        const cartFloat = document.querySelector('.cart-float');
        const count = data.cart_count || 0;
        const total = data.cart_total || 0;
        
        if (count > 0) {
            if (!cartFloat) {
                // Create cart float if doesn't exist
                const cartHtml = `
                    <div class="cart-float">
                        <a href="${data.cart_url || '#'}" class="cart-float-inner">
                            <div class="cart-float-left">
                                <span class="cart-float-icon">🛒</span>
                                <div>
                                    <div class="cart-float-text">Voir le panier</div>
                                    <div class="cart-float-count">${count} article${count > 1 ? 's' : ''}</div>
                                </div>
                            </div>
                            <span class="cart-float-total">${parseFloat(total).toFixed(2)}€</span>
                        </a>
                    </div>
                `;
                document.querySelector('.food-menu').insertAdjacentHTML('beforeend', cartHtml);
            } else {
                // Update existing cart
                cartFloat.querySelector('.cart-float-count').textContent = count + ' article' + (count > 1 ? 's' : '');
                cartFloat.querySelector('.cart-float-total').textContent = parseFloat(total).toFixed(2) + '€';
            }
        }
    }
})();
</script>
@endpush