@extends('layouts.app')

@section('content')

<div class="ht__bradcaump__area mb-5" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap_small">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h2 class="bradcaump-title">{{ __('shop.cart_title') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row g-4">

        <!-- {{ auth()->user() }} -->

        {{-- === Colonne de gauche : Adresses + Panier === --}}
        <div class="col-lg-8">
            {{-- === Adresses === --}}
            <h2 class="mb-3">{{ __('shop.checkout_address_title') }}</h2>

            @php
            $addresses = auth()->user()?->addresses ?? [];
            @endphp

            @if ($addresses->count())
            <!-- <form method="POST" action=""> -->
            <!-- @csrf -->
            <div class="row g-3">
                @foreach($addresses as $address)
                <div class="col-md-6">
                    <div class="card h-100 address-card {{ old('selected_address', $address->is_default ? $address->id : null) == $address->id ? 'border-primary' : '' }}" id="card-{{ $address->id }}" data-id="{{ $address->id }}">
                        <div class="card-body">
                            <div class="form-check">
                                <input
                                    class="form-check-input address-radio"
                                    type="radio"
                                    name="selected_address"
                                    value="{{ $address->id }}"
                                    id="address-{{ $address->id }}"
                                    {{ old('selected_address', $address->is_default ? $address->id : null) == $address->id ? 'checked' : '' }}>
                                <label class="form-check-label" for="address-{{ $address->id }}">
                                    <strong>{{ $address->address_line1 }}</strong><br>
                                    {{ $address->zip }} {{ $address->city }}<br>
                                    {{ $address->country }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <!-- </form> -->

            <div class="mt-4">
                <!-- <button type="submit" class="btn btn-primary">Utiliser cette adresse</button> -->
                <!-- <a href="#" id="showAddressForm" class="btn btn-link">+ Ajouter une nouvelle adresse</a> -->
                <button class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#addressModal"
                    data-action="{{ route('member.addresses.submit') }}"
                    data-method="POST"
                    data-title="{{ __('member.address.add_new_address') }}">
                    <i class="bi bi-plus-lg"></i> {{ __('member.address.add_new_address') }}
                </button>
            </div>

            @else
            <!-- <p class="text-muted">Aucune adresse enregistrée. Veuillez en ajouter une pour continuer.</p> -->
            <button class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#addressModal"
                data-action="{{ route('member.addresses.submit') }}"
                data-method="POST"
                data-title="{{ __('member.address.add_new_address') }}">
                <i class="bi bi-plus-lg"></i> {{ __('member.address.add_new_address') }}
            </button>
            @endif

            <div class="mt-5 text-center">
                <div class="contact-btn">
                    <a href="{{ route('shop') }}" class="fv-btn btn rounded-0">
                        <i class="bi bi-arrow-left"></i> {{ __('shop.order_back_to_shop') }}
                    </a>
                </div>
            </div>

        </div>

        <!-- Colonne droite : Résumé + paiement -->
        <div class="col-lg-4 mt-5">
            <div class="card shadow-sm bg-light border-0 sticky-top" style="top: 100px;" >
                <div class="card-body">
                    <h5 class="card-title mb-4">{{ __('shop.checkout_summary_title') }}</h5>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">{{ __('shop.cart_subtotal') }}</span>
                        <span>{{ number_format($subtotal, 2, ',', ' ') }} €</span>
                    </div>

                    @if ($discountAmount > 0) {{-- come from ViewServiceProvider --}}
                    <div class="d-flex justify-content-between mb-3 pb-3 border-bottom">
                        <span class="text-muted">{{ __('shop.cart_discount_label') }} ({{ $couponCode }})</span>
                        <span class="cartdiscount">
                            <span id="cartdiscount">{{ number_format($discountAmount, 2, ',', ' ') }} €</span>
                        </span>
                    </div>
                    @endif

                    
                    <div class="d-flex justify-content-between mb-2 ">
                        <span class="text-muted">{{ __('shop.cart_tva_label') }} ({{ $tvaRate * 100 }}%)</span>
                        <span>{{ number_format($cartTva, 2, ',', ' ') }} €</span>
                    </div>
                    
                    <!-- NOUVEAU : Frais de livraison -->
                    <div class="d-flex justify-content-between mb-3 pb-3 border-bottom">
                        <span class="text-muted">{{ __('shop.checkout_summary_shipping') }}</span>
                        <span id="shipping-cost">
                            <span class="text-muted">{{ __('shop.checkout_summary_select_address') }}</span>
                        </span>
                    </div>


                    <div class="d-flex justify-content-between mt-3 mb-4">
                        <span class="fw-bold">Total</span>
                        <span class="h5 fw-bold" id="final-total">{{ number_format($totalafterdiscountandtva, 2, ',', ' ') }} €</span>
                    </div>

                    <form action="{{ route('checkout.payment') }}" method="POST" id="goToPaymentForm" data-cart-total="{{ $totalafterdiscountandtva }}">
                        @csrf
                        <input type="hidden" name="selected_address" id="selected_address" value="{{ old('selected_address') }}">
                        <input type="hidden" name="carttotal" id="cartfinalttc" value="{{ $totalafterdiscountandtva }}">
                        <input type="hidden" name="carttva" value="{{ $cartTva }}">
                        <input type="hidden" name="discountAmount" value="{{ $discountAmount }}">
                        <input type="hidden" name="couponId" value="{{ $couponId }}">
                        <button type="submit" class="btn btn-success w-100">
                            {{ __('shop.checkout_button_pay') }} <i class="bi bi-arrow-right ms-2"></i>
                        </button>
                    </form>


                    <a href="{{ route('payment.cancel', $orderReference) }}" class="btn btn-danger w-100 mt-3">{{ __('shop.checkout_cancel_order') }}</a>


                    <p class="text-muted small text-center mt-3">
                        {{ __('shop.cart_free_shipping', ['amount' => $shippingfree_amount]) }}
                    </p>
                </div>
            </div>

            <div class="mt-3 text-center">
                <div class="contact-btn">
                    <a href="{{ route('cart.view') }}" class="fv-btn1 btn1 rounded-0">
                        <i class="bi bi-arrow-left"></i> {{ __('shop.checkout_back_to_cart') }}
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Modal add address -->
<x-member.form-add-address />

@endsection

@section('scripts')
<script>
$(function() {
    let currentShippingCost = 0;
    // Le baseTotal doit être le montant TTC SANS frais de livraison
    // Si il y a déjà des frais dans le total affiché, on les soustrait
    const displayedTotal = parseFloat($('#goToPaymentForm').data('cart-total')) || 0;
    const baseTotal = displayedTotal; // On assume que c'est déjà sans frais initialement

    // Fonction pour mettre à jour les frais de livraison
    function updateShippingCost(addressId) {
        if (!addressId) {
            $('#shipping-cost').html('<span class="text-muted">Sélectionnez une adresse</span>');
            updateFinalTotal(0);
            return;
        }

        // Afficher un loader
        $('#shipping-cost').html('<span class="text-muted">Calcul...</span>');

        $.ajax({
            url: '/checkout/calculate-shipping', // URL directe pour éviter les erreurs Blade
            method: 'POST',
            data: {
                address_id: addressId,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                currentShippingCost = parseFloat(response.shipping_cost) || 0;
                $('#shipping-cost').html(response.shipping_cost_formatted);
                updateFinalTotal(currentShippingCost);
            },
            error: function() {
                $('#shipping-cost').html('<span class="text-danger">Erreur de calcul</span>');
                updateFinalTotal(0);
            }
        });
    }

    // Fonction pour mettre à jour le total final
    function updateFinalTotal(shippingCost) {
        // S'assurer que shippingCost est un nombre
        const shipping = parseFloat(shippingCost) || 0;
        const finalTotal = baseTotal + shipping;
        
        console.log('Debug total:', {
            baseTotal: baseTotal,
            shippingCost: shipping,
            finalTotal: finalTotal
        });
        
        $('#final-total').text(finalTotal.toLocaleString('fr-FR', {
            style: 'currency',
            currency: 'EUR',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }));
        
        // Mettre à jour aussi le champ hidden pour le formulaire
        $('input[name="carttotal"]').val(finalTotal);
    }

    // Event listener pour les changements d'adresse
    $('.address-radio').on('change', function() {
        const selectedId = $(this).val();
        $('#goToPaymentForm #selected_address').val(selectedId);
        $('.address-card').removeClass('border-primary');
        $('#card-' + selectedId).addClass('border-primary');
        
        // Mettre à jour les frais de livraison
        updateShippingCost(selectedId);
    });

    // Make the whole address card clickable
    $('.address-card').on('click', function(e) {
        if (!$(e.target).is('input[type="radio"]')) {
            const id = $(this).data('id');
            $('#address-' + id).prop('checked', true).trigger('change');
        }
    });

    // Initialisation si une adresse est déjà sélectionnée
    const initiallyChecked = $('.address-radio:checked').val();
    if (initiallyChecked) {
        $('#selected_address').val(initiallyChecked);
        updateShippingCost(initiallyChecked);
    }

    // Reset form in modal
    $('#addressModal').on('hidden.bs.modal', function() {
        $(this).find('form').trigger('reset');
    });
});    
</script>
@endsection