{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}

{% block title %}Select Services | {{ property.property_name }} | Home in Sri Lanka{% endblock %}


{% block extra_css %}
<style>
    .pm-service-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.12), transparent 32%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.10), transparent 34%),
            linear-gradient(180deg, #f8fafc 0%, #eef7f2 48%, #ffffff 100%);
    }

    .pm-service-hero {
        border-radius: 36px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 34%),
            linear-gradient(135deg, #052e25 0%, #0f766e 100%);
        color: #fff;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
        overflow: hidden;
    }

    .pm-service-hero-inner {
        padding: 2.6rem 2.4rem;
    }

    .pm-service-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.48rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fef3c7;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 1rem;
    }

    .pm-service-hero h1 {
        font-size: clamp(2.1rem, 4vw, 3.35rem);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin-bottom: 0.8rem;
    }

    .pm-service-subtitle {
        color: #fbbf24;
        font-weight: 900;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .pm-service-hero p {
        max-width: 880px;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.78;
        font-size: 1.03rem;
        margin-bottom: 1.45rem;
    }

    .pm-service-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .pm-service-btn-primary {
        border-radius: 999px;
        border: none;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f2937;
        font-weight: 900;
        padding: 0.9rem 1.45rem;
        box-shadow: 0 16px 32px rgba(245, 158, 11, 0.22);
    }

    .pm-service-btn-primary:hover {
        color: #111827;
        transform: translateY(-1px);
    }

    .pm-service-btn-outline {
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        font-weight: 800;
        padding: 0.9rem 1.45rem;
    }

    .pm-service-btn-outline:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    .pm-service-layout-card {
        border-radius: 34px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.09);
        overflow: hidden;
    }

    .pm-service-layout-header {
        padding: 1.7rem 1.9rem 1.25rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .pm-section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #0f766e;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.45rem;
    }

    .pm-service-layout-header h2 {
        color: #0f172a;
        font-weight: 900;
        font-size: 1.55rem;
        margin-bottom: 0.35rem;
    }

    .pm-service-layout-header p {
        color: #64748b;
        line-height: 1.68;
        margin-bottom: 0;
    }

    .pm-service-layout-body {
        padding: 1.9rem;
    }

    .pm-category-block {
        margin-bottom: 2rem;
    }

    .pm-category-block:last-child {
        margin-bottom: 0;
    }

    .pm-category-title {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 1rem;
    }

    .pm-category-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, rgba(15, 118, 110, 0.24), transparent);
    }

    .pm-service-card {
        border-radius: 28px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
        overflow: hidden;
        height: 100%;
        transition: 0.2s ease;
    }

    .pm-service-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 44px rgba(15, 23, 42, 0.11);
    }

    .pm-service-card-top {
        padding: 1.25rem 1.25rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        gap: 0.85rem;
        align-items: flex-start;
    }

    .pm-service-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 19px;
        background: #ecfdf5;
        color: #0f766e;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
    }

    .pm-service-card-title {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.35rem;
        line-height: 1.3;
    }

    .pm-service-description {
        color: #64748b;
        line-height: 1.6;
        font-size: 0.92rem;
        margin-bottom: 0;
    }

    .pm-service-select-row {
        padding: 1rem 1.25rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .pm-service-checkbox-wrap {
        display: flex;
        gap: 0.7rem;
        align-items: flex-start;
    }

    .pm-service-checkbox-wrap .form-check-input {
        width: 1.2rem;
        height: 1.2rem;
        margin-top: 0.15rem;
        border-radius: 0.38rem;
        border-color: #94a3b8;
    }

    .pm-service-checkbox-wrap .form-check-input:checked {
        background-color: #0f766e;
        border-color: #0f766e;
    }

    .pm-service-checkbox-wrap label {
        color: #0f172a;
        font-weight: 900;
        line-height: 1.45;
    }

    .pm-service-options {
        padding: 1.25rem;
    }

    .pm-service-options .form-label {
        color: #0f172a;
        font-weight: 800;
        font-size: 0.88rem;
        margin-bottom: 0.45rem;
    }

    .pm-service-options .form-control,
    .pm-service-options .form-select {
        border-radius: 16px;
        border: 1px solid #dbe4ee;
        min-height: 48px;
        color: #0f172a;
        box-shadow: none;
    }

    .pm-service-options textarea.form-control {
        min-height: 95px;
        resize: vertical;
    }

    .pm-service-options .form-control:focus,
    .pm-service-options .form-select:focus {
        border-color: #0f766e;
        box-shadow: 0 0 0 0.22rem rgba(15, 118, 110, 0.12);
    }

    .pm-pricing-note {
        margin-top: 1rem;
        border-radius: 18px;
        padding: 0.85rem 0.95rem;
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .pm-selected-service-note {
        border-radius: 18px;
        padding: 0.82rem 0.95rem;
        background: #ecfdf5;
        border: 1px solid #99f6e4;
        color: #115e59;
        font-size: 0.86rem;
        line-height: 1.55;
        margin-bottom: 1rem;
    }

    .pm-form-submit-bar {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin-top: 2rem;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 -12px 35px rgba(15, 23, 42, 0.12);
        backdrop-filter: blur(12px);
        padding: 1rem;
    }

    .pm-submit-services-btn {
        border-radius: 999px;
        border: none;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f2937;
        font-weight: 900;
        min-height: 54px;
        padding: 0.85rem 1.4rem;
        box-shadow: 0 16px 32px rgba(245, 158, 11, 0.22);
    }

    .pm-submit-services-btn:hover {
        color: #111827;
        transform: translateY(-1px);
    }

    .pm-summary-box {
        border-radius: 30px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 30%),
            linear-gradient(135deg, #f8fafc, #ecfdf5);
        border: 1px solid rgba(15, 118, 110, 0.18);
        padding: 1.5rem;
    }

    .pm-summary-box h4 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 1rem;
    }

    .pm-summary-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .pm-summary-list li {
        display: flex;
        gap: 0.7rem;
        color: #475569;
        line-height: 1.6;
        margin-bottom: 0.8rem;
    }

    .pm-summary-list li:last-child {
        margin-bottom: 0;
    }

    .pm-summary-list i {
        color: #0f766e;
        margin-top: 0.18rem;
    }

    @media (max-width: 767.98px) {
        .pm-service-hero-inner,
        .pm-service-layout-header,
        .pm-service-layout-body {
            padding-left: 1.3rem;
            padding-right: 1.3rem;
        }

        .pm-service-hero,
        .pm-service-layout-card {
            border-radius: 28px;
        }

        .pm-service-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .pm-service-actions .btn {
            width: 100%;
            min-height: 54px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .pm-form-submit-bar .row {
            gap: 0.75rem;
        }
    }
</style>
{% endblock %}


{% block content %}
<section class="pm-service-page py-5">
    <div class="container">

        <!-- HERO -->
        <div class="pm-service-hero mb-4">
            <div class="pm-service-hero-inner">

                <span class="pm-service-badge">
                    <i class="bi bi-ui-checks-grid"></i>
                    Maintenance Service Selection
                </span>

                <h1>
                    Select Care Services for {{ property.property_name }}
                </h1>

                <div class="pm-service-subtitle">
                    {{ property.get_property_category_display }}
                </div>

                <p>
                    Choose the property care services you want Ensolanka to consider for this property.
                    These selections will later support monthly estimate calculations, staff review,
                    and final care-plan preparation.
                </p>

                <div class="pm-service-actions">
                    <a href="{% url 'property_manager_app:managed_property_detail' property.pk %}"
                       class="btn pm-service-btn-outline">
                        <i class="bi bi-arrow-left me-2"></i>
                        Back to Property
                    </a>

                    <a href="{% url 'property_manager_app:managed_property_list' %}"
                       class="btn pm-service-btn-primary">
                        <i class="bi bi-houses-fill me-2"></i>
                        My Properties
                    </a>
                </div>

            </div>
        </div>


        <div class="row g-4">
            <div class="col-lg-8">

                <form method="post">
                    {% csrf_token %}

                    <div class="pm-service-layout-card">

                        <div class="pm-service-layout-header">
                            <span class="pm-section-kicker">
                                <i class="bi bi-list-check"></i>
                                Available Services
                            </span>

                            <h2>
                                Choose What You Need
                            </h2>

                            <p>
                                Tick the services you want for this property. You can set frequency,
                                expected visits, and notes for each selected service.
                            </p>
                        </div>

                        <div class="pm-service-layout-body">

                            {% for category_label, service_items in grouped_services.items %}

                                <div class="pm-category-block">

                                    <h3 class="pm-category-title">
                                        <i class="bi bi-folder2-open"></i>
                                        {{ category_label }}
                                    </h3>

                                    <div class="row g-4">

                                        {% for item in service_items %}
                                            {% with service=item.service selection=item.selection %}

                                                <div class="col-md-12">
                                                    <div class="pm-service-card">

                                                        <div class="pm-service-card-top">
                                                            <span class="pm-service-icon">
                                                                {% if service.icon_class %}
                                                                    <i class="{{ service.icon_class }}"></i>
                                                                {% else %}
                                                                    <i class="bi bi-tools"></i>
                                                                {% endif %}
                                                            </span>

                                                            <div>
                                                                <h4 class="pm-service-card-title">
                                                                    {{ service.name }}
                                                                </h4>

                                                                <p class="pm-service-description">
                                                                    {{ service.short_description|default:service.description|default:"Service details will be reviewed by Ensolanka staff." }}
                                                                </p>
                                                            </div>
                                                        </div>


                                                        <div class="pm-service-select-row">
                                                            <div class="pm-service-checkbox-wrap">
                                                                <input type="checkbox"
                                                                       name="selected_services"
                                                                       value="{{ service.id }}"
                                                                       id="service_{{ service.id }}"
                                                                       class="form-check-input service-toggle"
                                                                       data-target="service_options_{{ service.id }}"
                                                                       {% if item.is_selected %}checked{% endif %}>

                                                                <div>
                                                                    <label for="service_{{ service.id }}">
                                                                        Select this service
                                                                    </label>

                                                                    {% if item.is_selected %}
                                                                        <div class="text-success small fw-bold mt-1">
                                                                            Currently selected
                                                                        </div>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        </div>


                                                        <div id="service_options_{{ service.id }}"
                                                             class="pm-service-options {% if not item.is_selected %}d-none{% endif %}">

                                                            {% if item.is_selected %}
                                                                <div class="pm-selected-service-note">
                                                                    <strong>Status:</strong>
                                                                    {{ selection.get_selection_status_display }}
                                                                    {% if selection.final_monthly_amount_usd %}
                                                                        · Final monthly amount:
                                                                        ${{ selection.final_monthly_amount_usd }}
                                                                    {% elif selection.estimated_monthly_amount_usd %}
                                                                        · Estimated monthly amount:
                                                                        ${{ selection.estimated_monthly_amount_usd }}
                                                                    {% endif %}
                                                                </div>
                                                            {% endif %}

                                                            <div class="row g-3">

                                                                <div class="col-md-6">
                                                                    <label class="form-label"
                                                                           for="frequency_{{ service.id }}">
                                                                        Frequency
                                                                    </label>

                                                                    <select name="frequency_{{ service.id }}"
                                                                            id="frequency_{{ service.id }}"
                                                                            class="form-select">
                                                                        {% for value, label in frequency_choices %}
                                                                            <option value="{{ value }}"
                                                                                {% if selection and selection.frequency == value %}selected{% elif not selection and value == 'monthly_once' %}selected{% endif %}>
                                                                                {{ label }}
                                                                            </option>
                                                                        {% endfor %}
                                                                    </select>
                                                                </div>

                                                                <div class="col-md-6">
                                                                    <label class="form-label"
                                                                           for="requested_visits_per_month_{{ service.id }}">
                                                                        Requested Visits / Month
                                                                    </label>

                                                                    <input type="number"
                                                                           name="requested_visits_per_month_{{ service.id }}"
                                                                           id="requested_visits_per_month_{{ service.id }}"
                                                                           class="form-control"
                                                                           min="0"
                                                                           max="31"
                                                                           value="{% if selection %}{{ selection.requested_visits_per_month }}{% else %}1{% endif %}">
                                                                </div>

                                                                <div class="col-md-12">
                                                                    <label class="form-label"
                                                                           for="custom_frequency_note_{{ service.id }}">
                                                                        Custom Frequency Note
                                                                    </label>

                                                                    <input type="text"
                                                                           name="custom_frequency_note_{{ service.id }}"
                                                                           id="custom_frequency_note_{{ service.id }}"
                                                                           class="form-control"
                                                                           placeholder="Optional: Explain custom frequency if needed"
                                                                           value="{% if selection %}{{ selection.custom_frequency_note }}{% endif %}">
                                                                </div>

                                                                <div class="col-md-12">
                                                                    <label class="form-label"
                                                                           for="owner_note_{{ service.id }}">
                                                                        Owner Note for This Service
                                                                    </label>

                                                                    <textarea name="owner_note_{{ service.id }}"
                                                                              id="owner_note_{{ service.id }}"
                                                                              class="form-control"
                                                                              placeholder="Optional: Tell us what you expect for this service">{% if selection %}{{ selection.owner_note }}{% endif %}</textarea>
                                                                </div>

                                                            </div>

                                                            <div class="pm-pricing-note">
                                                                {% if service.requires_staff_quote %}
                                                                    <strong>Pricing:</strong>
                                                                    This service may require staff review or a custom quotation.
                                                                {% elif service.is_calculator_enabled %}
                                                                    <strong>Pricing:</strong>
                                                                    This service can later contribute to the monthly estimate calculator.
                                                                {% else %}
                                                                    <strong>Pricing:</strong>
                                                                    This selection will be reviewed before final pricing is confirmed.
                                                                {% endif %}
                                                            </div>

                                                        </div>

                                                    </div>
                                                </div>

                                            {% endwith %}
                                        {% endfor %}

                                    </div>
                                </div>

                            {% empty %}

                                <div class="alert alert-warning rounded-4 mb-0">
                                    No active maintenance services are available yet.
                                    Please add service types from Django admin first.
                                </div>

                            {% endfor %}

                        </div>
                    </div>


                    <div class="pm-form-submit-bar">
                        <div class="row align-items-center g-3">

                            <div class="col-md-7">
                                <div class="fw-bold text-dark">
                                    Save your selected services for this property
                                </div>
                                <div class="text-muted small">
                                    You can update these selections again before final review.
                                </div>
                            </div>

                            <div class="col-md-5">
                                <button type="submit"
                                        class="btn pm-submit-services-btn w-100">
                                    <i class="bi bi-save-fill me-2"></i>
                                    Save Service Selections
                                </button>
                            </div>

                        </div>
                    </div>

                </form>

            </div>


            <div class="col-lg-4">
                <div class="pm-summary-box sticky-lg-top" style="top: 105px;">
                    <h4>
                        How This Helps the Care Plan
                    </h4>

                    <ul class="pm-summary-list">
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>
                                Service selections define what the owner expects from Ensolanka.
                            </span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>
                                Frequency and visits per month help estimate workload.
                            </span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>
                                Some services can later be priced automatically by the calculator.
                            </span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>
                                Staff can review selected services before approving a final care plan.
                            </span>
                        </li>
                    </ul>

                    <div class="alert alert-warning rounded-4 mt-4 mb-0">
                        <strong>Note:</strong>
                        Saving service selections does not confirm final pricing.
                        Final service plan and monthly charges will be confirmed after review.
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
{% endblock %}


{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const serviceToggles = document.querySelectorAll('.service-toggle');

        serviceToggles.forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                const targetId = checkbox.getAttribute('data-target');
                const optionsBox = document.getElementById(targetId);

                if (!optionsBox) {
                    return;
                }

                if (checkbox.checked) {
                    optionsBox.classList.remove('d-none');
                } else {
                    optionsBox.classList.add('d-none');
                }
            });
        });
    });
</script>
{% endblock %}