{% extends "base.html" %}

{% block styles %}
<style>
    .star-rating {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 0.25rem;
    }

    .star-rating input {
        display: none;
    }

    .star-rating label {
        cursor: pointer;
        font-size: 1.5rem;
        color: #dee2e6;
        transition: color 0.15s ease;
    }

    .star-rating label:hover,
    .star-rating label:hover~label,
    .star-rating input:checked~label {
        color: #ffc107;
    }

    .fullscreen-modal .modal-dialog {
        max-width: 100%;
        margin: 0;
        height: 100vh;
    }

    .fullscreen-modal .modal-content {
        height: 100vh;
        border-radius: 0;
    }

    .fullscreen-modal .modal-body {
        overflow-y: auto;
    }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <!-- Progress -->
        <div class="mb-5">
            <div class="progress" style="height: 4px;">
                <div class="progress-bar bg-primary" style="--p: {{ progress }}%; width: var(--p);"></div>
            </div>
            <div class="d-flex justify-content-between mt-2 text-muted small text-uppercase fw-bold">
                <span>Define</span>
                <span>Dates</span>
                <span>Connect</span>
                <span>KPIs</span>
                <span>Data</span>
                <span>Review</span>
            </div>
        </div>

        <div class="card border-0 shadow-sm p-4">
            <h2 class="h4 fw-bold mb-4">Step 1: Define Strategy</h2>

            <form method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="owner_id" id="owner_id" value="">

                <div class="mb-4">
                    <label class="form-label fw-bold">Strategy Name</label>
                    <input type="text" name="name" class="form-control form-control-lg"
                        placeholder="e.g. Q1 Content Expansion" value="{{ strategy.name }}" required>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-bold">Hypothesis</label>
                    <textarea name="hypothesis" class="form-control" rows="3" placeholder="What do we expect to happen?"
                        required>{{ strategy.hypothesis or '' }}</textarea>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-bold">Owner</label>
                    <select name="owners" id="owner_select" class="form-select form-select-lg" required>
                        <option value="">Select Owner...</option>
                        <option value="Daine Dvorak" {% if strategy.owners=='Daine Dvorak' or not strategy.owners
                            %}selected{% endif %}>
                            Daine Dvorak
                        </option>
                        {% for member in team_members %}
                        <option value="{{ member.full_name }}" data-member-id="{{ member.id }}" {% if
                            strategy.owners==member.full_name %}selected{% endif %}>
                            {{ member.full_name }}
                        </option>
                        {% endfor %}
                        <option value="__add_new__" class="text-primary fw-bold">➕ Add New Team Member...</option>
                    </select>
                    <div class="form-text">Select the person responsible for this strategy</div>
                </div>

                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary px-5">Next Step <i
                            class="bi bi-arrow-right ms-2"></i></button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add New Team Member Modal (Fullscreen) -->
