{% extends 'base/base.html' %}
{% load static humanize %}

{% block title %}Invoice #{{ booking.booking_number }} - PRACA Equipment Rental{% endblock %}

{% block extra_css %}
{{ block.super }}
<style>
    /* Base styles */
    body {
        color: #333;
        line-height: 1.6;
    }
    
    .card {
        margin-bottom: 1.5rem;
        border: 1px solid #e0e0e0;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .card-header {
        background-color: #f8f9fa;
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid #e0e0e0;
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    .table {
        width: 100%;
        margin-bottom: 1rem;
        color: #212529;
    }
    
    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
        padding: 0.75rem;
        border: 1px solid #dee2e6;
    }
    
    .table td {
        padding: 0.75rem;
        vertical-align: middle;
        border: 1px solid #dee2e6;
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.025);
    }
    
    .text-muted {
        color: #6c757d !important;
    }
    
    .text-end {
        text-align: right !important;
    }
    
    .text-center {
        text-align: center !important;
    }

    /* Print-specific styles */
    @media print {
        @page {
            size: A4;
            margin: 1.5cm;
        }
        
        /* Hide elements */
        header, 
        footer, 
        .d-print-none,
        .btn,
        .no-print {
            display: none !important;
        }
        
        /* Base print styles */
        body {
            font-family: "Helvetica Neue", Arial, sans-serif;
            font-size: 11pt;
            line-height: 1.5;
            color: #000;
            background: #fff;
            padding: 0;
            margin: 0;
        }
        
        /* Container */
        .container {
            max-width: 100%;
            padding: 0;
            margin: 0;
        }
        
        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            color: #000;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
        }
        
        h1 { font-size: 1.6em; }
        h2 { font-size: 1.4em; }
        h3 { font-size: 1.2em; }
        
        /* Cards */
        .card {
            border: 1px solid #ddd !important;
            margin-bottom: 1.2cm;
            box-shadow: none !important;
            page-break-inside: avoid;
            break-inside: avoid;
            background: transparent;
        }
        
        .card-header {
            background-color: #f5f5f5 !important;
            border-bottom: 2px solid #ddd !important;
            font-weight: 700;
            padding: 0.5rem 1rem;
        }
        
        /* Tables */
        .table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 1rem;
            font-size: 10pt;
        }
        
        .table th {
            background-color: #f8f9fa !important;
            border: 1px solid #dee2e6;
            padding: 0.5rem;
            font-weight: 600;
            text-align: left;
        }
        
        .table td {
            border: 1px solid #dee2e6;
            padding: 0.5rem;
            vertical-align: top;
        }
        
        .table .text-end {
            text-align: right;
        }
        
        /* Invoice header */
        .invoice-header {
            margin-bottom: 1.5cm;
            padding-bottom: 0.5cm;
            border-bottom: 2px solid #000;
        }
        
        /* Prevent page breaks inside important sections */
        .no-break {
            page-break-inside: avoid;
            break-inside: avoid;
        }
        
        /* Links */
        a {
            text-decoration: none;
            color: #000;
        }
        
        a[href]:after {
            content: " (" attr(href) ")";
            font-size: 80%;
            color: #6c757d;
        }
        
        /* Page breaks */
        .page-break {
            page-break-before: always;
        }
        
        /* Utility classes */
        .text-uppercase {
            text-transform: uppercase;
        }
        
        .font-weight-bold {
            font-weight: 700 !important;
        }
    }
    
    /* Screen-only styles */
    @media screen {
        .print-button {
            margin: 2rem 0;
            padding: 1rem 0;
            border-top: 1px solid #eee;
        }
        
        .no-print {
            display: block;
        }
    }
</style>
{% endblock %}

