{% extends 'myadmin/base_myadmin.html' %}

{% block title %}Visit Detail | {{ visit.visit_title }} | MyAdmin{% endblock %}

{% block content %}
<style>
    .visit-detail-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.08), transparent 30%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 32%),
            linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }

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

    .detail-hero h1 {
        font-size: clamp(2.1rem, 4vw, 3.35rem);
        font-weight: 950;
        letter-spacing: -.04em;
        margin-bottom: .65rem;
    }

    .detail-hero p {
        color: rgba(255,255,255,.88);
        line-height: 1.75;
        max-width: 900px;
        margin-bottom: 1.25rem;
    }

    .detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .8rem;
    }

    .detail-actions .btn {
        border-radius: 999px;
        font-weight: 900;
    }

    .detail-card,
    .photo-card,
    .stat-card {
        border-radius: 32px;
        border: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .stat-card {
        padding: 1.35rem;
        height: 100%;
    }

    .stat-label {
        color: #64748b;
        font-size: .84rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-weight: 900;
        margin-bottom: .35rem;
    }

    .stat-value {
        color: #0f172a;
        font-size: 2rem;
        font-weight: 950;
        line-height: 1;
    }

    .detail-card-header {
        padding: 1.55rem 1.75rem 1.05rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .detail-card-header h2,
    .detail-card-header h3 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .35rem;
    }

    .detail-card-header p {
        color: #64748b;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .detail-card-body {
        padding: 1.75rem;
    }

    .detail-line {
        padding: .9rem 0;
        border-bottom: 1px dashed #dbe4ee;
    }

    .detail-line:last-child {
        border-bottom: 0;
    }

    .detail-label {
        color: #64748b;
        font-size: .85rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .045em;
        margin-bottom: .25rem;
    }

    .detail-value {
        color: #0f172a;
        font-weight: 850;
        line-height: 1.65;
    }

    .note-box {
        border-radius: 24px;
        padding: 1.15rem 1.2rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #334155;
        line-height: 1.72;
    }

    .visit-status-pill {
        display: inline-flex;
        border-radius: 999px;
        padding: .45rem .85rem;
        font-size: .82rem;
        font-weight: 900;
    }

    .photo-grid-item {
        border-radius: 28px;
        border: 1px solid #e2e8f0;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
        height: 100%;
    }

    .photo-grid-item img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        display: block;
    }

    .photo-info {
        padding: 1rem;
    }

    .photo-title {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: .35rem;
    }

    .photo-meta {
        color: #64748b;
        font-size: .88rem;
        line-height: 1.6;
    }

    .photo-actions {
        border-top: 1px solid #e2e8f0;
        padding: 1rem;
    }

    .empty-box {
        border-radius: 28px;
        padding: 1.6rem;
        border: 1px dashed rgba(15,118,110,.35);
        background: #fff;
        color: #475569;
    }

    @media (max-width: 767.98px) {
        .detail-hero {
            padding: 2rem 1.35rem;
            border-radius: 28px;
        }

        .detail-card-header,
        .detail-card-body {
            padding-left: 1.3rem;
            padding-right: 1.3rem;
        }

        .photo-grid-item img {
            height: 210px;
        }
    }
</style>

