{% extends 'services/base_services.html' %}
{% load static %}
{% load service_filters %}

{% block extra_css %}
<style>
    .service-gallery {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    }
    .main-image {
        height: 500px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    .main-image:hover {
        transform: scale(1.02);
    }
    .thumbnail-container {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }
    .thumbnail {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.3s ease;
    }
    .thumbnail:hover, .thumbnail.active {
        border-color: var(--bs-primary);
        transform: translateY(-3px);
    }
    .service-badge {
        font-size: 0.85rem;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .service-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
    }
    .price-tag {
        font-size: 2rem;
        font-weight: 700;
        color: var(--bs-primary);
    }
    .feature-list i {
        color: var(--bs-primary);
        margin-right: 10px;
        width: 24px;
        text-align: center;
    }
    .provider-card {
        transition: all 0.3s ease;
        border-radius: 12px;
        overflow: hidden;
    }
    .provider-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
    }
</style>
{% endblock %}

{% block page_header %}{{ service.title }}{% endblock %}
{% block page_subheader %}{{ service.short_description|default:"Premium service for all your production needs" }}{% endblock %}

{% block service_content %}
<div class="container py-4 py-lg-5">
    <div class="row g-4">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Service Gallery -->
            <div class="service-gallery mb-4" data-aos="fade-up">
                <div class="position-relative">
                    <!-- Main Image -->
                    <div class="ratio ratio-16x9 bg-light rounded-3 overflow-hidden">
                        {% if service.image %}
                            <img src="{{ service.image.url }}" 
                                 class="main-image w-100" 
                                 alt="{{ service.title }}"
                                 id="mainImage">
                        {% else %}
                            <div class="d-flex align-items-center justify-content-center bg-light" style="height: 100%;">
                                <i class="fas {{ service.icon|default:'fa-camera' }} fa-4x text-muted"></i>
                            </div>
                        {% endif %}
                        
                        <!-- Status Badges -->
                        <div class="position-absolute top-3 end-3 d-flex flex-column gap-2">
                            {% if service.is_available %}
                                <span class="service-badge bg-success text-white">
                                    <i class="fas fa-check-circle me-1"></i> Available Now
                                </span>
                            {% else %}
                                <span class="service-badge bg-secondary text-white">
                                    <i class="fas fa-clock me-1"></i> Currently Unavailable
                                </span>
                            {% endif %}
                            {% if service.is_featured %}
                                <span class="service-badge bg-warning text-dark">
                                    <i class="fas fa-star me-1"></i> Featured
                                </span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Thumbnails (if multiple images) -->
                    <div class="thumbnail-container mt-3">
                        {% if service.image %}
                            <img src="{{ service.image.url }}" 
                                 class="thumbnail active" 
                                 onclick="changeImage(this, '{{ service.image.url }}')">
                        {% endif %}
                        {% for image in service.images.all|slice:":4" %}
                            <img src="{{ image.image.url }}" 
                                 class="thumbnail" 
                                 onclick="changeImage(this, '{{ image.image.url }}')">
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <!-- Service Header -->
            <div class="service-header">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="d-flex align-items-center mb-2">
                            <span class="badge bg-primary-soft text-primary me-2">
                                <i class="fas {{ service.icon|default:'fa-tag' }} me-1"></i>
                                {{ service.get_category_display }}
                            </span>
                            <span class="text-muted small">
                                <i class="fas fa-map-marker-alt me-1"></i>
                                {{ service.location|default:"Nairobi, Kenya" }}
                            </span>
                        </div>
                        <h1 class="display-5 fw-bold mb-3">{{ service.title }}</h1>
                        <div class="d-flex align-items-center mb-3">
                            <div class="rating me-3">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= service.rating|default:5 %}
                                        <i class="fas fa-star text-warning"></i>
                                    {% else %}
                                        <i class="far fa-star text-warning"></i>
                                    {% endif %}
                                {% endfor %}
                                <span class="ms-2 text-muted">({{ service.review_count|default:0 }} reviews)</span>
                            </div>
                        </div>
                    </div>
                    <div class="text-end">
                        <div class="price-tag mb-1">${{ service.price|floatformat:2 }}</div>
                        <div class="text-muted small">per {{ service.get_pricing_unit_display|lower }}</div>
                        <button class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#bookingModal">
                            <i class="fas fa-calendar-check me-2"></i>Book Now
                        </button>
                    </div>
                </div>
            </div>
                    
                    <!-- Reviews Section -->
                    <div class="mb-5">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h3 class="h5 fw-bold mb-0">Customer Reviews</h3>
                            <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#writeReviewModal">
                                <i class="fas fa-pen me-1"></i> Write a Review
                            </button>
                        </div>
                        
                        <!-- Review Stats -->
                        <div class="row g-4 mb-4">
                            <div class="col-md-4 text-center">
                                <div class="display-4 fw-bold text-primary">{{ service.average_rating|default:5.0|floatformat:1 }}</div>
                                <div class="rating mb-2">
                                    {% for i in "12345" %}
                                        {% if forloop.counter <= service.average_rating|default:5 %}
                                            <i class="fas fa-star text-warning"></i>
                                        {% else %}
                                            <i class="far fa-star text-warning"></i>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <div class="text-muted small">Based on {{ service.review_count|default:0 }} reviews</div>
                            </div>
                            <div class="col-md-8">
                                {% for i in "54321" %}
                                <div class="d-flex align-items-center mb-2">
                                    <div class="text-nowrap me-2" style="width: 20px;">{{ i }} star</div>
                                    <div class="progress flex-grow-1" style="height: 8px;">
                                        <div class="progress-bar bg-warning" role="progressbar" 
                                             style="width: {{ service.average_rating|default:5|multiply:20 }}%" 
                                             aria-valuenow="{{ service.average_rating|default:5|multiply:20 }}" 
                                             aria-valuemin="0" 
                                             aria-valuemax="100"></div>
                                    </div>
                                    <div class="text-muted text-end ms-2" style="width: 30px;">
                                        {{ service.review_count|default:0 }}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        
                        <!-- Review List -->
                        <div class="list-group list-group-flush">
                            {% for review in service.reviews.all|slice:":3" %}
                            <div class="list-group-item px-0 py-4">
                                <div class="d-flex mb-2">
                                    <div class="me-3">
                                        {% if review.user.profile_picture %}
                                            <img src="{{ review.user.profile_picture.url }}" 
                                                 class="rounded-circle" 
                                                 width="48" 
                                                 height="48"
                                                 alt="{{ review.user.get_full_name }}"
                                                 style="object-fit: cover;">
                                        {% else %}
                                            <div class="rounded-circle bg-light d-flex align-items-center justify-content-center" 
                                                 style="width: 48px; height: 48px;">
                                                <i class="fas fa-user text-muted"></i>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h6 class="mb-0">{{ review.user.get_full_name|default:"Anonymous" }}</h6>
                                            <small class="text-muted">{{ review.created_at|date:"M d, Y" }}</small>
                                        </div>
                                        <div class="rating small text-warning mb-1">
                                            {% for i in "12345" %}
                                                {% if forloop.counter <= review.rating %}
                                                    <i class="fas fa-star"></i>
                                                {% else %}
                                                    <i class="far fa-star"></i>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                        <p class="small text-muted mb-0">{{ review.comment|truncatewords:30 }}</p>
                                    </div>
                                </div>
                            </div>
                            {% empty %}
                            <div class="text-center py-5">
                                <i class="fas fa-comment-alt fa-3x text-muted mb-3"></i>
                                <p class="text-muted mb-0">No reviews yet. Be the first to review!</p>
                            </div>
                            {% endfor %}
                        </div>
                        
                        {% if service.reviews.count > 3 %}
                        <div class="text-center mt-4">
                            <a href="#" class="btn btn-outline-primary">
                                View All Reviews ({{ service.reviews.count }})
                            </a>
                        </div>
                        {% endif %}
                    </div>
                    
                    <!-- Service Description -->
                    <div class="mb-5">
                        <h3 class="h5 fw-bold mb-3">Service Description</h3>
                        <div class="text-muted">
                            {{ service.description|linebreaks }}
                        </div>
                    </div>
                    
                    <!-- Included Equipment -->
                    {% include 'services/partials/service_equipment.html' %}
                    
                    <!-- Service Features -->
                    {% if service.features.all %}
                    <div class="mb-5">
                        <h3 class="h5 fw-bold mb-3">What's Included</h3>
                        <div class="row g-3">
                            {% for feature in service.features.all|slice:":4" %}
                            <div class="col-md-6">
                                <div class="d-flex">
                                    <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                    <span class="text-muted">{{ feature.name }}</span>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% if service.features.count > 4 %}
                        <div class="mt-3">
                            <button class="btn btn-link p-0 text-decoration-none" type="button" data-bs-toggle="collapse" data-bs-target="#moreFeatures">
                                + {{ service.features.count|add:"-4" }} more features
                            </button>
                            <div class="collapse mt-2" id="moreFeatures">
                                <div class="row g-3">
                                    {% for feature in service.features.all|slice:"4:" %}
                                    <div class="col-md-6">
                                        <div class="d-flex">
                                            <i class="fas fa-check-circle text-success mt-1 me-2"></i>
                                            <span class="text-muted">{{ feature.name }}</span>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <!-- Service Provider -->
                    <div class="card border-0 bg-light p-4 mb-5">
                        <div class="row g-4 align-items-center">
                            <div class="col-auto">
                                {% if service.provider.profile_picture %}
                                    <img src="{{ service.provider.profile_picture.url }}" 
                                         class="rounded-circle" 
                                         width="80" 
                                         height="80"
                                         alt="{{ service.provider.get_full_name }}"
                                         style="object-fit: cover;">
                                {% else %}
                                    <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" 
                                         style="width: 80px; height: 80px;">
                                        <i class="fas fa-user fa-2x text-primary"></i>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="col">
                                <h4 class="h5 mb-1">{{ service.provider.get_full_name|default:"PRACA Team" }}</h4>
                                <div class="text-muted mb-2">
                                    <i class="fas fa-star text-warning"></i>
                                    <span class="ms-1">{{ service.provider.average_rating|default:5.0|floatformat:1 }} ({{ service.provider.review_count|default:0 }} reviews)</span>
                                </div>
                                <div class="d-flex flex-wrap gap-2">
                                    <a href="#contact" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-envelope me-1"></i> Contact
                                    </a>
                                    <a href="{% url 'services:provider' service.provider.id %}" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-user me-1"></i> View Profile
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                            <h1 class="h2 mb-2">{{ service.title }}</h1>
                            <div class="d-flex align-items-center mb-2">
                                <div class="d-flex align-items-center me-3">
                                    <img src="{{ service.provider.profile.image.url|default:'/static/images/default-avatar.png' }}" 
                                         class="rounded-circle me-2" width="32" height="32" 
                                         alt="{{ service.provider.get_full_name }}">
                                    <span class="text-muted">
                                        {{ service.provider.get_full_name|default:service.provider.username }}
                                    </span>
                                </div>
                                <div class="rating">
                                    {% for i in "12345" %}
                                        {% if forloop.counter <= service.rating|default:4 %}
                                            <i class="fas fa-star text-warning"></i>
                                        {% else %}
                                            <i class="far fa-star text-warning"></i>
                                        {% endif %}
                                    {% endfor %}
                                    <span class="ms-1">({{ service.review_count|default:'0' }} reviews)</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3 mt-md-0">
                            <div class="h3 text-primary mb-0">
                                {% if service.price > 0 %}
                                    ${{ service.price|floatformat:2 }}
                                {% else %}
                                    Contact for Pricing
                                {% endif %}
                            </div>
                            <div class="text-muted text-md-end">
                                {{ service.price_unit|default:"Per day" }}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Service Actions -->
                    <div class="d-grid gap-2 d-md-flex mb-4">
                        {% if user.is_authenticated and user != service.provider %}
                            <a href="#contact-form" class="btn btn-primary btn-lg flex-grow-1">
                                <i class="fas fa-envelope me-2"></i> Contact
                            </a>
                            <button class="btn btn-outline-primary btn-lg" data-bs-toggle="modal" data-bs-target="#enquireModal">
                                <i class="fas fa-question-circle me-2"></i> Enquire
                            </button>
                        {% elif not user.is_authenticated %}
                            <a href="{% url 'account_login' %}?next={{ request.path }}" class="btn btn-primary btn-lg flex-grow-1">
                                <i class="fas fa-sign-in-alt me-2"></i> Login to Book
                            </a>
                        {% else %}
                            <a href="{% url 'services:update' service.pk %}" class="btn btn-outline-secondary btn-lg flex-grow-1">
                                <i class="fas fa-edit me-2"></i> Edit Service
                            </a>
                        {% endif %}
                    </div>

                    <!-- Service Description -->
                    <div class="mb-5">
                        <h4 class="h5 mb-3">
                            <i class="fas fa-info-circle text-primary me-2"></i>Service Description
                        </h4>
                        <div class="mb-4">
                            {{ service.description|linebreaks }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Booking Card -->
            <div class="card shadow-sm sticky-top" style="top: 20px;">
                <div class="card-body">
                    <h5 class="h5 mb-4">
                        <i class="fas fa-calendar-check text-primary me-2"></i>Book This Service
                    </h5>
                    
                    {% if user.is_authenticated and user != service.provider %}
                        {% if service.is_available %}
                            <form method="post" action="{% url 'bookings:create_service_booking' service.id %}" class="needs-validation" novalidate>
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label for="start_date" class="form-label small">Start Date</label>
                                    <input type="date" class="form-control" id="start_date" name="start_date" required 
                                           min="{{ today|date:'Y-m-d' }}">
                                </div>
                                <div class="mb-3">
                                    <label for="end_date" class="form-label small">End Date</label>
                                    <input type="date" class="form-control" id="end_date" name="end_date" required 
                                           min="{{ today|date:'Y-m-d' }}">
                                </div>
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="fas fa-shopping-cart me-2"></i> Book Now
                                </button>
                            </form>
                        {% else %}
                            <div class="alert alert-warning mb-0">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                This service is currently unavailable.
                            </div>
                        {% endif %}
                    {% elif not user.is_authenticated %}
                        <div class="text-center py-3">
                            <p class="mb-3">Sign in to book this service</p>
                            <a href="{% url 'account_login' %}?next={{ request.path }}" class="btn btn-primary w-100">
                                <i class="fas fa-sign-in-alt me-2"></i> Sign In
                            </a>
                        </div>
                    {% else %}
                        <div class="alert alert-info mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            You cannot book your own service.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
    
    // Initialize AOS
    AOS.init({
        duration: 800,
        easing: 'ease-in-out',
        once: true
    });
    
    // Change main image when thumbnail is clicked
    function changeImage(element, imageUrl) {
        document.getElementById('mainImage').src = imageUrl;
        
        // Update active thumbnail
        document.querySelectorAll('.thumbnail').forEach(function(thumb) {
            thumb.classList.remove('active');
        });
        element.classList.add('active');
    }
    
    // Add smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Initialize date picker
    var today = new Date();
    var dateInput = document.getElementById('date');
    if (dateInput) {
        // Set min date to today
        dateInput.min = today.toISOString().split('T')[0];
        
        // Disable past dates
        dateInput.addEventListener('input', function() {
            var selectedDate = new Date(this.value);
            if (selectedDate < today) {
                    this.value = '';
                    alert('Please select a future date');
                }
            });
        }
        
        // Rating stars interaction
        var stars = document.querySelectorAll('.rating-input i');
        var ratingInput = document.getElementById('rating');
        
        if (stars.length && ratingInput) {
            stars.forEach(function(star) {
                star.addEventListener('click', function() {
                    var rating = this.getAttribute('data-rating');
                    ratingInput.value = rating;
                    
                    // Update star display
                    stars.forEach(function(s, index) {
                        if (index < rating) {
                            s.classList.remove('far');
                            s.classList.add('fas', 'active');
                        } else {
                            s.classList.remove('fas', 'active');
                            s.classList.add('far');
                        }
                    });
                });
            });
        }
        
        // Form validation
        var forms = document.querySelectorAll('.needs-validation');
        Array.prototype.slice.call(forms).forEach(function(form) {
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
        
        // Show success message if URL has success parameter
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('success')) {
            const toastEl = document.getElementById('successToast');
            if (toastEl) {
                const toast = new bootstrap.Toast(toastEl);
                const message = urlParams.get('message') || 'Your action was successful!';
                const toastMessage = document.getElementById('toastMessage');
                if (toastMessage) {
                    toastMessage.textContent = message;
                }
                toast.show();
            }
        }
        
        // Initialize AOS animations
        if (typeof AOS !== 'undefined') {
            AOS.init({
                duration: 600,
                easing: 'ease-out',
                once: true
            });
        }
    });
