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

{% block title %}Washerman 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">Washerman 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 %}
                            </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">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="#rejectWashermanModal">
                                    <i class="fi fi-sr-cross me-2"></i>Reject
                                </button>

                                <div class="modal fade" id="rejectWashermanModal" tabindex="-1" aria-labelledby="rejectWashermanModalLabel" 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="rejectWashermanModalLabel">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 washerman <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_washerman_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="#approveWashermanModal">
                                    <i class="fi fi-sr-check me-2"></i>Approve
                                </button>

                                <div class="modal fade" id="approveWashermanModal" tabindex="-1" aria-labelledby="approveWashermanModalLabel" 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="approveWashermanModalLabel">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 washerman <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_washerman_approve', { id: profile.id }) }}" class="btn btn-success">Approve</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                            <a href="{{ path('admin_washerman') }}" class="btn btn-secondary">
                                <i class="fi fi-sr-arrow-left me-2"></i>Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
{% endblock %}