<section class="visit-detail-page py-5">
    <div class="container">

        <div class="detail-hero mb-4">
            <h1>{{ visit.visit_title }}</h1>

            <p>
                Detailed maintenance visit record for
                <strong>{{ property.property_name }}</strong>.
                Review visit status, notes, staff assignment, and uploaded field photos.
            </p>

            <div class="detail-actions">

                <a href="{% url 'myadmin:property_care_visit_list' %}"
                class="btn btn-light">
                    <i class="bi bi-arrow-left me-2"></i>
                    Back to Visits
                </a>

                <a href="{% url 'myadmin:property_care_visit_update' visit.pk %}"
                class="btn btn-info">
                    <i class="bi bi-pencil-square me-2"></i>
                    Edit Visit
                </a>

                <a href="{% url 'myadmin:property_care_visit_photo_upload' visit.pk %}"
                class="btn btn-warning">
                    <i class="bi bi-images me-2"></i>
                    Upload Visit Photo
                </a>

                {% if inspection_report %}
                    <a href="{% url 'myadmin:property_care_inspection_report_detail' inspection_report.pk %}"
                    class="btn btn-success">
                        <i class="bi bi-file-earmark-medical-fill me-2"></i>
                        Open Inspection Report
                    </a>
                {% else %}
                    <a href="{% url 'myadmin:property_care_inspection_report_create' visit.pk %}"
                    class="btn btn-success">
                        <i class="bi bi-file-earmark-plus-fill me-2"></i>
                        Create Inspection Report
                    </a>
                {% endif %}

                <a href="{% url 'myadmin:property_care_property_review_detail' property.pk %}"
                class="btn btn-outline-light">
                    <i class="bi bi-house-door-fill me-2"></i>
                    Open Property Review
                </a>

            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-6 col-lg-3">
                <div class="stat-card">
                    <div class="stat-label">Photos</div>
                    <div class="stat-value">{{ total_photos }}</div>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="stat-card">
                    <div class="stat-label">Owner Visible Photos</div>
                    <div class="stat-value text-success">{{ owner_visible_photos }}</div>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="stat-card">
                    <div class="stat-label">Issue Photos</div>
                    <div class="stat-value text-danger">{{ issue_photos }}</div>
                </div>
            </div>


            <div class="col-6 col-lg-3">
                <div class="stat-card">
                    <div class="stat-label">Inspection Report</div>

                    <div class="stat-value" style="font-size:1.2rem;">
                        {% if inspection_report %}
                            Created
                        {% else %}
                            Not Yet
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-4">

            <div class="col-lg-6">
                <div class="detail-card h-100">
                    <div class="detail-card-header">
                        <h2>Visit Information</h2>
                        <p>Operational schedule and staff tracking.</p>
                    </div>

                    <div class="detail-card-body">

                        <div class="detail-line">
                            <div class="detail-label">Property</div>
                            <div class="detail-value">{{ property.property_name }}</div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Visit Type</div>
                            <div class="detail-value">{{ visit.get_visit_type_display }}</div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Visit Status</div>
                            <div class="detail-value">{{ visit.get_visit_status_display }}</div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Scheduled Date / Time</div>
                            <div class="detail-value">
                                {% if visit.scheduled_date %}
                                    {{ visit.scheduled_date|date:"M d, Y" }}
                                    {% if visit.scheduled_time %}
                                        at {{ visit.scheduled_time|time:"H:i" }}
                                    {% endif %}
                                {% else %}
                                    Not set
                                {% endif %}
                            </div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Completed At</div>
                            <div class="detail-value">
                                {% if visit.completed_at %}
                                    {{ visit.completed_at|date:"M d, Y H:i" }}
                                {% else %}
                                    Not completed yet
                                {% endif %}
                            </div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Visited By</div>
                            <div class="detail-value">
                                {% if visit.visited_by %}
                                    {{ visit.visited_by.get_full_name|default:visit.visited_by.username }}
                                {% else %}
                                    Not assigned
                                {% endif %}
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="detail-card h-100">
                    <div class="detail-card-header">
                        <h2>Plan & Service Link</h2>
                        <p>Reference to care-plan and related service context.</p>
                    </div>

                    <div class="detail-card-body">

                        <div class="detail-line">
                            <div class="detail-label">Care Plan</div>
                            <div class="detail-value">
                                {% if visit.care_plan %}
                                    {{ visit.care_plan }}
                                {% else %}
                                    Not linked
                                {% endif %}
                            </div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Related Service</div>
                            <div class="detail-value">
                                {% if visit.related_service_type %}
                                    {{ visit.related_service_type.name }}
                                {% else %}
                                    Not specified
                                {% endif %}
                            </div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Created By</div>
                            <div class="detail-value">
                                {% if visit.created_by %}
                                    {{ visit.created_by.get_full_name|default:visit.created_by.username }}
                                {% else %}
                                    Not recorded
                                {% endif %}
                            </div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Created At</div>
                            <div class="detail-value">
                                {{ visit.created_at|date:"M d, Y H:i" }}
                            </div>
                        </div>

                        <div class="detail-line">
                            <div class="detail-label">Updated At</div>
                            <div class="detail-value">
                                {{ visit.updated_at|date:"M d, Y H:i" }}
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

        <div class="row g-4 mb-4">

            <div class="col-lg-4">
                <div class="detail-card h-100">
                    <div class="detail-card-header">
                        <h3>Visit Summary</h3>
                    </div>

                    <div class="detail-card-body">
                        <div class="note-box">
                            {{ visit.visit_summary|default:"No visit summary added yet."|linebreaksbr }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="detail-card h-100">
                    <div class="detail-card-header">
                        <h3>Owner Visible Note</h3>
                    </div>

                    <div class="detail-card-body">
                        <div class="note-box">
                            {{ visit.owner_visible_note|default:"No owner-visible note added yet."|linebreaksbr }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="detail-card h-100">
                    <div class="detail-card-header">
                        <h3>Internal Note</h3>
                    </div>

                    <div class="detail-card-body">
                        <div class="note-box">
                            {{ visit.internal_note|default:"No internal note added yet."|linebreaksbr }}
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="detail-card">
            <div class="detail-card-header d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center">
                <div>
                    <h2>Visit Photos</h2>
                    <p>
                        Uploaded evidence images, issue photos, completion records, and before/after references.
                    </p>
                </div>

                <div>
                    <a href="{% url 'myadmin:property_care_visit_photo_upload' visit.pk %}"
                       class="btn btn-dark rounded-pill fw-bold">
                        <i class="bi bi-image-fill me-2"></i>
                        Add Photo
                    </a>
                </div>
            </div>

            <div class="detail-card-body">
                {% if photos %}
                    <div class="row g-4">
                        {% for photo in photos %}
                            <div class="col-md-6 col-xl-4">
                                <div class="photo-grid-item">
                                    <img src="{{ photo.image.url }}"
                                         alt="{{ photo.caption|default:'Visit photo' }}">

                                    <div class="photo-info">
                                        <div class="photo-title">
                                            {{ photo.get_photo_type_display }}
                                        </div>

                                        <div class="photo-meta">
                                            {% if photo.caption %}
                                                {{ photo.caption }}<br>
                                            {% endif %}

                                            Uploaded:
                                            {{ photo.uploaded_at|date:"M d, Y H:i" }}<br>

                                            Visibility:
                                            {% if photo.is_owner_visible %}
                                                Owner Visible
                                            {% else %}
                                                Internal
                                            {% endif %}
                                        </div>
                                    </div>

                                    <div class="photo-actions">
                                        <form method="post"
                                              action="{% url 'myadmin:property_care_visit_photo_delete' visit.pk photo.pk %}"
                                              onsubmit="return confirm('Delete this visit photo?');">
                                            {% csrf_token %}

                                            <button type="submit"
                                                    class="btn btn-outline-danger btn-sm rounded-pill fw-bold">
                                                <i class="bi bi-trash-fill me-1"></i>
                                                Delete Photo
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="empty-box">
                        No visit photos have been uploaded yet.
                    </div>
                {% endif %}
            </div>
        </div>

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