{% extends 'admin/layouts/base.html.twig' %}
{% block title %}View Users{% endblock %}
{% set active = 'app_admin_users' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title': 'User Management',
    },
    {
        'link': path('app_admin_users'), 'title': 'Users',
    },
    {
        'title': 'View',
    }
]%}
{% block stylesheets %}
<style>
    .card-text-email {
        margin-bottom: 0; /* Remove bottom margin */
    }
    .logo-image {
        width: 50px;
        height: 50px;
    }
    /* CSS for horizontal line */
    .horizontal-line {
        border-top: 2px solid #141517; /* Adjust the thickness and color as needed */
        width: 100%; /* Ensures the line spans the entire width */
    }
    .star-rating {
        font-size: 0;
        unicode-bidi: bidi-override;
        direction: rtl; /* Reverse direction for filling stars right to left */
        text-align: left; /* Align stars to the left side of the container */
    }
    .star-rating .star {
        font-size: 2rem; /* Size of stars */
        cursor: pointer;
        display: inline-block;
        color: #ddd; /* Color of unselected stars */
    }
    .star-rating .star:hover,
    .star-rating .star:hover ~ .star {
        color: #f5c518; /* Color when hovered */
    }
    .star-rating .star.selected {
        color: orange; /* Color of selected stars */
    }
    .overflow-auto-table{
        overflow: auto;
        width: 100%;
    }
    .square-image-container {
        width: 100%; /* Replace with your desired width */
        height: 70%; /* Replace with your desired height */
        overflow: hidden; /* This will hide any overflowed part of the image */
        border-radius: 15px;
    }

    .square-image-container img {
        width: 100%; /* Ensures the image width matches the container's width */
        height: 100%; /* Ensures the image height matches the container's height */
        object-fit: cover; /* Ensures the image covers the container without distortion */
    }
    
    .error{
        color:Red;
    }
