{% extends "base.html" %}
{% load crispy_forms_filters %}
{% load i18n static %}

{% block title %}{{ _("Create Quotation") }}{% endblock title %}

{% block customCSS %}
    <style>
        .disabled{
            opacity: 0.5;
            pointer-events: none;
        }
             .color-box {
                width: 20px;
                height: 20px;
                border-radius: 4px;
                border: 1px solid #ccc;
            }    /* Custom select styles */
        .custom-select {
            position: relative;
            width: 100%;
            margin-bottom: 1.5rem;
        }

        .select-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.4rem 1rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            background-color: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .select-trigger:hover {
            border-color: #aaa;
        }

        .select-trigger.active {
            border-color: #4a90e2;
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
        }

        .selected-value {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .selected-value img {
            width: 30px;
            height: 20px;
            object-fit: contain;
        }

        .dropdown-icon {
            transition: transform 0.2s ease;
        }

        .custom-select.open .dropdown-icon {
            transform: rotate(180deg);
        }

        .options-container {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 6px;
            background-color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            z-index: 100;
            display: none;
        }

        .custom-select.open .options-container {
            display: block;
            animation: fadeIn 0.2s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .option {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: background-color 0.1s ease;
            gap: 0.75rem;
        }

        .option:hover {
            background-color: #f0f7ff;
        }

        .option.selected {
            background-color: #e6f0ff;
        }

        .option img {
            width: 30px;
            height: 20px;
            object-fit: contain;
        }

        /* Hidden native select for form submission */
        .native-select {
            position: absolute;
            opacity: 0;
            height: 0;
            width: 0;
        }
    </style>
{% endblock customCSS %}

{% block content %}
    <div class="row mt-4">
        {% if not items %}
            <div class="alert alert-outline-warning d-flex align-items-center" role="alert">
                <i class="fa-solid fa-circle-info fs-6"></i>
                <p class="mb-0 flex-1">{{ _("Please add at least one car before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9" href="{% url 'car_add' request.dealer.slug %}"> {{ _("Add Car") }} </a></p>
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
        {% if not customer_count %}
            <div class="alert alert-outline-warning d-flex align-items-center" role="alert">
                <i class="fa-solid fa-circle-info fs-6"></i>&nbsp;&nbsp;
                <p class="mb-0 flex-1"> {{ _("Please add at least one customer before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9" href="{% url 'customer_create' request.dealer.slug %}"> {{ _("Add Customer") }} </a></p>
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
        <form id="mainForm" method="post" class="needs-validation {% if not items or not customer_count %}disabled{% endif %}">
            <h3 class="text-center"><i class="fa-regular fa-file-lines"></i> {% trans "Create Quotation" %}</h3>
            {% csrf_token %}
            <div class="row g-3 col-10">
                {{ form|crispy }}
                 <div class="custom-select">
                <!-- Hidden native select for form submission -->
                <select class="native-select" name="item" required tabindex="-1">
                    <option value="">Select a car</option>
                    {% for item in items %}
                        <option value="{{ item.hash }}"></option>
                    {% endfor %}
                </select>

                <!-- Custom select UI -->
                <div class="select-trigger">
                    <div class="selected-value">
                        <span>Select a car</span>
                    </div>
                    <i class="fas fa-chevron-down dropdown-icon"></i>
                </div>

                <div class="options-container">
                {% for item in items %}
                    <div class="option" data-value="{{ item.hash }}" data-image="{{item.logo}}">
                        <img src="{{item.logo}}" alt="{{item.model}}">
                        <span>{{item.make}} {{item.model}} {{item.serie}} {{item.trim}} {{item.color_name}}</span>
                        <div class="color-box" style="background-color: rgb({{ item.exterior_color }});"></div>
                        <div class="color-box" style="background-color: rgb({{ item.interior_color }});"></div>
                        <span style="color:gray;">({{item.hash_count}} in stock)</span>
                    </div>
                    {% endfor %}
                </div>
            </div>

            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-sm btn-phoenix-success me-2" type="submit">
                    <i class="fa-solid fa-floppy-disk me-1"></i>
                    {{ _("Save") }}
                </button>
                <a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-phoenix-danger">
                    <i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}
                </a>
            </div>
        </form>
    </div>
{% endblock content %}

{% block customJS %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const Toast = Swal.mixin({
            toast: true,
            position: "top-end",
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: false,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            }
        });
            function notify(tag,msg){Toast.fire({icon: tag,titleText: msg});}

            const customSelects = document.querySelectorAll('.custom-select');

            customSelects.forEach(select => {
                const trigger = select.querySelector('.select-trigger');
                const optionsContainer = select.querySelector('.options-container');
                const options = select.querySelectorAll('.option');
                const nativeSelect = select.querySelector('.native-select');
                const selectedValue = select.querySelector('.selected-value');

                // Toggle dropdown
                trigger.addEventListener('click', (e) => {
                    e.stopPropagation();
                    select.classList.toggle('open');
                    trigger.classList.toggle('active');

                    // Close other open selects
                    document.querySelectorAll('.custom-select').forEach(otherSelect => {
                        if (otherSelect !== select) {
                            otherSelect.classList.remove('open');
                            otherSelect.querySelector('.select-trigger').classList.remove('active');
                        }
                    });
                });

                // Handle option selection
                options.forEach(option => {
                    option.addEventListener('click', () => {
                        const value = option.getAttribute('data-value');
                        const image = option.getAttribute('data-image');
                        const text = option.querySelector('span').textContent;

                        // Update selected display
                        selectedValue.innerHTML = `
                            <img src="${image}" alt="${text}">
                            <span>${text}</span>
                        `;

                        // Update native select value
                        nativeSelect.value = value;

                        // Mark as selected
                        options.forEach(opt => opt.classList.remove('selected'));
                        option.classList.add('selected');

                        // Close dropdown
                        select.classList.remove('open');
                        trigger.classList.remove('active');

                        // Trigger change event
                        const event = new Event('change');
                        nativeSelect.dispatchEvent(event);
                    });
                });

                // Close when clicking outside
                document.addEventListener('click', () => {
                    select.classList.remove('open');
                    trigger.classList.remove('active');
                });

                // Initialize with native select value
                if (nativeSelect.value) {
                    const selectedOption = select.querySelector(`.option[data-value="${nativeSelect.value}"]`);
                    if (selectedOption) {
                        selectedOption.click();
                    }
                }
            });

            // Form submission
            /*const form = document.getElementById('demo-form');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(form);
                alert(`Selected value: ${formData.get('car')}`);
            });*/

     document.getElementById('mainForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const titleInput = document.querySelector('[name="title"]');
            if (titleInput.value.length < 5) {
                notify("error", "Customer Estimate Title must be at least 5 characters long.");
                return; // Stop form submission
            }

        // Collect all form data
            const formData = {
                csrfmiddlewaretoken: document.querySelector('[name=csrfmiddlewaretoken]').value,
                title: document.querySelector('[name=title]').value,
                customer: document.querySelector('[name=customer]').value,
                item: [],
                quantity: [1],
                opportunity_id: "{{opportunity_id}}"
            };


        // Collect multi-value fields (e.g., item[], quantity[])
            document.querySelectorAll('[name="item"]').forEach(input => {
                formData.item.push(input.value);
            });

            console.log(formData);

            try {
            // Send data to the server using fetch
                const response = await fetch("{% url 'estimate_create' request.dealer.slug %}", {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': formData.csrfmiddlewaretoken,
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData)
                });

            // Parse the JSON response
                const data = await response.json();

            // Handle the response
                if (data.status === "error") {
                    notify("error", data.message); // Display an error message
                } else if (data.status === "success") {
                    notify("success","Estimate created successfully");
                    setTimeout(() => {
                        window.location.assign(data.url); // Redirect to the provided URL
                    }, 1000);
                } else {
                    notify("error","Unexpected response from the server");
                }
            } catch (error) {

                notify("error", error);
            }
        });

});
    </script>
{% endblock customJS %}