{% extends "base.html" %}

{% block title %}Orchid of the Day Schedule - Admin{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold" style="color: #7A4B8E;">
                        <i data-feather="calendar" class="me-2"></i>
                        Orchid of the Day Scheduler
                    </h2>
                    <p class="text-muted">Schedule orchids to appear at midnight daily</p>
                </div>
                <a href="{{ url_for('orchid_approval.approval_dashboard') }}" class="btn btn-outline-secondary">
                    <i data-feather="arrow-left" class="me-1"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Current Schedule -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header" style="background-color: #F8F9FA;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i data-feather="clock" class="me-2"></i>
                            Current Schedule
                        </h5>
                        <button class="btn btn-primary btn-sm" onclick="addNewSchedule()">
                            <i data-feather="plus" class="me-1"></i> Add Date
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    {% if scheduled_orchids %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Orchid</th>
                                    <th>Display ID</th>
                                    <th>Country</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for orchid in scheduled_orchids %}
                                <tr {% if orchid.scheduled_date == today %}class="table-success"{% endif %}>
                                    <td>
                                        <strong>{{ orchid.scheduled_date.strftime('%m/%d/%Y') if orchid.scheduled_date }}</strong>
                                        {% if orchid.scheduled_date == today %}
                                        <br><small class="badge bg-success">Today</small>
                                        {% elif orchid.scheduled_date == tomorrow %}
                                        <br><small class="badge bg-info">Tomorrow</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <strong><em>{{ orchid.approved_genus }} {{ orchid.approved_species }}</em></strong>
                                        {% if orchid.approved_common_name %}
                                        <br><small class="text-muted">{{ orchid.approved_common_name }}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">{{ orchid.special_display_id }}</span>
                                    </td>
                                    <td>
                                        {% if orchid.approved_country %}
                                        <i data-feather="map-pin" class="me-1" style="width: 12px; height: 12px;"></i>
                                        {{ orchid.approved_country }}
                                        {% else %}
                                        <span class="text-muted">Unknown</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <button class="btn btn-outline-primary btn-sm me-1" 
                                                onclick="rescheduleOrchid({{ orchid.id }})">
                                            <i data-feather="edit-2" style="width: 12px; height: 12px;"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-sm" 
                                                onclick="unscheduleOrchid({{ orchid.id }})">
                                            <i data-feather="x" style="width: 12px; height: 12px;"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i data-feather="calendar-x" style="width: 48px; height: 48px;" class="text-muted mb-3"></i>
                        <h5 class="text-muted">No scheduled orchids</h5>
                        <p class="text-muted">Add orchids to the schedule to ensure consistent daily features.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Available Orchids -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header" style="background-color: #F8F9FA;">
                    <h5 class="card-title mb-0">
                        <i data-feather="list" class="me-2"></i>
                        Available for Scheduling
                    </h5>
                </div>
                <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                    {% if available_orchids %}
                    {% for orchid in available_orchids %}
                    <div class="orchid-item border rounded p-2 mb-2" data-orchid-id="{{ orchid.id }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="mb-1"><em>{{ orchid.approved_genus }} {{ orchid.approved_species }}</em></h6>
                                <small class="text-muted">{{ orchid.special_display_id }}</small>
                                {% if orchid.approved_country %}
                                <br><small class="text-muted">
                                    <i data-feather="map-pin" style="width: 10px; height: 10px;"></i>
                                    {{ orchid.approved_country }}
                                </small>
                                {% endif %}
                            </div>
                            <div>
                                <button class="btn btn-success btn-sm" 
                                        onclick="scheduleOrchid({{ orchid.id }}, '{{ orchid.approved_genus }} {{ orchid.approved_species }}')">
                                    <i data-feather="plus" style="width: 12px; height: 12px;"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <div class="text-center py-4">
                        <i data-feather="inbox" style="width: 32px; height: 32px;" class="text-muted mb-2"></i>
                        <p class="text-muted">No approved orchids available</p>
                        <a href="{{ url_for('orchid_approval.validate_orchid') }}" class="btn btn-outline-primary btn-sm">
                            Approve More Orchids
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Schedule Modal -->
<div class="modal fade" id="scheduleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Schedule Orchid</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Orchid</label>
                    <div id="selectedOrchidInfo" class="form-control-plaintext border rounded p-2 bg-light">
                        No orchid selected
                    </div>
                </div>
                <div class="mb-3">
                    <label for="scheduledDate" class="form-label">Schedule Date <span class="text-danger">*</span></label>
                    <input type="date" class="form-control" id="scheduledDate" required>
                    <small class="form-text text-muted">Orchid will appear at 12:00 AM on this date</small>
                </div>
                <div class="alert alert-info">
                    <strong>Note:</strong> Only one orchid can be scheduled per date. If a date is already taken, the previous orchid will be replaced.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" onclick="confirmSchedule()">
                    <i data-feather="calendar" class="me-1"></i> Schedule Orchid
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Quick Schedule Options -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header" style="background-color: #F8F9FA;">
                <h5 class="card-title mb-0">
                    <i data-feather="zap" class="me-2"></i>
                    Quick Schedule Options
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <button class="btn btn-outline-primary w-100 mb-2" onclick="autoScheduleWeek()">
                            <i data-feather="calendar" class="me-2"></i>
                            Auto-Schedule Next 7 Days
                        </button>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-outline-info w-100 mb-2" onclick="autoScheduleMonth()">
                            <i data-feather="calendar" class="me-2"></i>
                            Auto-Schedule Next Month
                        </button>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-outline-warning w-100 mb-2" onclick="clearSchedule()">
                            <i data-feather="x-circle" class="me-2"></i>
                            Clear All Future
                        </button>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-outline-success w-100 mb-2" onclick="exportSchedule()">
                            <i data-feather="download" class="me-2"></i>
                            Export Schedule
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
let currentOrchidId = null;
let currentOrchidName = '';

function scheduleOrchid(orchidId, orchidName) {
    currentOrchidId = orchidId;
    currentOrchidName = orchidName;
    
    document.getElementById('selectedOrchidInfo').textContent = orchidName;
    
    // Set default date to tomorrow
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    document.getElementById('scheduledDate').value = tomorrow.toISOString().split('T')[0];
    
    new bootstrap.Modal(document.getElementById('scheduleModal')).show();
}

function confirmSchedule() {
    const scheduledDate = document.getElementById('scheduledDate').value;
    
    if (!scheduledDate) {
        alert('Please select a date');
        return;
    }
    
    fetch('/admin/orchid-approval/schedule-orchid-of-day', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            approval_id: currentOrchidId,
            scheduled_date: scheduledDate
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(`Error: ${data.message}`);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error scheduling orchid');
    });
}

