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

{% block title %}New Booking - PRACA{% endblock %}

{% block extra_css %}
<style>
    .item-form {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        position: relative;
    }
    .item-form:not(:last-child) {
        border-bottom: 1px solid #dee2e6;
    }
    .remove-item {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #dc3545;
        cursor: pointer;
    }
    .add-item {
        margin-bottom: 20px;
    }
    .item-type-toggle {
        margin-bottom: 20px;
    }
    .service-fields {
        display: none;
    }
    .equipment-fields {
        display: none;
    }
    .show-fields {
        display: block !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'equipment:home' %}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">New Booking</li>
                </ol>
            </nav>
            
            <h1 class="mb-4">Create New Booking</h1>
            
            <form method="post" id="booking-form" class="needs-validation" novalidate>
                {% csrf_token %}
                {{ form.booking_type }}
                
                <!-- Customer Information -->
                <div class="card mb-4 border-0 shadow-sm">
                    <div class="card-body">
                        <h2 class="h5 mb-4">Your Information</h2>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ form.customer_name|as_crispy_field }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form.customer_email|as_crispy_field }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form.customer_phone|as_crispy_field }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Booking Items -->
                <div class="card mb-4 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="h5 mb-0">Items to Book</h2>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="add-item">
                                <i class="fas fa-plus me-1"></i> Add Item
                            </button>
                        </div>
                        
                        <div id="items-container">
                            {{ items_formset.management_form }}
                            {% for form in items_formset %}
                            <div class="item-form" id="item-{{ forloop.counter0 }}">
                                {% if not forloop.first %}
                                    <button type="button" class="btn btn-sm btn-link text-danger remove-item" data-index="{{ forloop.counter0 }}">
                                        <i class="fas fa-times"></i> Remove
                                    </button>
                                {% endif %}
                                
                                <div class="item-type-toggle mb-3">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input item-type" type="radio" 
                                               name="item-{{ forloop.counter0 }}-type" 
                                               id="item-{{ forloop.counter0 }}-type-equipment" 
                                               value="equipment" checked>
                                        <label class="form-check-label" for="item-{{ forloop.counter0 }}-type-equipment">
                                            Equipment
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input item-type" type="radio" 
                                               name="item-{{ forloop.counter0 }}-type" 
                                               id="item-{{ forloop.counter0 }}-type-service" 
                                               value="service">
                                        <label class="form-check-label" for="item-{{ forloop.counter0 }}-type-service">
                                            Service
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="equipment-fields show-fields">
                                    <div class="row">
                                        <div class="col-md-6">
                                            {{ form.equipment|as_crispy_field }}
                                        </div>
                                        <div class="col-md-3">
                                            {{ form.quantity|as_crispy_field }}
                                        </div>
                                        <div class="col-md-3">
                                            {{ form.total_days|as_crispy_field }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            {{ form.daily_rate|as_crispy_field }}
                                        </div>
                                        <div class="col-md-6">
                                            {{ form.unit_price|as_crispy_field }}
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="service-fields">
                                    <div class="row">
                                        <div class="col-md-8">
                                            {{ form.service|as_crispy_field }}
                                        </div>
                                        <div class="col-md-4">
                                            {{ form.quantity|as_crispy_field }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            {{ form.unit_price|as_crispy_field }}
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 offset-md-6">
                                        <div class="form-group">
                                            <label>Subtotal</label>
                                            <div class="input-group">
                                                <span class="input-group-text">KSh</span>
                                                <input type="text" class="form-control subtotal-amount" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Booking Form -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body">
                    <h2 class="h5 mb-4">Rental Details</h2>
                    {% if form.errors %}
                        <div class="alert alert-danger">
                            <strong>Please correct the following errors:</strong>
                            <ul class="mb-0">
                                {% for field, errors in form.errors.items %}
                                    {% for error in errors %}
                                        <li>{{ field|title }}: {{ error }}</li>
                                    {% endfor %}
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    
                    <form method="post" id="bookingForm" novalidate>
                        {% csrf_token %}
                        
                        <!-- Hidden Fields -->
                        <input type="hidden" id="daily_rate" value="{{ equipment.daily_rate }}">
                        <input type="hidden" id="delivery_fee" value="{{ equipment.delivery_fee|default:'0' }}">
                        
                        <!-- Rental Period -->
                        <div class="row mb-4">
                            <div class="col-md-6 mb-3">
                                {{ form.start_date|as_crispy_field }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form.end_date|as_crispy_field }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form.pickup_time|as_crispy_field }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form.return_time|as_crispy_field }}
                            </div>
                        </div>
                        
                        <!-- Delivery Options -->
                        <div class="mb-4">
                            <div class="form-check form-switch mb-3">
                                {{ form.delivery_required|as_crispy_field }}
                            </div>
                            <div id="delivery-address-group" class="d-none">
                                {{ form.delivery_address|as_crispy_field }}
                            </div>
                        </div>
                        
                        <!-- Contact Information -->
                        <h2 class="h5 mb-4">Contact Information</h2>
                        <div class="row mb-4">
                            <div class="col-md-6 mb-3">
                                {{ form.customer_email|as_crispy_field }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form.customer_phone|as_crispy_field }}
                            </div>
                        </div>
                        
                        <!-- Special Requests -->
                        <div class="mb-4">
                            <label for="special_requests" class="form-label">Special Requests (Optional)</label>
                            <textarea class="form-control" id="special_requests" name="special_requests" 
                                    rows="3" placeholder="Any special requirements or instructions..."></textarea>
                        </div>
                        
                        <!-- Terms and Conditions -->
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="terms_agreed" required>
                                <label class="form-check-label" for="terms_agreed">
                                    I agree to the <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">Terms & Conditions</a> and 
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#privacyModal">Privacy Policy</a> *
                                </label>
                            </div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-calendar-check me-2"></i> Complete Booking
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Booking Summary -->
        <div class="col-lg-4">
            <div class="sticky-top" style="top: 20px;">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h2 class="h5 mb-4">Booking Summary</h2>
                        
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Daily Rate:</span>
                            <span>KSh <span id="dailyRate">{{ equipment.daily_rate|floatformat:2|intcomma }}</span></span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Number of Days:</span>
                            <span id="daysCount">1</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2" id="deliveryFeeRow">
                            <span class="text-muted">Delivery Fee:</span>
                            <span>KSh <span id="deliveryFee">0.00</span></span>
                        </div>
                        {% if equipment.security_deposit > 0 %}
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Security Deposit:</span>
                            <span>KSh <span id="securityDeposit">{{ equipment.security_deposit|floatformat:2|intcomma }}</span></span>
                        </div>
                        {% endif %}
                        
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Tax (16%):</span>
                            <span>KSh <span id="taxAmount">0.00</span></span>
                        </div>
                        
                        <hr class="my-3">
                        
                        <div class="d-flex justify-content-between fw-bold fs-5 mb-3">
                            <span>Total Amount:</span>
                            <span class="text-primary">KSh <span id="totalAmount">0.00</span></span>
                        </div>
                        
                        <div class="alert alert-info small">
                            <div class="d-flex">
                                <i class="fas fa-info-circle me-2 mt-1"></i>
                                <div>
                                    <p class="mb-1">You'll be charged the total amount upon booking confirmation.</p>
                                    {% if equipment.security_deposit > 0 %}
                                    <p class="mb-0">The security deposit of KSh {{ equipment.security_deposit|floatformat:2|intcomma }} 
                                    will be refunded after the equipment is returned in good condition.</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        {% if not user.is_authenticated %}
                        <div class="alert alert-warning small">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            Please <a href="{% url 'account_login' %}?next={{ request.path }}">login</a> or 
                            <a href="{% url 'account_signup' %}?next={{ request.path }}">create an account</a> to continue with your booking.
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Terms & Conditions Modal -->
<div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="termsModalLabel">Terms & Conditions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4>Rental Terms & Conditions</h4>
                <p><strong>1. Rental Period:</strong> The rental period begins at the time of equipment pickup and ends at the agreed return time. Late returns may be subject to additional charges.</p>
                <p><strong>2. Security Deposit:</strong> A security deposit is required at the time of rental and will be refunded upon safe return of the equipment, minus any damages or late fees.</p>
                <p><strong>3. Equipment Care:</strong> The renter is responsible for the equipment during the rental period and must return it in the same condition as received.</p>
                <p><strong>4. Cancellation Policy:</strong> Cancellations made within 24 hours of the rental start time may be subject to a cancellation fee.</p>
                <p><strong>5. Liability:</strong> The renter assumes all liability for the equipment during the rental period and is responsible for any loss, theft, or damage.</p>
                <p><em>Please note: These are placeholder terms. Please consult with a legal professional to create appropriate terms and conditions for your business.</em></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Privacy Policy Modal -->
