{% extends "base.html" %}
{% block title %}Update Intern Contract{% endblock %}
{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/create.css') }}">

<div class="container mt-4">
    <div class="form-header">
        <h1 class="text-center mb-0">Update Intern Contract: {{ intern.intern_name }}</h1>
    </div>
    <div class="form-card">
        <nav class="mb-3">
            <a href="{{ url_for('interns.index') }}" class="btn btn-outline-primary">
                <i class="bi bi-arrow-left"></i> Back to List
            </a>
        </nav>

        <form id="internForm" action="{{ url_for('interns.update', id=intern.id) }}" method="POST" class="needs-validation" novalidate>
            
            <!-- Intern Details -->
            <div class="section-header">Intern Details</div>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label for="intern_name" class="form-label">Full Name (Title Including) <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="intern_name" name="intern_name" 
                           value="{{ form_data.intern_name | default(intern.intern_name) }}" 
                           placeholder="e.g., Ms. Dorn Sochea" required pattern="[A-Za-z\s\.]+">
                    <div class="invalid-feedback">Please enter a valid name with title.</div>
                </div>
                <div class="col-md-6">
                    <label for="intern_role" class="form-label">Position <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="intern_role" name="intern_role" 
                           value="{{ form_data.intern_role | default(intern.intern_role) }}" 
                           placeholder="e.g., Finance and Administrative Intern" required>
                    <div class="invalid-feedback">Please enter the position.</div>
                </div>
                <div class="col-12">
                    <label for="intern_address" class="form-label">Address</label>
                    <textarea class="form-control" id="intern_address" name="intern_address" rows="3" 
                              placeholder="House No., Street, Village, Sangkat, Khan, City">{{ form_data.intern_address | default(intern.intern_address) }}</textarea>
                </div>
                <div class="col-md-6">
                    <label for="intern_phone" class="form-label">Phone Number</label>
                    <input type="tel" class="form-control" id="intern_phone" name="intern_phone" 
                           value="{{ form_data.intern_phone | default(intern.intern_phone) }}" 
                           placeholder="+855 12 345 678">
                </div>
                <div class="col-md-6">
                    <label for="intern_email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="intern_email" name="intern_email" 
                           value="{{ form_data.intern_email | default(intern.intern_email) }}" 
                           placeholder="name@example.com">
                </div>
            </div>

            <!-- Internship Details -->
            <div class="section-header">Internship Details</div>
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label for="start_date" class="form-label">Starting Date <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="start_date" name="start_date" 
                               value="{{ form_data.start_date | default(intern.start_date.strftime('%Y-%m-%d')) }}" required>
                        <span class="input-group-text calendar-icon" style="cursor: pointer;">
                            <i class="bi bi-calendar3"></i>
                        </span>
                        <div class="invalid-feedback">Please select a start date.</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <label for="duration" class="form-label">Duration <span class="text-danger">*</span></label>
                    <select class="form-select" id="duration" name="duration" required>
                        <option value="" disabled>Select Duration</option>
                        <option value="3" {{ 'selected' if (form_data.duration | default(intern.duration)) == '3 months' }}>3 months</option>
                        <option value="6" {{ 'selected' if (form_data.duration | default(intern.duration)) == '6 months' }}>6 months</option>
                        <option value="12" {{ 'selected' if (form_data.duration | default(intern.duration)) == '12 months' }}>12 months</option>
                    </select>
                    <div class="invalid-feedback">Please select duration.</div>
                </div>

                <div class="col-md-4">
                    <label for="end_date_display" class="form-label">End Date</label>
                    <input type="text" class="form-control bg-light" id="end_date_display" readonly 
                           placeholder="Auto-calculated">
                    <small class="text-success">
                        <i class="bi bi-info-circle"></i> Automatically adjusts to next Monday if weekend
                    </small>
                </div>

                <div class="col-md-6">
                    <label for="working_hours" class="form-label">Working Hours</label>
                    <input type="text" class="form-control" id="working_hours" name="working_hours" 
                           value="{{ form_data.working_hours | default(intern.working_hours) }}" required>
                </div>

                <div class="col-md-3">
                    <label for="allowance_amount" class="form-label">Allowance (USD)</label>
                    <input type="number" class="form-control" id="allowance_amount" name="allowance_amount" 
                           value="{{ form_data.allowance_amount | default(intern.allowance_amount) }}" 
                           min="0" step="0.01">
                </div>

                <div class="col-md-3">
                    <label class="form-label">NSSF Benefit</label>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" id="has_nssf" name="has_nssf" 
                               {% if form_data.has_nssf is defined %}{% if form_data.has_nssf %}checked{% endif %}{% else %}{% if intern.has_nssf %}checked{% endif %}{% endif %}>
                        <label class="form-check-label" for="has_nssf">Include NSSF</label>
                    </div>
                </div>

                <!-- Supervisor -->
                <div class="col-md-6">
                    <label for="supervisor_title" class="form-label">Supervisor Title <span class="text-danger">*</span></label>
                    <select class="form-select" id="supervisor_title" name="supervisor_title" required>
                        <option value="" disabled>Select Title</option>
                        <option value="RITI Program Manager" {{ 'selected' if (form_data.supervisor_info.title | default(intern.supervisor_info.get('title'))) == 'RITI Program Manager' }}>RITI Program Manager</option>
                        <option value="PALI Program Manager" {{ 'selected' if (form_data.supervisor_info.title | default(intern.supervisor_info.get('title'))) == 'PALI Program Manager' }}>PALI Program Manager</option>
                        <option value="SACHAS Program Manager" {{ 'selected' if (form_data.supervisor_info.title | default(intern.supervisor_info.get('title'))) == 'SACHAS Program Manager' }}>SACHAS Program Manager</option>
                        <option value="MACOR Program Manager" {{ 'selected' if (form_data.supervisor_info.title | default(intern.supervisor_info.get('title'))) == 'MACOR Program Manager' }}>MACOR Program Manager</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="supervisor_name" class="form-label">Supervisor Name</label>
                    <input type="text" class="form-control" id="supervisor_name" name="supervisor_name" 
                           value="{{ form_data.supervisor_info.name | default(intern.supervisor_info.get('name', '')) }}" required readonly>
                </div>
            </div>

            <!-- Employer Details -->
            <div class="section-header">Employer Details</div>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label for="employer_representative_name" class="form-label">Representative Name</label>
                    <input type="text" class="form-control" id="employer_representative_name" name="employer_representative_name" 
                           value="{{ form_data.employer_representative_name | default(intern.employer_representative_name) }}" required>
                </div>
                <div class="col-md-6">
                    <label for="employer_representative_title" class="form-label">Title</label>
                    <input type="text" class="form-control" id="employer_representative_title" name="employer_representative_title" 
                           value="{{ form_data.employer_representative_title | default(intern.employer_representative_title) }}" required>
                </div>
                <div class="col-12">
                    <label for="employer_address" class="form-label">Address</label>
                    <textarea class="form-control" id="employer_address" name="employer_address" rows="3" required>{{ form_data.employer_address | default(intern.employer_address) }}</textarea>
                </div>
                <div class="col-md-4">
                    <label for="employer_phone" class="form-label">Phone Number</label>
                    <input type="text" class="form-control" id="employer_phone" name="employer_phone" 
                           value="{{ form_data.employer_phone | default(intern.employer_phone) }}" required>
                </div>
                <div class="col-md-4">
                    <label for="employer_fax" class="form-label">Fax</label>
                    <input type="text" class="form-control" id="employer_fax" name="employer_fax" 
                           value="{{ form_data.employer_fax | default(intern.employer_fax) }}">
                </div>
                <div class="col-md-4">
                    <label for="employer_email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="employer_email" name="employer_email" 
                           value="{{ form_data.employer_email | default(intern.employer_email) }}">
                </div>
            </div>

            <div class="text-center mt-5">
                <button type="submit" class="btn btn-primary btn-lg px-5">
                    <i class="bi bi-check-circle"></i> Update Contract
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const startDateInput = document.getElementById('start_date');
    const durationSelect = document.getElementById('duration');
    const endDateDisplay = document.getElementById('end_date_display');
    const calendarIcon = document.querySelector('.calendar-icon');
    const supervisorTitle = document.getElementById('supervisor_title');
    const supervisorName = document.getElementById('supervisor_name');

    const supervisorMapping = {
        "RITI Program Manager": "Mr. CHAN Vicheth",
        "PALI Program Manager": "Mr. MAR Sophal",
        "SACHAS Program Manager": "Ms. OUM Somaly",
        "MACOR Program Manager": "Mr. SOM Chettana"
    };

    // Open date picker when clicking calendar icon
    calendarIcon.addEventListener('click', function () {
        startDateInput.focus();
        startDateInput.showPicker();
    });

    // Open when clicking the input
    startDateInput.addEventListener('click', function () {
        this.showPicker();
    });

    function calculateEndDate() {
        if (!startDateInput.value || !durationSelect.value) {
            endDateDisplay.value = '';
            return;
        }

        const start = new Date(startDateInput.value);
        const months = parseInt(durationSelect.value);

        let end = new Date(start);
        end.setMonth(end.getMonth() + months);

        // Adjust weekend to next Monday
        const day = end.getDay();
        if (day === 6) { // Saturday
            end.setDate(end.getDate() + 2);
        } else if (day === 0) { // Sunday
            end.setDate(end.getDate() + 1);
        }

        const options = { day: 'numeric', month: 'long', year: 'numeric' };
        endDateDisplay.value = end.toLocaleDateString('en-GB', options);
    }

    // Auto-fill supervisor
    supervisorTitle.addEventListener('change', function () {
        supervisorName.value = supervisorMapping[this.value] || '';
    });

    // Run on change
    startDateInput.addEventListener('change', calculateEndDate);
    durationSelect.addEventListener('change', calculateEndDate);

    // Run on page load (to show current end date correctly)
    calculateEndDate();
    if (supervisorTitle.value) {
        supervisorName.value = supervisorMapping[supervisorTitle.value] || '';
    }

    // Form validation
    const form = document.getElementById('internForm');
    form.addEventListener('submit', function (e) {
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        form.classList.add('was-validated');
    });
});
</script>
{% endblock %}