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

{% block title %}Chef Profile Details{% endblock %}

{% block dashboard_content %}
    <div class="container-fluid mt-4 px-4">
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endfor %}

        <h1 class="mb-4">Chef Profile Details</h1>
            <div class="col-12 col-lg-11">
                <div class="card shadow-sm">
                    <div class="card-body">
                        {% for label, messages in app.flashes %}
                            {% for message in messages %}
                                <div class="alert alert-{{ label == 'success' ? 'success' : 'danger' }} alert-dismissible fade show" role="alert">
                                    <i class="fi fi-sr-{{ label == 'success' ? 'check' : 'cross' }} me-2"></i>
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endfor %}

                        <div class="row">
                            <div class="col-md-4">
                                {% if profile.image %}
                                    <img src="{{ asset('uploads/' ~ profile.image) }}"
                                         class="img-thumbnail mb-3"
                                         style="max-height: 100%; width: 100%; object-fit: cover;">
                                {% else %}
                                    <div class="text-center py-4 bg-light rounded">
                                        <i class="fi fi-sr-user fs-1 text-muted"></i>
                                        <p class="text-muted mt-2">No profile image</p>
                                    </div>
                                {% endif %}
                                {% if profile.licence %}
                                    <div class="mt-3">
                                        <label class="form-label fw-bold">Current Licence/Certificate:</label><br>
                                        <a href="{{ asset('uploads/' ~ profile.licence) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-file-pdf me-2"></i>View Licence
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Name:</label>
                                    <p class="mb-0">{{ profile.user.name }}</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Email:</label>
                                    <p class="mb-0">{{ profile.user.email }}</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Bio:</label>
                                    <p class="mb-0">{{ profile.bio ?: 'No bio provided' }}</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Certification:</label>
                                    <p class="mb-0">{{ profile.certification ?: 'No certification provided' }}</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Status:</label>
                                    <p class="mb-0">
                                        {% if profile.approved %}
                                            <span class="badge bg-success">
                                            <i class="fi fi-sr-check me-1"></i>Approved
                                        </span>
                                        {% else %}
                                            <span class="badge bg-warning">
                                            <i class="fi fi-sr-clock me-1"></i>Pending Approval
                                        </span>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-start mt-4">
                            {% if profile.approved %}
                                <button type="button" class="btn btn-outline-danger me-2" data-bs-toggle="modal" data-bs-target="#rejectChefModal">
                                    <i class="fi fi-sr-cross me-2"></i>Reject
                                </button>

                                <div class="modal fade" id="rejectChefModal" tabindex="-1" aria-labelledby="rejectChefModalLabel" 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="rejectChefModalLabel">Confirm Reject</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 reject chef <strong>{{ profile.user.name }}</strong>?
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                <a href="{{ path('admin_chef_profile_reject', { id: profile.id }) }}" class="btn btn-danger">Reject</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <button type="button" class="btn btn-outline-success me-2" data-bs-toggle="modal" data-bs-target="#approveChefModal">
                                    <i class="fi fi-sr-check me-2"></i>Approve
                                </button>

                                <div class="modal fade" id="approveChefModal" tabindex="-1" aria-labelledby="approveChefModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header bg-success text-white">
                                                <h5 class="modal-title" id="approveChefModalLabel">Confirm Approve</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 approve chef <strong>{{ profile.user.name }}</strong>?
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                <a href="{{ path('admin_chef_profile_approve', { id: profile.id }) }}" class="btn btn-success">Approve</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                            <a href="{{ path('admin_chefs') }}" class="btn btn-secondary">
                                <i class="fi fi-sr-arrow-left me-2"></i>Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
{% endblock %}