<div class="modal fade fullscreen-modal" id="addTeamMemberModal" tabindex="-1" aria-hidden="true"
    data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header border-0 bg-primary bg-opacity-10">
                <h4 class="modal-title fw-bold">
                    <i class="bi bi-person-plus-fill text-primary me-2"></i>Add New Team Member
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div class="container py-5">
                    <div class="row justify-content-center">
                        <div class="col-lg-6">
                            <form id="addTeamMemberForm">
                                <!-- Personal Info -->
                                <div class="card border-0 shadow-sm mb-4">
                                    <div class="card-body p-4">
                                        <h5 class="fw-bold mb-4"><i class="bi bi-person me-2 text-primary"></i>Personal
                                            Information</h5>

                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label fw-bold">First Name <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" id="tm_first_name"
                                                    class="form-control form-control-lg" placeholder="John" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label fw-bold">Last Name <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" id="tm_last_name"
                                                    class="form-control form-control-lg" placeholder="Doe" required>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <label class="form-label fw-bold">Email Address <span
                                                    class="text-danger">*</span></label>
                                            <input type="email" id="tm_email" class="form-control form-control-lg"
                                                placeholder="john.doe@company.com" required>
                                        </div>
                                    </div>
                                </div>

                                <!-- Experience -->
                                <div class="card border-0 shadow-sm mb-4">
                                    <div class="card-body p-4">
                                        <h5 class="fw-bold mb-4"><i class="bi bi-briefcase me-2 text-success"></i>SEO
                                            Experience</h5>

                                        <div class="mb-4">
                                            <label class="form-label fw-bold">Years of SEO Experience</label>
                                            <div class="input-group">
                                                <input type="number" id="tm_years_exp"
                                                    class="form-control form-control-lg" min="0" max="50" value="0"
                                                    placeholder="0">
                                                <span class="input-group-text">years</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Competency Rating -->
                                <div class="card border-0 shadow-sm mb-4">
                                    <div class="card-body p-4">
                                        <h5 class="fw-bold mb-4"><i class="bi bi-star me-2 text-warning"></i>Data
                                            Reporting Competency</h5>
                                        <p class="text-muted small mb-3">Rate this person's self-assessed competency
                                            level for data reporting (1 = Beginner, 10 = Expert)</p>

                                        <div class="d-flex align-items-center gap-3">
                                            <div class="star-rating" id="competency_stars">
                                                {% for i in range(10, 0, -1) %}
                                                <input type="radio" name="competency" id="star{{ i }}" value="{{ i }}"
                                                    {% if i==5 %}checked{% endif %}>
                                                <label for="star{{ i }}" title="{{ i }} stars">
                                                    <i class="bi bi-star-fill"></i>
                                                </label>
                                                {% endfor %}
                                            </div>
                                            <span id="competency_value"
                                                class="badge bg-warning text-dark fs-6 px-3 py-2">5/10</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Error Display -->
                                <div id="tm_error" class="alert alert-danger d-none mb-4"></div>

                                <!-- Actions -->
                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-outline-secondary btn-lg px-4"
                                        data-bs-dismiss="modal">
                                        Cancel
                                    </button>
                                    <button type="submit" class="btn btn-primary btn-lg px-5" id="saveTeamMemberBtn">
                                        <i class="bi bi-check-lg me-2"></i>Save Team Member
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const ownerSelect = document.getElementById('owner_select');
        const ownerIdInput = document.getElementById('owner_id');
        const addModal = new bootstrap.Modal(document.getElementById('addTeamMemberModal'));
        const form = document.getElementById('addTeamMemberForm');
        const errorDiv = document.getElementById('tm_error');
        const competencyStars = document.querySelectorAll('#competency_stars input');
        const competencyValue = document.getElementById('competency_value');

        // Handle owner selection
        ownerSelect.addEventListener('change', function () {
            if (this.value === '__add_new__') {
                // Reset form and show modal
                form.reset();
                document.querySelector('#star5').checked = true;
                competencyValue.textContent = '5/10';
                errorDiv.classList.add('d-none');
                addModal.show();
                this.value = ''; // Reset selection
            } else {
                // Set owner_id if a team member is selected
                const selectedOption = this.options[this.selectedIndex];
                const memberId = selectedOption.dataset.memberId || '';
                ownerIdInput.value = memberId;
            }
        });

        // Update competency display
        competencyStars.forEach(star => {
            star.addEventListener('change', function () {
                competencyValue.textContent = this.value + '/10';
            });
        });

        // Handle form submission
        form.addEventListener('submit', async function (e) {
            e.preventDefault();

            const firstName = document.getElementById('tm_first_name').value.trim();
            const lastName = document.getElementById('tm_last_name').value.trim();
            const email = document.getElementById('tm_email').value.trim();
            const yearsExp = parseInt(document.getElementById('tm_years_exp').value) || 0;
            const competency = parseInt(document.querySelector('#competency_stars input:checked').value) || 5;

            // Validate
            if (!firstName || !lastName || !email) {
                errorDiv.textContent = 'Please fill in all required fields.';
                errorDiv.classList.remove('d-none');
                return;
            }

            // Disable button
            const btn = document.getElementById('saveTeamMemberBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';

            try {
                const response = await fetch('/api/team-members', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        first_name: firstName,
                        last_name: lastName,
                        email: email,
                        years_seo_experience: yearsExp,
                        reporting_competency: competency
                    })
                });

                const data = await response.json();

                if (response.ok && data.success) {
                    // Add new option to select
                    const newOption = document.createElement('option');
                    newOption.value = data.team_member.full_name;
                    newOption.dataset.memberId = data.team_member.id;
                    newOption.textContent = data.team_member.full_name;
                    newOption.selected = true;

                    // Insert before "Add New" option
                    const addNewOption = ownerSelect.querySelector('option[value="__add_new__"]');
                    ownerSelect.insertBefore(newOption, addNewOption);

                    // Set hidden owner_id
                    ownerIdInput.value = data.team_member.id;

                    // Close modal
                    addModal.hide();
                } else {
                    errorDiv.textContent = data.error || 'Failed to create team member.';
                    errorDiv.classList.remove('d-none');
                }
            } catch (err) {
                errorDiv.textContent = 'Network error. Please try again.';
                errorDiv.classList.remove('d-none');
            } finally {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-check-lg me-2"></i>Save Team Member';
            }
        });
    });
</script>
{% endblock %}