{% extends "base.html" %}
{% load bootstrap4 %}
{% load widget_tweaks %}

{% block title %}Client - Payment Details{% endblock title %}

{% block content %}
<br><br>
<section class="page-section" id="services">
    <div class="container">
        {% include "client_navbar.html" %}
        {% if project_exists and active_company %}
            <div class="row">
                <!-- Company Details -->
                <div class="col-md-8">
                    <div class="card shadow-sm p-4">
                        <h3 class="mb-3">Company Details</h3>
                        {{ company_form.id }}
                        {% bootstrap_form company_form layout='inline' %}
                    </div>
                </div>

                <!-- Payment Details -->
                <div class="col-md-4">
                    <div class="card shadow-sm p-4">
                        <!-- Logo -->
                        {% if logo %}
                            <div class="text-center mb-3">
                                {%if message %}
                                    <p class="fw">{{message}}</p>
                                {%endif%}
                                <p class="fw-bold">Company Logo</p>
                                <img src="{{ logo }}" class="img-fluid rounded" alt="company logo" style="max-width: 150px;">
                            </div>
                        {% endif %}

                        <!-- Project Details -->
                        <h3 class="text-primary text-center">{{ project.name }}</h3>
                        <p class="text-muted text-center">{{ project.description }}</p>

                        <!-- Price Section -->
                        <div class="text-center my-3">
                            <h4 class="fw-bold text-success">€ {{ price }}</h4>
                        </div>

                        <!-- Payment Status -->
                        {% if active_company.paid %}
                            <div class="alert alert-success text-center" role="alert">
                                <i class="bi bi-check-circle-fill"></i> <strong>Payment Completed</strong>
                            </div>
                        {% else %}
                            <div class="text-center">
                                <a href="{% url 'web:client_payment_stripe' %}{{ cid }}/" class="btn btn-success btn-lg">
                                    <i class="bi bi-credit-card"></i> Start Payment<br>{{ project.name }}
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</section>
{% endblock content %}