{% extends 'chef/dashboard.html.twig' %}

{% block title %}Chef Menus{% endblock %}

{% block dashboard_content %}
    <div class="container mt-4">
        {% for message in app.flashes('success') %}
            <div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}

        {% for message in app.flashes('error') %}
            <div class="alert alert-danger alert-dismissible fade show mt-3" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}

        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>All Menus</h1>
            <a href="{{ path('chef_menu_add') }}" class="btn btn-success">Add Menu</a>
        </div>
        <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead class="table-secondary">
            <tr>
                <th>#</th>
                <th>Image</th>
                <th>Title</th>
                <th>Description</th>
                <th>From</th>
                <th>To</th>
                <th>Cuisine</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            {% for menu in menus %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>
                        {% if menu.image %}
                            <img src="{{ asset('uploads/' ~ menu.image) }}" alt="Menu Image" width="80" height="60" style="object-fit: cover;">
                        {% else %}
                            <span class="text-muted">No Image</span>
                        {% endif %}
                    </td>
                    <td>{{ menu.title }}</td>
                    <td>{{ menu.description|length > 50 ? menu.description|slice(0, 50) ~ '...' : menu.description }}</td>
                    <td>{{ menu.availableFrom ? menu.availableFrom|date('Y-m-d') : 'N/A' }}</td>
                    <td>{{ menu.availableTo ? menu.availableTo|date('Y-m-d') : 'N/A' }}</td>
                    <td>{{ menu.cuisineType }}</td>
                    <td>
                        {% if menu.isActive %}
                            <span class="badge bg-success">Active</span>
                        {% else %}
                            <span class="badge bg-secondary">Inactive</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="{{ path('chef_menu_edit', {id: menu.id}) }}" class="btn btn-sm btn-primary">Edit</a>
                        <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModalMenu{{ menu.id }}">
                            Delete
                        </button>
                    </td>
                </tr>
                <tr>
                    <td colspan="9">
                        <div class="modal fade" id="deleteModalMenu{{ menu.id }}" tabindex="-1" aria-labelledby="deleteModalMenuLabel{{ menu.id }}" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header bg-danger text-white">
                                        <h5 class="modal-title" id="deleteModalMenuLabel{{ menu.id }}">Confirm Delete</h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        Are you sure you want to delete the menu <strong>{{ menu.title }}</strong>?
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                        <form method="post" action="{{ path('chef_menu_delete', {id: menu.id}) }}" class="d-inline">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_menu_' ~ menu.id) }}">
                                            <button type="submit" class="btn btn-danger">Delete</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="9" class="text-center text-muted">No menus found.</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
    </div>
{% endblock %}