{% block content %}
{{ block.super }}
<div class="container py-4">
    <!-- Invoice Header -->
    <div class="row mb-4 invoice-header">
        <div class="col-md-6">
            <h1 class="h2 mb-1">INVOICE</h1>
            <p class="mb-1"><strong>Invoice #:</strong> {{ booking.booking_number }}</p>
            <p class="mb-1"><strong>Date:</strong> {{ invoice_date|date:"F j, Y" }}</p>
            <p class="mb-0"><strong>Status:</strong> 
                <span class="badge bg-{{ booking.get_status_display|lower }}">
                    {{ booking.get_status_display }}
                </span>
            </p>
        </div>
        <div class="col-md-6 text-md-end">
            <div class="mb-3">
                <img src="{% static 'img/logo.png' %}" alt="PRACA Logo" height="50" class="no-print">
                <h2 class="h4 mb-1">PRACA Equipment Rental</h2>
                <p class="mb-1">123 Rental Street, Westlands</p>
                <p class="mb-1">Nairobi, 00100, Kenya</p>
                <p class="mb-1">Phone: +254 700 000000</p>
                <p class="mb-0">Email: info@praca.co.ke</p>
            </div>
        </div>
    </div>

    <!-- Billing & Payment Info -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-light">
                    <h6 class="mb-0">Bill To</h6>
                </div>
                <div class="card-body">
                    <p class="mb-2">
                        <strong>{{ booking.user.get_full_name|default:booking.user.username }}</strong>
                        {% if booking.user.company_name %}
                            <br>{{ booking.user.company_name }}
                        {% endif %}
                    </p>
                    <p class="mb-2">
                        <i class="fas fa-envelope me-2"></i> {{ booking.customer_email }}<br>
                        <i class="fas fa-phone me-2"></i> {{ booking.customer_phone|default:"Not provided" }}
                    </p>
                    {% if booking.delivery_address %}
                        <p class="mb-0">
                            <strong>Delivery Address:</strong><br>
                            {{ booking.delivery_address }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Payment Information</h6>
                    <span class="badge {% if booking.payment_status == 'paid' %}bg-success{% else %}bg-warning{% endif %}">
                        {{ booking.get_payment_status_display }}
                    </span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <tr>
                                <td class="border-0 ps-0">Invoice Date:</td>
                                <td class="text-end border-0 pe-0">{{ invoice_date|date:"F j, Y" }}</td>
                            </tr>
                            <tr>
                                <td class="border-0 ps-0">Due Date:</td>
                                <td class="text-end border-0 pe-0">{{ due_date|date:"F j, Y" }}</td>
                            </tr>
                            {% if booking.payment_date %}
                            <tr>
                                <td class="border-0 ps-0">Payment Date:</td>
                                <td class="text-end border-0 pe-0">{{ booking.payment_date|date:"F j, Y" }}</td>
                            </tr>
                            {% endif %}
                            {% if booking.payment_method %}
                            <tr>
                                <td class="border-0 ps-0">Payment Method:</td>
                                <td class="text-end border-0 pe-0">{{ booking.get_payment_method_display|default:booking.payment_method }}</td>
                            </tr>
                            {% endif %}
                            {% if booking.transport_fee %}
                            <tr>
                                <td class="border-0 ps-0">Transport Fee:</td>
                                <td class="text-end border-0 pe-0">KES {{ booking.transport_fee|floatformat:2 }}</td>
                            </tr>
                            {% endif %}
                            {% if booking.deposit_amount %}
                            <tr>
                                <td class="border-0 ps-0">Deposit Paid:</td>
                                <td class="text-end border-0 pe-0">KES {{ booking.deposit_amount|floatformat:2 }} (40%)</td>
                            </tr>
                            {% endif %}
                        </table>
                    </div>
                    {% if booking.payment_status != 'paid' %}
                    <div class="mt-3 p-3 bg-light rounded">
                        <h6 class="mb-2">Payment Instructions</h6>
                        <p class="small mb-1">Please make payment to:</p>
                        <ul class="small mb-0">
                            <li>Bank: Sample Bank</li>
                            <li>Account: PRACA Equipment Rental Ltd</li>
                            <li>Account #: 1234567890</li>
                            <li>Reference: {{ booking.booking_number }}</li>
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Booking Details -->
    <div class="card mb-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h6 class="mb-0">Booking Details</h6>
            <span class="badge bg-primary">Booking #{{ booking.booking_number }}</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="border-top-0">Item</th>
                            <th class="border-top-0">Description</th>
                            <th class="text-end border-top-0">Rate</th>
                            <th class="text-end border-top-0">Days</th>
                            <th class="text-end border-top-0">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Equipment Row -->
                        <tr>
                            <td class="align-middle">
                                <strong>{{ booking.equipment.name }}</strong>
                                <div class="small text-muted">
                                    {{ booking.equipment.category.name }}
                                    {% if booking.equipment.serial_number %}
                                        <br>SN: {{ booking.equipment.serial_number }}
                                    {% endif %}
                                </div>
                            </td>
                            <td class="align-middle">
                                <div class="text-muted small">
                                    {{ booking.equipment.description|truncatewords:15 }}
                                </div>
                            </td>
                            <td class="text-end align-middle">KSh {{ booking.daily_rate|intcomma }}<small class="text-muted">/day</small></td>
                            <td class="text-end align-middle">{{ booking.total_days }}</td>
                            <td class="text-end align-middle">KSh {{ booking.subtotal|intcomma }}</td>
                        </tr>
                        
                        <!-- Delivery Fee -->
                        {% if booking.delivery_required %}
                        <tr>
                            <td class="align-middle">
                                <i class="fas fa-truck me-1"></i> Delivery
                            </td>
                            <td class="align-middle" colspan="3">
                                <small class="text-muted">
                                    {% if booking.delivery_address %}
                                        To: {{ booking.delivery_address }}
                                    {% else %}
                                        Standard delivery to your location
                                    {% endif %}
                                </small>
                            </td>
                            <td class="text-end align-middle">
                                {% if booking.delivery_fee > 0 %}
                                    KSh {{ booking.delivery_fee|intcomma }}
                                {% else %}
                                    <span class="text-success">Free</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endif %}
                        
                        <!-- Tax -->
                        <tr>
                            <td class="border-0"></td>
                            <td class="border-0" colspan="2">
                                <small class="text-muted">
                                    <i class="fas fa-info-circle me-1"></i> 
                                    VAT (16%) included in total
                                </small>
                            </td>
                            <td class="text-end border-0">
                                <strong>Tax (16%):</strong>
                            </td>
                            <td class="text-end border-0">
                                KSh {{ booking.tax_amount|intcomma }}
                            </td>
                        </tr>
                        
                        <!-- Total -->
                        <tr class="table-active">
                            <td class="border-0"></td>
                            <td class="border-0" colspan="3" class="text-end">
                                <h5 class="mb-0">Total Amount:</h5>
                                <small class="text-muted">
                                    {% if booking.payment_status == 'paid' %}
                                        <i class="fas fa-check-circle text-success"></i> Paid on {{ booking.payment_date|date:"M j, Y" }}
                                    {% else %}
                                        Due by {{ due_date|date:"M j, Y" }}
                                    {% endif %}
                                </small>
                            </td>
                            <td class="text-end border-0">
                                <h4 class="mb-0">KSh {{ booking.total_amount|intcomma }}</h4>
                                {% if booking.payment_status == 'partial' %}
                                    <small class="text-muted">
                                        (Balance: KSh {{ booking.get_balance_due|intcomma }})
                                    </small>
                                {% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Rental Period Summary -->
        <div class="card-footer bg-light">
            <div class="row">
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <i class="fas fa-calendar-alt fa-2x text-primary"></i>
                        </div>
                        <div>
                            <small class="text-muted d-block">Rental Period</small>
                            <strong>{{ booking.start_date|date:"M j, Y" }} - {{ booking.end_date|date:"M j, Y" }}</strong>
                            <div class="small text-muted">
                                {{ booking.total_days }} day{% if booking.total_days > 1 %}s{% endif %}
                                ({{ booking.pickup_time|time:"g:i A" }} pickup - {{ booking.return_time|time:"g:i A" }} return)
                            </div>
                        </div>
                    </div>
                </div>
                {% if booking.special_requests %}
                <div class="col-md-6">
                    <div class="d-flex align-items-center h-100">
                        <div class="me-3">
                            <i class="fas fa-clipboard-list fa-2x text-primary"></i>
                        </div>
                        <div>
                            <small class="text-muted d-block">Special Requests</small>
                            <div class="small">{{ booking.special_requests|truncatewords:10 }}</div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Additional Information & Notes -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Additional Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="small text-uppercase text-muted mb-2">
                            <i class="fas fa-map-marker-alt me-1"></i> Pickup Location
                        </h6>
                        <p class="mb-0">
                            PRACA Equipment Rental Center<br>
                            123 Rental Street, Westlands<br>
                            Nairobi, 00100, Kenya<br>
                            <a href="https://maps.google.com/?q=PRACA+Equipment+Rental+Nairobi" target="_blank" class="small">
                                <i class="fas fa-external-link-alt me-1"></i>View on Map
                            </a>
                        </p>
                    </div>
                    
                    <div class="border-top pt-3">
                        <h6 class="small text-uppercase text-muted mb-2">
                            <i class="fas fa-clock me-1"></i> Business Hours
                        </h6>
                        <table class="table table-sm table-borderless small mb-0">
                            <tr>
                                <td class="ps-0">Monday - Friday:</td>
                                <td class="text-end pe-0">8:00 AM - 6:00 PM</td>
                            </tr>
                            <tr>
                                <td class="ps-0">Saturday:</td>
                                <td class="text-end pe-0">9:00 AM - 4:00 PM</td>
                            </tr>
                            <tr>
                                <td class="ps-0">Sunday:</td>
                                <td class="text-end pe-0">Closed</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-file-contract me-2"></i>Terms & Conditions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="terms-content small">
                        <ol class="ps-3 mb-0">
                            <li class="mb-2">
                                <strong>Payment Terms:</strong> Full payment is required to confirm your booking. 
                                We accept M-Pesa, credit/debit cards, and bank transfers.
                            </li>
                            <li class="mb-2">
                                <strong>Cancellation Policy:</strong> 
                                <ul class="mt-1 mb-2">
                                    <li>7+ days before rental: 100% refund</li>
                                    <li>3-6 days before rental: 50% refund</li>
                                    <li>Less than 48 hours: No refund</li>
                                </ul>
                            </li>
                            <li class="mb-2">
                                <strong>Security Deposit:</strong> A refundable security deposit of KSh {{ booking.security_deposit|default:"5,000"|intcomma }} 
                                is required upon equipment pickup.
                            </li>
                            <li class="mb-2">
                                <strong>Late Returns:</strong> Additional charges of 50% of the daily rate will apply for late returns.
                            </li>
                            <li class="mb-2">
                                <strong>Damage Policy:</strong> Customer is responsible for any damages to the equipment during the rental period.
                            </li>
                        </ol>
                        
                        <div class="alert alert-warning small mt-3 mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            By proceeding with this booking, you agree to our full Terms and Conditions available on our website.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Rental Period -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-light">
                    <h6 class="mb-0">Invoice Details</h6>
                </div>
                <div class="card-body">
                    <p class="mb-1"><strong>Invoice #:</strong> {{ booking.booking_number }}</p>
                    <p class="mb-1"><strong>Invoice Date:</strong> {{ booking.created_at|date:"M d, Y" }}</p>
                    <p class="mb-1"><strong>Status:</strong> <span class="badge {% if booking.status == 'confirmed' %}bg-success{% elif booking.status == 'cancelled' %}bg-danger{% else %}bg-warning{% endif %}">{{ booking.get_status_display }}</span></p>
                    <p class="mb-1"><strong>Payment Status:</strong> <span class="badge {% if booking.payment_status == 'paid' %}bg-success{% elif booking.payment_status == 'partially_paid' %}bg-info{% else %}bg-warning{% endif %}">{{ booking.get_payment_status_display }}</span></p>
                    {% if booking.transport_fee %}
                    <p class="mb-1"><strong>Transport Fee:</strong> KES {{ booking.transport_fee|floatformat:2 }}</p>
                    {% endif %}
                    {% if booking.deposit_amount %}
                    <p class="mb-0"><strong>Deposit Paid:</strong> KES {{ booking.deposit_amount|floatformat:2 }} (40%)</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-light">
                    <h6 class="mb-0">Payment Instructions</h6>
                </div>
                <div class="card-body">
                    <p class="mb-2">Please make payment to:</p>
                    <p class="mb-1"><strong>Bank:</strong> PRACA Equipment Rental Ltd</p>
                    <p class="mb-1"><strong>Account #:</strong> 1234567890</p>
                    <p class="mb-1"><strong>Bank:</strong> Sample Bank</p>
                    <p class="mb-1"><strong>Reference:</strong> {{ booking.booking_number }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Thank You & Contact -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body p-4 text-center">
                    <h4 class="mb-3">Thank you for choosing PRACA Equipment Rental!</h4>
                    <p class="mb-4">We appreciate your business and look forward to serving you again.</p>
                    
                    <div class="row g-4">
                        <div class="col-md-4">
                            <div class="p-3 rounded bg-white h-100">
                                <div class="icon-lg bg-primary bg-opacity-10 text-primary rounded-circle mb-3">
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                                <h5 class="h6 mb-2">Call Us</h5>
                                <p class="mb-0">
                                    <a href="tel:+254700000000" class="text-reset">+254 700 000000</a><br>
                                    <small class="text-muted">Mon-Fri, 8am-6pm</small>
                                </p>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="p-3 rounded bg-white h-100">
                                <div class="icon-lg bg-primary bg-opacity-10 text-primary rounded-circle mb-3">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <h5 class="h6 mb-2">Email Us</h5>
                                <p class="mb-0">
                                    <a href="mailto:support@praca.co.ke" class="text-reset">support@praca.co.ke</a><br>
                                    <small class="text-muted">We'll respond within 24 hours</small>
                                </p>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="p-3 rounded bg-white h-100">
                                <div class="icon-lg bg-primary bg-opacity-10 text-primary rounded-circle mb-3">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <h5 class="h6 mb-2">Visit Us</h5>
                                <p class="mb-0">
                                    123 Rental Street, Westlands<br>
                                    <small class="text-muted">Nairobi, Kenya</small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Print & Navigation Buttons -->
    <div class="d-print-none mt-4">
        <div class="d-flex justify-content-between align-items-center border-top border-bottom py-3 mb-4">
            <div>
                <button onclick="window.print()" class="btn btn-primary me-2">
                    <i class="fas fa-print me-1"></i> Print Invoice
                </button>
                <button onclick="window.print();" class="btn btn-outline-secondary me-2">
                    <i class="fas fa-file-pdf me-1"></i> Save as PDF
                </button>
            </div>
            <div>
                <a href="{% url 'bookings:booking_list' %}" class="btn btn-outline-secondary me-2">
                    <i class="fas fa-list me-1"></i> My Bookings
                </a>
                <a href="{% url 'bookings:booking_detail' booking.booking_number %}" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left me-1"></i> Back to Booking
                </a>
            </div>
        </div>
        
        <div class="text-center text-muted small">
            <p class="mb-1">
                This is an automatically generated invoice. If you have any questions, please contact our support team.
            </p>
            <p class="mb-0">
                &copy; {% now "Y" %} PRACA Equipment Rental. All rights reserved.
            </p>
        </div>
    </div>
    
    <!-- Print-Only Footer -->
    <div class="d-none d-print-block mt-5 pt-5">
        <div class="border-top pt-4">
            <div class="row">
                <div class="col-6">
                    <h6 class="small text-uppercase text-muted">PRACA Equipment Rental</h6>
                    <p class="small mb-1">123 Rental Street, Westlands</p>
                    <p class="small mb-1">Nairobi, 00100, Kenya</p>
                    <p class="small mb-0">support@praca.co.ke | +254 700 000000</p>
                </div>
                <div class="col-6 text-end">
                    <p class="small mb-1">Invoice #{{ booking.booking_number }}</p>
                    <p class="small mb-1">Generated on: {% now "F j, Y \a\t g:i A" %}</p>
                    <p class="small mb-0">Thank you for your business!</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}