</style>
{% endblock %}
{% block content %}
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-2 float-start container">
                        <!-- Profile photo here -->
                        <div class="square-image-container">
                            {% if user.image is empty %}
                                <img src="{{ asset('/assets/icons/user.png') }}">
                            {% else %}
                                <img src="{{ asset(user.image) }}" alt="" >
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-9 float-start container">
                        <div class="row g-3">
                            <!-- Role -->
                            <div class="col-md-3">
                                <h6 class="card-title">Role</h6>
                                <p class="card-text">
                                    {% if user.roles is empty %}
                                        N/A
                                    {% else %}
                                        {% for roles in user.getRolesName %}
                                            {{ roles }}{% if not loop.last %}, {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                </p>
                            </div>
                            <!-- Email -->
                            <div class="col-md-3">
                                <h6 class="card-title">Email</h6>
                                <p class="card-text">{{ user.email ? user.email : 'N/A' }}</p>
                            </div>
                            <!-- Registered Date -->
                            <div class="col-md-3">
                                <h6 class="card-title">Registered</h6>
                                <p class="card-text">{{ user.createdat ? user.createdat|date('Y-m-d') : 'N/A' }}</p>
                            </div>
                            <!-- Last Login -->
                            <div class="col-md-3">
                                <h6 class="card-title">Last Login</h6>
                                <p class="card-text" data-utc-time="{{ user.lastLogin ? user.lastLogin|date('Y-m-d\\TH:i:s') : 'N/A' }}">
                                    {{ user.lastLogin ? user.lastLogin|date('Y-m-d H:i:s') : 'N/A' }}
                                </p>
                            </div>
                        </div>

                        <div class="row g-2 mt-3">
                            <!-- Name -->
                            <div class="col-md-3">
                                <h6 class="card-title">Name</h6>
                                <p class="card-text">{{ user.firstname|upper ~ ' ' ~ user.lastname|upper }}</p>
                            </div>
                            <!-- Address -->
                            <div class="col-md-3">
                                <h6 class="card-title">Address</h6>
                                <p class="card-text">{{ user.address ?? "N/A" }}</p>
                            </div>
                            <!-- Phone -->
                            <div class="col-md-3">
                                <h6 class="card-title">Phone No</h6>
                                <p class="card-text">{{ user.mobileno ?? "N/A" }}</p>
                            </div>
                            <!-- Reference Link -->
                            {% if user.roles is not empty %}
                                {% for roles in user.roles %}
                                    {% if roles == "ROLE_AFFILIATE" %}
                                        <div class="col-md-3">
                                            <h6 class="card-title">Affiliate Reference Link</h6>
                                            <p class="card-text">
                                                <a href="{{ app.request.server.get('REF_LINK_URL') ~ "/ref/" ~ user.refcode }}">
                                                    {{ app.request.server.get('REF_LINK_URL') ~ "/ref/" ~ user.refcode }}
                                                </a>
                                            </p>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </div>

                        <div class="row g-2 mt-3">
                            <!-- Parent Affiliate -->
                            {% if user.roles is not empty %}
                                {% for roles in user.roles %}
                                    {% if roles == "ROLE_AFFILIATE" %}
                                        <div class="col-md-3">
                                            <h6 class="card-title">Parent Affiliate</h6>
                                            <p class="card-text">{{ parent_user }}</p>
                                        </div>
                                        <div class="col-md-3">
                                            <h6 class="card-title">Parent Affiliate Reference Link</h6>
                                            <p class="card-text">
                                                <a href="{{ app.request.server.get('REF_LINK_URL') ~ "/ref/" ~ user.refid.refcode }}">
                                                    {{ app.request.server.get('REF_LINK_URL') ~ "/ref/" ~ user.refid.refcode }}
                                                </a>
                                            </p>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                            <!-- Tickets -->
                            <div class="col-md-3">
                                <h6 class="card-title">Tickets</h6>
                                <p>
                                    <span class="badge bg-success">Open: </span> {{ noOfOpenTickets }}
                                </p>
                                <p>
                                    <span class="badge bg-danger">Close: </span> {{ noOfCloseTickets }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1 d-flex">
                        <button type="button" value="{{ user.id }}" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#emailModal" data-email="{{ user.email }}">Email</button>
                    </div>
                </div>
            </div>

            <!-- Content continues... -->

            <div class="horizontal-line mb-4"></div>
            <div class="row">
                <!-- Affiliate Section (Left Sidebar) -->
                <div class="col-12 col-md-4 mb-4">
                    {% if user.roles is not empty %}
                        {% for roles in user.roles %}
                            {% if roles == "ROLE_AFFILIATE" %}
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-3">Affiliate Section</h4>
                                        <p class="card-text">N/A</p>

                                        <!-- Revenue Row -->
                                        <div class="row">
                                            <div class="col">
                                                <h6>Total</h6>
                                                <p>{{ userTotalRevenue is not null ? userTotalRevenue|number_format(2,',','.') ~ '€' : '0€' }}</p>
                                            </div>
                                            <div class="col">
                                                <h6>This Month</h6>
                                                <p>{{ userCurrentMonthRevenue is not null ? userCurrentMonthRevenue|number_format(2,',','.') ~ '€' : '0€' }}</p>
                                            </div>
                                            <div class="col">
                                                <h6>Team</h6>
                                                <p>{{ teamRevenue|number_format(2,',','.') }}€</p>
                                            </div>
                                        </div>

                                        <!-- Multi Tier Users -->
                                        <div class="mt-3">
                                            <h5 class="mb-2">Multi Tier</h5>
                                            {% if multiTierUsers|length > 0 %}
                                                {% for multiTierUser in multiTierUsers %}
                                                    <div>Level {{ multiTierUser.level }} - {{ multiTierUser.user.firstname ~ ' ' ~ multiTierUser.user.lastname }} - {{ multiTierUser.clientTotal }} clients</div>
                                                {% endfor %}
                                            {% else %}
                                                <div>No multi-tier users</div>
                                            {% endif %}
                                        </div>

                                        <!-- Best Partner -->
                                        <div class="mt-3">
                                            <h5 class="mb-2">Best Partner</h5>
                                            <p>{{ bestPartner.username is defined ? bestPartner.username : (bestPartner.firstname is defined ? bestPartner.firstname ~ ' ' ~ bestPartner.lastname : 'N/A') }}</p>
                                        </div>

                                        <!-- Rating Team -->
                                        <div class="mt-3">
                                            <h5 class="mb-2">Rating Team</h5>
                                            <!-- You can add the rating functionality here -->
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </div>

                <!-- Orders and Subscriptions Section (Right Content) -->
                <div class="col-12 col-md-8">
                    <!-- Orders Section -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3>Orders</h3>
                        </div>
                        <div class="card-body">
                            <div class="overflow-auto-table">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Order</th>
                                            <th>Subscription Id</th>
                                            <th>Start</th>
                                            <th>End</th>
                                            <th>Product</th>
                                            <th>Duration Months</th>
                                            <th>Period of Time</th>
                                            <th>Auto Renewal</th>
                                            <th>Payment Method</th>
                                            <th>Status</th>
                                            <th>Setup AI</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% if user is not empty %}
                                            {% for subscription in subscriptions %}
                                                <tr>
                                                    <td><a href="{{ path('app_admin_order_view', {'id': subscription.paymentid.orderid.id}) }}">#{{ subscription.paymentid.orderid.id }}</a></td>
                                                    <td><a href="{{ path('app_admin_subscriptions_view', {'id': subscription.id}) }}">#{{ subscription.id }}</a></td>
                                                    <td>{{ subscription.startdate ? subscription.startdate|date('Y-m-d') : 'N/A' }}</td>
                                                    <td>
                                                        {% set start_date = subscription.startdate ? subscription.startdate|date('Y-m-d') : 'N/A' %}
                                                        {% set duration = subscription.duration %}
                                                        {% if start_date != 'N/A' and duration %}
                                                            {% set end_date = (start_date|date_modify('+' ~ duration ~ ' month'))|date('Y-m-d') %}
                                                            {{ end_date }}
                                                        {% else %}
                                                            N/A
                                                        {% endif %}
                                                    </td>
                                                    <td>{{ subscription.paymentid.orderid.productid.name ? subscription.paymentid.orderid.productid.name : 'N/A' }}</td>
                                                    <td>{{ subscription.duration ? subscription.duration : 'N/A' }} Month</td>
                                                    <td>
                                                        {% set now = "now" | date("Y-m-d H:i:s") %}
                                                        {% set start_date = subscription.startdate|date('Y-m-d') %}
                                                        {% set duration = subscription.duration %}
                                                        {% if start_date %}
                                                            {% if duration %}
                                                                {% set end_date = start_date|date_modify('+' ~ duration ~ ' month') %}
                                                                {% set total_weeks = ((end_date|date('U') - start_date|date('U')) / (3600 * 24 * 7))|round %}
                                                                {% set current_week = (((now|date('U')) - start_date|date('U')) / (3600 * 24 * 7))|round %}
                                                                {% set display_weeks = current_week ~ ' of ' ~ total_weeks ~ ' W' %}
                                                                {{ display_weeks }}
                                                            {% else %}
                                                                N/A
                                                            {% endif %}
                                                        {% else %}
                                                            N/A
                                                        {% endif %}
                                                    </td>
                                                    <td>{{ subscription.autorenewal == 1 ? 'YES' : 'NO' }}</td>
                                                    <td>{{ subscription.paymentid.paymentmethod|upper }}</td>
                                                    <td>
                                                        {% if subscription.paymentid.orderid.status %}
                                                            {% set badgeClass = '' %}
                                                            {% set statusText = subscription.paymentid.orderid.status %}
                                                            {% if statusText == 'completed' %}
                                                                {% set badgeClass = 'badge bg-success' %}
                                                            {% elseif statusText in ['refunded', 'cancelled', 'expired', 'failed'] %}
                                                                {% set badgeClass = 'badge bg-danger' %}
                                                            {% elseif statusText in ['processing', 'pending'] %}
                                                                {% set badgeClass = 'badge bg-warning' %}
                                                            {% elseif statusText in ['on hold', 'on-hold'] %}
                                                                {% set badgeClass = 'badge bg-info' %}
                                                            {% else %}
                                                                {% set badgeClass = 'badge bg-secondary' %}
                                                            {% endif %}
                                                            <span class="badge {{ badgeClass }}">{{ statusText|upper }}</span>
                                                        {% else %}
                                                            N/A
                                                        {% endif %}
                                                    </td>
                                                    <td>N/A</td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td colspan="11" class="text-center">No records found.</td>
                                            </tr>
                                        {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Subscription Section -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3>Subscriptions</h3>
                        </div>
                        <div class="card-body">
                            <div class="overflow-auto-table">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Order Id</th>
                                            <th>Payment Date</th>
                                            <th>Duration</th>
                                            <th>Start Date</th>
                                            <th>End Date</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% if user is not empty %}
                                            {% for subscription in subscriptions %}
                                                <tr>
                                                    <td><a href="{{ path('app_admin_subscriptions_view', {'id': subscription.id}) }}">#{{ subscription.id }}</a></td>
                                                    <td><a href="{{ path('app_admin_order_view', {'id': subscription.paymentid.orderid.id}) }}">#{{ subscription.paymentid.orderid.id }}</a></td>
                                                    <td>{{ subscription.paymentid.paymentDate|date('Y-m-d') }}</td>
                                                    <td>{{ subscription.duration }} Month</td>
                                                    <td>{{ subscription.startdate ? subscription.startdate|date('Y-m-d') : 'N/A' }}</td>
                                                    <td>
                                                        {% set start_date = subscription.startdate ? subscription.startdate|date('Y-m-d') : 'N/A' %}
                                                        {% set duration = subscription.duration %}
                                                        {% if start_date != 'N/A' and duration %}
                                                            {% set end_date = (start_date|date_modify('+' ~ duration ~ ' month'))|date('Y-m-d') %}
                                                            {{ end_date }}
                                                        {% else %}
                                                            N/A
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        {% if subscription.status %}
                                                            {% set badgeClass = '' %}
                                                            {% set statusText = subscription.status %}
                                                            {% if statusText|lower == 'active' %}
                                                                {% set badgeClass = 'badge bg-success' %}
                                                            {% elseif statusText|lower == 'cancelled' %}
                                                                {% set badgeClass = 'badge bg-danger' %}
                                                            {% else %}
                                                                {% set badgeClass = 'badge bg-warning' %}
                                                            {% endif %}
                                                            <span class="badge {{ badgeClass }}">{{ statusText|upper }}</span>
                                                        {% else %}
                                                            N/A
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td colspan="7" class="text-center">No records found.</td>
                                            </tr>
                                        {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<!-- Back Button -->
<div class="text-end mt-4">
    <a href="{{ path('app_admin_users') }}" class="btn btn-primary">Back</a>
</div>

        </div>
    </div>

    <div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="emailModalLabel">Send Email</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="emailForm" action="{{ path('send_email_filter') }}" method="POST">
                        <div class="mb-3">
                            <label for="emailTo" class="form-label">To:</label>
                            <!-- Use Twig syntax to populate the email input field -->
                            <input type="email" class="form-control" id="emailTo" name="emailTo" placeholder="Enter recipient email" value="{{ user.email }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="emailSubject" class="form-label">Subject:</label>
                            <input type="text" class="form-control" id="emailSubject" name="emailSubject" placeholder="Enter email subject">
                        </div>
                        <div class="mb-3">
                            <label for="emailBody" class="form-label">Body:</label>
                            <textarea class="form-control" id="emailBody" name="emailBody" rows="3" placeholder="Enter email body"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Get the email input field
            var emailInput = document.getElementById('emailTo');
            // Get the email value from the button's data-email attribute
            var emailValue = document.querySelector('[data-bs-target="#emailModal"]').getAttribute('data-email');
            // Set the email input field value to the user's email
            emailInput.value = emailValue;


            // Custom email validation for multiple emails
            $.validator.addMethod("validEmails", function(value, element) {
                var emails = value.split(',');
                var isValid = true;
                // Check each email
                emails.forEach(function(email) {
                    // Trim the email and check if it's valid
                    if (!email.trim().match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)) {
                        isValid = false;
                    }
                });
                return this.optional(element) || isValid;
            }, "Please enter valid email addresses, separated by commas.");
            
            // Initialize form validation
            $("#emailForm").validate({
                rules: {
                    emailTo: {
                        required: true,
                        validEmails: true, // Custom email validation
                    },
                    emailSubject: {
                        required: true, // Subject is required
                        minlength: 5 // Minimum length for subject
                    },
                    emailBody: {
                        required: true, // Body is required
                        minlength: 10 // Minimum length for the body
                    }
                },
                messages: {
                    emailTo: {
                        required: "Please enter the recipient's email",
                        email: "Please enter a valid email address"
                    },
                    emailSubject: {
                        required: "Please enter a subject",
                        minlength: "Subject must be at least 5 characters long"
                    },
                    emailBody: {
                        required: "Please enter the body of the email",
                        minlength: "Body must be at least 10 characters long"
                    }
                },
                // Optional: You can add a custom submit handler here if needed
                submitHandler: function(form) {
                    Swal.fire({
                        title: 'Processing...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    form.submit();
                }
            });
        });
    </script>
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
{% endblock  %}