<div class="modal fade" id="privacyModal" tabindex="-1" aria-labelledby="privacyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="privacyModalLabel">Privacy Policy</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4>Privacy Policy</h4>
                <p><strong>1. Information We Collect:</strong> We collect personal information such as name, email, phone number, and payment details to process your rental.</p>
                <p><strong>2. How We Use Your Information:</strong> Your information is used to process transactions, communicate with you, and improve our services.</p>
                <p><strong>3. Data Security:</strong> We implement security measures to protect your personal information, but no method of transmission over the internet is 100% secure.</p>
                <p><strong>4. Third-Party Services:</strong> We may use third-party services for payment processing, but we do not sell or share your personal information with third parties for marketing purposes.</p>
                <p><strong>5. Your Rights:</strong> You have the right to access, correct, or delete your personal information by contacting us.</p>
                <p><em>Please note: This is a placeholder privacy policy. Please consult with a legal professional to create a privacy policy that complies with applicable laws and regulations.</em></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get DOM elements
    const deliveryCheckbox = document.getElementById('id_delivery_required');
    const deliveryAddressGroup = document.getElementById('delivery-address-group');
    const deliveryFee = parseFloat(document.getElementById('delivery_fee').value) || 0;
    const dailyRate = parseFloat(document.getElementById('daily_rate').value) || 0;
    const securityDeposit = parseFloat('{{ equipment.security_deposit|default:0 }}') || 0;
    
    // Toggle delivery address field
    if (deliveryCheckbox) {
        // Initial state
        if (deliveryCheckbox.checked) {
            deliveryAddressGroup.classList.remove('d-none');
            document.getElementById('deliveryFee').textContent = deliveryFee.toFixed(2);
        } else {
            document.getElementById('deliveryFee').textContent = '0.00';
        }
        
        // Add change event listener
        deliveryCheckbox.addEventListener('change', function() {
            if (this.checked) {
                deliveryAddressGroup.classList.remove('d-none');
                document.getElementById('deliveryFee').textContent = deliveryFee.toFixed(2);
            } else {
                deliveryAddressGroup.classList.add('d-none');
                document.getElementById('deliveryFee').textContent = '0.00';
            }
            calculateTotal();
        });
    }
    
    // Calculate total amount function
    function calculateTotal() {
        const startDate = new Date(document.getElementById('id_start_date').value);
        const endDate = new Date(document.getElementById('id_end_date').value);
        
        // Reset if dates are invalid
        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
            updateSummary(0, 0, 0);
            return;
        }
        
        // Calculate number of days (inclusive of both start and end dates)
        const timeDiff = Math.abs(endDate - startDate);
        const days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1;
        
        // Calculate amounts
        const subtotal = days * dailyRate;
        const isDelivery = deliveryCheckbox.checked;
        const deliveryAmount = isDelivery ? deliveryFee : 0;
        const tax = subtotal * 0.16; // 16% tax
        const total = subtotal + deliveryAmount + tax;
        
        // Update UI
        document.getElementById('daysCount').textContent = days;
        updateSummary(subtotal, tax, total);
    }
    
    // Update summary section
    function updateSummary(subtotal, tax, total) {
        document.getElementById('taxAmount').textContent = tax.toFixed(2);
        document.getElementById('totalAmount').textContent = total.toFixed(2);
    }
    
    // Add event listeners for date changes
    const startDateInput = document.getElementById('id_start_date');
    const endDateInput = document.getElementById('id_end_date');
    
    if (startDateInput && endDateInput) {
        startDateInput.addEventListener('change', function() {
            // Set minimum end date to start date
            endDateInput.min = this.value;
            if (new Date(endDateInput.value) < new Date(this.value)) {
                endDateInput.value = this.value;
            }
            calculateTotal();
        });
        
        endDateInput.addEventListener('change', calculateTotal);
    }
    
    // Form validation
    const bookingForm = document.getElementById('bookingForm');
    if (bookingForm) {
        bookingForm.addEventListener('submit', function(e) {
            const termsAgreed = document.getElementById('terms_agreed');
            if (!termsAgreed.checked) {
                e.preventDefault();
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-danger mt-3';
                alertDiv.role = 'alert';
                alertDiv.innerHTML = 'Please agree to the Terms & Conditions and Privacy Policy to continue.';
                this.prepend(alertDiv);
                window.scrollTo({ top: 0, behavior: 'smooth' });
                return false;
            }
            
            // Add loading state to submit button
            const submitButton = this.querySelector('button[type="submit"]');
            if (submitButton) {
                submitButton.disabled = true;
                submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Processing...';
            }
            
            return true;
        });
    }
    
    // Initialize date pickers with min date
    const today = new Date().toISOString().split('T')[0];
    if (startDateInput) {
        startDateInput.min = today;
        // Set default start date to today if not set
        if (!startDateInput.value) {
            startDateInput.value = today;
        }
    }
    if (endDateInput) {
        endDateInput.min = today;
        // Set default end date to tomorrow if not set
        if (!endDateInput.value) {
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            endDateInput.value = tomorrow.toISOString().split('T')[0];
        }
    }
    
    // Initialize calculation
    calculateTotal();
    
    // Handle time input formatting
    const timeInputs = document.querySelectorAll('input[type="time"]');
    timeInputs.forEach(input => {
        if (!input.value) {
            input.value = '09:00'; // Default pickup time
        }
    });
});
</script>
{% endblock %}