{% extends 'template.html.twig' %}

{% block title %}Mon Site Démo - Order index{% endblock %}

{% block body %}
<style>
    @media (max-width: 768px) {
            .recap-products {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .recap-item {
            border: 1px solid #ddd;
            padding: 1rem;
            border-radius: 5px;
            background: #f9f9f9;
        }

        .recap-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .recap-label {
            font-weight: bold;
        }

        .recap-summary {
            margin-top: 1rem;
            padding: 1rem;
            background: #f1f1f1;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
    }
   
</style>
{% include "nav.html.twig" %}

<section class="section" id="menu">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-heading">
                    <h6>Mon Panier</h6>
                    <h2>Finaliser ma commande</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="mt-5 pt-lg-3 pb-nb-1 pb-lg-3 breadcrumb custom-breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Acceuil</a></li>
                            <li class="breadcrumb-item"><a href="{{ path('app_product') }}">Nos produits</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Création de la commande</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        {{ include('flash.html.twig') }}
        
        {{ form_start(orderForm, { 'attr': {'novalidate': 'novalidate'}, 'action': path('app_order_verify'), 'method': 'POST' }) }}   
        <div class="col-lg-12 text-center text-light">
            {{ form_errors(orderForm) }}
        </div>      
        <!-- Delivery Choice Section -->
        <div class="form-group col-lg-8">
            {{ form_label(orderForm.transportWay, 'Mode de Livraison', {'label_attr': {'class': 'form-label'}}) }}
            <div class="select-wrapper">
                {{ form_widget(orderForm.transportWay, {'attr': {'class': 'form-select', 'style': 'width: 100%;'}}) }}
            </div>
            {{ form_errors(orderForm.transportWay) }}
        </div>          
             
        <!-- Address Information Section -->
        <div class="form-group col-lg-8">
            {{ form_row(orderForm.title) }}
            {{ form_errors(orderForm.title) }}
        </div>

        <div class="form-group col-lg-8">
            {{ form_row(orderForm.receiverName) }}
            {{ form_errors(orderForm.title) }}
        </div>
    
        <div class="form-group col-lg-8">
            {{ form_row(orderForm.receiverEmail) }}
            {{ form_errors(orderForm.receiverName) }}
        </div>

        <div class="form-group col-lg-8">
            {{ form_row(orderForm.receiverPhone) }}
            {{ form_errors(orderForm.receiverPhone) }}
        </div>
        
        <div class="form-group col-lg-8">
            {{ form_row(orderForm.paymentMethod) }}
            {{ form_errors(orderForm.paymentMethod) }}
        </div>

        <div class="form-group col-lg-8" style="display: flex;">
            {{ form_row(orderForm.useSavedAddress) }}
            {{ form_errors(orderForm.useSavedAddress) }}
        </div>

        <div id="savedAddressFields" style="display: none;">
            <div class="form-group col-lg-8">
                {{ form_row(orderForm.savedAddress) }}
                {{ form_errors(orderForm.savedAddress) }}
            </div>
        </div>
    
        <div id="customAddressFields" style="display: block;">
            <div class="form-group col-lg-8">
                {{ form_row(orderForm.addressTitle) }}
                {{ form_errors(orderForm.addressTitle) }}
            </div>
            <div class="form-group col-lg-8">
                {{ form_row(orderForm.receiverAddress) }}
                {{ form_errors(orderForm.receiverAddress) }}
            </div>
    
            <div class="form-group col-lg-8">
                {{ form_row(orderForm.city) }}
                {{ form_errors(orderForm.city) }}
            </div>
    
            <div class="form-group col-lg-8">
                {{ form_row(orderForm.zipCode) }}
                {{ form_errors(orderForm.zipCode) }}
            </div>
    
            <div class="form-group col-lg-8">
                {{ form_row(orderForm.saveAddress) }}
                {{ form_errors(orderForm.saveAddress) }}
            </div>
        </div>    
        <!-- Recap of Products Section -->
        <div class="card mb-4">
            <div class="card-header text-white" style="background-color: #fb5849;">Récapitulatif de la Commande</div>
            <div class="card-body">
                {% if cartData.items is not empty %}
                <div class="table-responsive d-none d-md-block">
                    <table class="table table-striped table-bordered">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">Id</th>
                                <th scope="col">Title</th>
                                <th scope="col">Description</th>
                                <th scope="col">Picture</th>
                                <th scope="col">Prix</th>
                                <th scope="col">Quantité</th>
                                <th scope="col">Total</th>
                                <th scope="col">Supprimer</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in cartData.items %}
                            {% if item.product is defined %}
                            <tr>
                                <td>{{ item.product.id }}</td>
                                <td>{{ item.product.name }}</td>
                                <td>{{ item.product.description|raw }}</td>
                                <td>
                                    {% if item.product.productImages[0] is defined and item.product.productImages[0] is not null %}
                                        <img style="width:100px" src="{{ vich_uploader_asset(item.product.productImages[0], 'imageFile') }}" alt="Image de {{ item.product.name }}">
                                    {% else %}
                                        <img style="width:100px" src="{{ asset('assets/images/noPic.jpg') }}" alt="Default Cover Image">
                                    {% endif %}
                                </td>
                                <td>{{ item.product.price }} €</td>
                                <td>{{ item.quantity }}</td>
                                <td>{{ item.product.price * item.quantity }} €</td>
                                <td><a href="{{ path('app_cart_remove', {id: item.product.id}) }}" class="btn btn-sm btn-danger" data-toggle="tooltip" title="Supprimer"><i class="fa fa-trash"></i></a></td>
                            </tr>
                            {% endif %}
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5" class="text-right font-weight-bold">Total de Nombres:</td>
                                <td colspan="3">{{ cartData.items|map(item => item.quantity)|reduce((carry, qty) => carry + qty, 0) }}</td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-right font-weight-bold">Total:</td>
                                <td colspan="3">{{ cartData.cartTotal }} €</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Mobile View -->
                <div class="d-block d-md-none">
                    {% for item in cartData.items %}
                    {% if item.product is defined %}
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">{{ item.product.name }}</h5>
                            <p class="card-text">{{ item.product.description|raw }}</p>
                            <p>
                                {% if item.product.productImages[0] is defined and item.product.productImages[0] is not null %}
                                    <img style="width:100%; max-width:150px;" src="{{ vich_uploader_asset(item.product.productImages[0], 'imageFile') }}" alt="Image de {{ item.product.name }}">
                                {% else %}
                                    <img style="width:100%; max-width:150px;" src="{{ asset('assets/images/noPic.jpg') }}" alt="Default Cover Image">
                                {% endif %}
                            </p>
                            <p>Prix: {{ item.product.price }} €</p>
                            <p>Quantité: {{ item.quantity }}</p>
                            <p>Total: {{ item.product.price * item.quantity }} €</p>
                            <a href="{{ path('app_cart_remove', {id: item.product.id}) }}" class="btn btn-sm btn-danger" data-toggle="tooltip" title="Supprimer"><i class="fa fa-trash"></i></a>
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}

                    <div class="text-center mt-3">
                        <p>Total de Nombres: {{ cartData.items|map(item => item.quantity)|reduce((carry, qty) => carry + qty, 0) }}</p>
                        <p>Total: {{ cartData.cartTotal }} €</p>
                    </div>
                </div>
                {% else %}
                <p>Aucun produit dans le panier.</p>
                {% endif %}

                <div class="text-right">
                    <a href="{{ path('app_product') }}" class="btn btn-secondary mt-3">Ajouter des produits</a>
                </div>
            </div>
        </div>
        <!-- Submit Order Button -->
        <div class="text-center">
            <button type="submit" class="btn" id="new-btn">
                {{ isModify ? 'Enregistrer la modification' : 'Valider la commande' }}
            </button>
        </div>

        {{ form_row(orderForm._token) }}
        {{ form_end(orderForm) }}
    </div>
