{% extends "base.html" %}

{% block title %}Email Scheduler{% endblock %}

{% block content %}

<style>
    body {
        font-family: 'Inter', sans-serif;
        background: #f5f7ff;
        color: #111322;
    }

    .page-header.card {
        background: #fff;
        padding: 25px;
        border-radius: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        margin-bottom: 30px;
        margin-top: -50px;
    }

    .page-header h1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .page-header p {
        color: #6c757d;
        font-size: 14px;
    }

    .card.form-card {
        background: #fff;
        padding: 25px;
        border-radius: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        margin-top: -85px;
        margin-bottom: 30px;
    }

    .field-group {
        margin-bottom: 20px;
    }

    .field-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .field-group input,
    .field-group textarea {
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s;
    }

    .field-group input:focus,
    .field-group textarea:focus {
        border-color: #1d3a8a;
    }

    .button-row {
        display: flex;
        gap: 15px;
        margin-top: 25px;
        flex-wrap: wrap;
    }

    .btn {
        text-decoration: none;
        padding: 10px 18px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        border: none;
    }

    .btn-primary {
        background: #1d3a8a;
        color: #fff;
    }

    .btn-primary:hover {
        background: #142a6b;
    }

    .btn-secondary {
        background: #6c757d;
        color: #fff;
    }

    .btn-secondary:hover {
        background: #495057;
    }

    .alert {
        padding: 12px 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .alert-success {
        background: #d1e7dd;
        color: #0f5132;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th,
    td {
        padding: 12px;
        border: 1px solid #ccc;
        text-align: center;
    }

    th {
        background-color: #f0f4ff;
    }

    @media (max-width: 768px) {
        .button-row {
            flex-direction: column;
            width: 100%;
        }

        .btn {
            width: 100%;
        }
    }
</style>

<section class="page-header card">
    <h1>Email Scheduler</h1>
    <p>Schedule emails to be sent automatically at your chosen time.</p>
</section>

<section class="card form-card">

    {% if message %}
    <div class="alert alert-success">{{ message }}</div>
    {% endif %}

    <!-- Corrected Form -->
    <form method="post" action="/dashboard/email-scheduler/{{ lead_id }}">
        <!-- Hidden field is optional now, but can stay -->
        <input type="hidden" name="lead_id" value="{{ lead_id }}">
        <input type="hidden" name="timezone" id="timezone">


        <div class="field-group">
            <label for="to">To</label>
            <input type="email" id="to" name="to" value="{{ to }}" required>
        </div>

        <div class="field-group">
            <label for="subject">Subject</label>
            <input type="text" id="subject" name="subject" value="{{ subject }}" required>
        </div>

        <div class="field-group">
            <label for="body">Message</label>
            <textarea id="body" name="body" rows="8" required>{{ body }}</textarea>
        </div>

        <div class="field-group">
            <label for="send_time">Send Time</label>
            <input type="datetime-local" id="send_time" name="send_time" value="{{ send_time }}" required>
        </div>

        <button type="submit" class="btn btn-primary">Schedule Email</button>
    </form>



</section>

<section class="card form-card">
    <h2>Scheduled Emails</h2>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>To</th>
                <th>Subject</th>
                <th>Send Time</th>
                <th>Sent</th>
                <th>Sent At</th>
            </tr>
        </thead>
        <tbody>
            {% for email in emails %}
            <tr>
                <td>{{ email.id }}</td>
                <td>{{ email.to }}</td>
                <td>{{ email.subject }}</td>
                <td>{{ email.send_time.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                <td>{{ "Yes" if email.sent else "No" }}</td>
                <td>{{ email.sent_at.strftime('%Y-%m-%d %H:%M:%S') if email.sent_at else "-" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>

{% endblock %}
<script>
    document.getElementById("timezone").value =
        Intl.DateTimeFormat().resolvedOptions().timeZone;
</script>