function rescheduleOrchid(approvalId) {
    // Implementation for rescheduling existing orchid
    alert('Reschedule functionality will be implemented');
}

function unscheduleOrchid(approvalId) {
    if (confirm('Are you sure you want to unschedule this orchid?')) {
        // Implementation for unscheduling orchid
        alert('Unschedule functionality will be implemented');
    }
}

function addNewSchedule() {
    if (document.querySelectorAll('.orchid-item').length === 0) {
        alert('No approved orchids available for scheduling. Please approve some orchids first.');
        return;
    }
    
    alert('Please select an orchid from the Available for Scheduling list');
}

function autoScheduleWeek() {
    if (confirm('This will automatically schedule orchids for the next 7 days. Continue?')) {
        alert('Auto-schedule week functionality will be implemented');
    }
}

function autoScheduleMonth() {
    if (confirm('This will automatically schedule orchids for the next month. Continue?')) {
        alert('Auto-schedule month functionality will be implemented');
    }
}

function clearSchedule() {
    if (confirm('This will clear all future scheduled orchids. Are you sure?')) {
        alert('Clear schedule functionality will be implemented');
    }
}

function exportSchedule() {
    alert('Export schedule functionality will be implemented');
}

// Initialize feather icons
feather.replace();

// Set minimum date to today
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('scheduledDate').min = today;
});
</script>
{% endblock %}