</section>

{% include "footer.html.twig" %}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const useSavedAddressCheckbox = document.querySelector('#order_useSavedAddress');
        const savedAddressFields = document.getElementById('savedAddressFields');
        const customAddressFields = document.getElementById('customAddressFields');
        const transportSelect = document.querySelector('#order_transportWay');
        const addressFields = document.querySelectorAll('#customAddressFields input');

        // Toggle between saved and custom address fields
        useSavedAddressCheckbox.addEventListener('change', function () {
            const isChecked = useSavedAddressCheckbox.checked;
            savedAddressFields.style.display = isChecked ? 'block' : 'none';
            customAddressFields.style.display = isChecked ? 'none' : 'block';
        });

        // Handle changes in delivery mode
        transportSelect.addEventListener('change', function () {
            const selectedOption = transportSelect.options[transportSelect.selectedIndex];
            const isPickup = selectedOption.dataset.isPickup === 'true';

            if (isPickup) {
                // Disable address fields for "Pick Up in Store"
                addressFields.forEach(field => {
                    field.disabled = true;
                    field.value = ''; // Clear any existing input
                });
                savedAddressFields.style.display = 'none';
                customAddressFields.style.display = 'none';
                
                 // Disable the "Use Saved Address" checkbox
                useSavedAddressCheckbox.disabled = true;
                useSavedAddressCheckbox.checked = false; // Ensure it's unchecked
            } else {
                // Enable address fields for other options
                addressFields.forEach(field => field.disabled = false);

                // Reset visibility based on saved address checkbox
                const isChecked = useSavedAddressCheckbox.checked;
                savedAddressFields.style.display = isChecked ? 'block' : 'none';
                customAddressFields.style.display = isChecked ? 'none' : 'block';
            }
        });

        // Initialize visibility on page load
        const initializeFields = () => {
            const selectedOption = transportSelect.options[transportSelect.selectedIndex];
            const isPickup = selectedOption.dataset.isPickup === 'true';

            if (isPickup) {
                addressFields.forEach(field => field.disabled = true);
                savedAddressFields.style.display = 'none';
                customAddressFields.style.display = 'none';
            } else {
                addressFields.forEach(field => field.disabled = false);

                const isChecked = useSavedAddressCheckbox.checked;
                savedAddressFields.style.display = isChecked ? 'block' : 'none';
                customAddressFields.style.display = isChecked ? 'none' : 'block';
            }
        };

        initializeFields();
    });
</script>

{% endblock %}