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

{% block title %}Create Maintenance Visit | MyAdmin{% endblock %}

{% block content %}
<style>
    .visit-create-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%);
    }

    .create-hero,
    .create-form-card,
    .property-summary-card {
        border-radius: 34px;
        border: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.09);
    }

    .create-hero {
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 34%),
            linear-gradient(135deg, #052e25, #0f766e);
        color: #fff;
        padding: 2.5rem 2.3rem;
        border: none;
    }

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

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

    .create-form-header,
    .property-summary-header {
        padding: 1.6rem 1.75rem 1.1rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .create-form-header h2,
    .property-summary-header h3 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .35rem;
    }

    .create-form-header p,
    .property-summary-header p {
        color: #64748b;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .create-form-body,
    .property-summary-body {
        padding: 1.75rem;
    }

    .create-form-body .form-control,
    .create-form-body .form-select {
        min-height: 50px;
        border-radius: 16px;
    }

    .create-form-body textarea.form-control {
        min-height: 120px;
    }

    .create-form-body .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
    }

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

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

    .summary-label {
        color: #64748b;
        font-weight: 800;
        font-size: .88rem;
        margin-bottom: .2rem;
    }

    .summary-value {
        color: #0f172a;
        font-weight: 900;
    }

    .submit-btn {
        border-radius: 999px;
        min-height: 54px;
        font-weight: 900;
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }

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

        .create-form-body,
        .property-summary-body,
        .create-form-header,
        .property-summary-header {
            padding-left: 1.3rem;
            padding-right: 1.3rem;
        }
    }
</style>

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

        <div class="create-hero mb-4">
            <h1>Create Maintenance Visit</h1>
            <p>
                Schedule or record a Property Care team visit for
                <strong>{{ managed_property.property_name }}</strong>.
                This can later support inspection reports, visit photos, work orders, and owner-visible tracking.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-lg-8">
                <div class="create-form-card">
                    <div class="create-form-header">
                        <h2>Visit Details</h2>
                        <p>
                            Complete the operational visit information below. You can later upload visit photos from the visit detail page.
                        </p>
                    </div>

                    <div class="create-form-body">
                        <form method="post">
                            {% csrf_token %}

                            {% if form.non_field_errors %}
                                <div class="alert alert-danger rounded-4">
                                    {{ form.non_field_errors }}
                                </div>
                            {% endif %}

                            <div class="row g-4">

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ form.care_plan.label }}</label>
                                    {{ form.care_plan }}
                                    {% if form.care_plan.errors %}
                                        <div class="text-danger small mt-1">{{ form.care_plan.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ form.related_service_type.label }}</label>
                                    {{ form.related_service_type }}
                                    {% if form.related_service_type.errors %}
                                        <div class="text-danger small mt-1">{{ form.related_service_type.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-bold">{{ form.visit_title.label }}</label>
                                    {{ form.visit_title }}
                                    {% if form.visit_title.errors %}
                                        <div class="text-danger small mt-1">{{ form.visit_title.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ form.visit_type.label }}</label>
                                    {{ form.visit_type }}
                                    {% if form.visit_type.errors %}
                                        <div class="text-danger small mt-1">{{ form.visit_type.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ form.visit_status.label }}</label>
                                    {{ form.visit_status }}
                                    {% if form.visit_status.errors %}
                                        <div class="text-danger small mt-1">{{ form.visit_status.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ form.scheduled_date.label }}</label>
                                    {{ form.scheduled_date }}
                                    {% if form.scheduled_date.errors %}
                                        <div class="text-danger small mt-1">{{ form.scheduled_date.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ form.scheduled_time.label }}</label>
                                    {{ form.scheduled_time }}
                                    {% if form.scheduled_time.errors %}
                                        <div class="text-danger small mt-1">{{ form.scheduled_time.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ form.completed_at.label }}</label>
                                    {{ form.completed_at }}
                                    {% if form.completed_at.errors %}
                                        <div class="text-danger small mt-1">{{ form.completed_at.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ form.visited_by.label }}</label>
                                    {{ form.visited_by }}
                                    {% if form.visited_by.errors %}
                                        <div class="text-danger small mt-1">{{ form.visited_by.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-bold">{{ form.visit_summary.label }}</label>
                                    {{ form.visit_summary }}
                                    {% if form.visit_summary.errors %}
                                        <div class="text-danger small mt-1">{{ form.visit_summary.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-bold">{{ form.owner_visible_note.label }}</label>
                                    {{ form.owner_visible_note }}
                                    {% if form.owner_visible_note.errors %}
                                        <div class="text-danger small mt-1">{{ form.owner_visible_note.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-bold">{{ form.internal_note.label }}</label>
                                    {{ form.internal_note }}
                                    {% if form.internal_note.errors %}
                                        <div class="text-danger small mt-1">{{ form.internal_note.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <div class="form-check">
                                        {{ form.is_owner_visible }}
                                        <label class="form-check-label fw-bold ms-2">
                                            {{ form.is_owner_visible.label }}
                                        </label>
                                    </div>
                                    {% if form.is_owner_visible.errors %}
                                        <div class="text-danger small mt-1">{{ form.is_owner_visible.errors|striptags }}</div>
                                    {% endif %}
                                </div>

                            </div>

                            <div class="d-flex flex-column flex-md-row gap-3 mt-4">
                                <button type="submit"
                                        class="btn btn-dark submit-btn">
                                    <i class="bi bi-save-fill me-2"></i>
                                    Create Maintenance Visit
                                </button>

                                <a href="{% url 'myadmin:property_care_visit_list' %}"
                                   class="btn btn-outline-secondary submit-btn">
                                    Back to Visits
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="property-summary-card">
                    <div class="property-summary-header">
                        <h3>Property Summary</h3>
                        <p>
                            Quick reference while creating the visit record.
                        </p>
                    </div>

                    <div class="property-summary-body">

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

                        <div class="summary-line">
                            <div class="summary-label">Owner</div>
                            <div class="summary-value">
                                {{ managed_property.owner.full_name|default:managed_property.owner.email }}
                            </div>
                        </div>

                        <div class="summary-line">
                            <div class="summary-label">Category</div>
                            <div class="summary-value">
                                {{ managed_property.get_property_category_display }}
                            </div>
                        </div>

                        <div class="summary-line">
                            <div class="summary-label">Location</div>
                            <div class="summary-value">
                                {{ managed_property.city }}, {{ managed_property.district }}
                            </div>
                        </div>

                        <div class="summary-line">
                            <div class="summary-label">Review Status</div>
                            <div class="summary-value">
                                {{ managed_property.get_review_status_display }}
                            </div>
                        </div>

                        <div class="mt-4">
                            <a href="{% url 'myadmin:property_care_property_review_detail' managed_property.pk %}"
                               class="btn btn-outline-dark rounded-pill fw-bold w-100">
                                Open Property Review
                            </a>
                        </div>

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

        </div>

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