</script>
<style>
    /* Service Detail Styles */
    .service-detail-image {
        height: 500px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .service-features li {
        margin-bottom: 0.75rem;
        padding-left: 2rem;
        position: relative;
        line-height: 1.6;
    }
    
    .service-features li:before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--primary);
        font-weight: bold;
    }
    
    .feature-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .sticky-sidebar {
        position: sticky;
        top: 100px;
    }
    
    .rating-input i {
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .rating-input i:hover,
    .rating-input i.active {
        transform: scale(1.2);
    }
    
    /* Responsive adjustments */
    @media (max-width: 991.98px) {
        .service-detail-image {
            height: 400px;
        }
        
        .sticky-sidebar {
            position: static;
            margin-top: 2rem;
        }
    }
    
    @media (max-width: 767.98px) {
        .service-detail-image {
            height: 300px;
        }
    }
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0.75rem;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

.bg-primary-soft {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.rating {
    color: #ffc107;
}
</style>

<!-- Write Review Modal -->
<div class="modal fade" id="writeReviewModal" tabindex="-1" aria-labelledby="writeReviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="writeReviewModalLabel">Write a Review</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="{% url 'services:add_review' service.slug %}" class="needs-validation" novalidate id="reviewForm">
                    {% csrf_token %}
                    <div class="mb-4">
                        <label class="form-label fw-medium">Your Rating</label>
                        <div class="rating-input mb-2">
                            {% for i in "12345" %}
                                <i class="far fa-star text-warning" data-rating="{{ forloop.counter }}" style="font-size: 1.5rem; cursor: pointer;"></i>
                            {% endfor %}
                            <input type="hidden" name="rating" id="rating" value="5" required>
                        </div>
                        <div class="invalid-feedback">
                            Please select a rating.
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="reviewComment" class="form-label fw-medium">Your Review</label>
                        <textarea class="form-control" id="reviewComment" name="comment" rows="4" required
                                  placeholder="Share your experience with this service..."></textarea>
                        <div class="invalid-feedback">
                            Please write your review.
                        </div>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane me-2"></i>Submit Review
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Contact Provider Modal -->
<div class="modal fade" id="contactProviderModal" tabindex="-1" aria-labelledby="contactProviderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="contactProviderModalLabel">
                    <i class="fas fa-envelope me-2"></i>Contact {{ service.provider.get_full_name|default:"Provider" }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="{% url 'services:contact_provider' service.id %}" class="needs-validation" novalidate>
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="contactName" class="form-label">Your Name</label>
                        <input type="text" class="form-control" id="contactName" name="name" required>
                        <div class="invalid-feedback">
                            Please enter your name.
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="contactEmail" class="form-label">Email Address</label>
                        <input type="email" class="form-control" id="contactEmail" name="email" required>
                        <div class="invalid-feedback">
                            Please enter a valid email address.
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="contactMessage" class="form-label">Message</label>
                        <textarea class="form-control" id="contactMessage" name="message" rows="4" required>Hi, I'm interested in your "{{ service.title }}" service. Could you please provide more details?</textarea>
                        <div class="invalid-feedback">
                            Please enter your message.
                        </div>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane me-2"></i>Send Message
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Success Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1090">
    <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body d-flex align-items-center">
                <i class="fas fa-check-circle me-2"></i>
                <span id="toastMessage">Your action was successful!</span>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

{% endblock %}