@extends('layouts.app')
@section('title','Carrello')

@section('content')
    <section class="section-padding">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-7">
                    <h3 class="mb-3">Riepilogo ordine</h3>

                    @if($products->isEmpty())
                        <div class="list-group">
                            <div class="list-group-item text-center text-muted">
                                Il carrello è vuoto.
                            </div>
                        </div>
                    @else
                        <div class="list-group">
                            @foreach($products as $p)
                                @php
                                    $img = $p->mainImage;
                                    $disk = $img->disk ?? 'public';
                                    $thumb = $img ? (data_get($img->meta,'thumb_312x340') ?: $img->path) : null;
                                    $src = $img ? Storage::disk($disk)->url($thumb) : asset('assets/img/product/default.webp');
                                @endphp

                                <div class="list-group-item d-flex align-items-center gap-3 flex-wrap" style="overflow:visible;">
                                    <img src="{{ $src }}" alt="{{ $p->name }}" style="width:64px;height:64px;object-fit:cover;border-radius:.35rem">
                                    <div class="flex-grow-1 min-w-0">
                                        <div class="fw-semibold text-truncate">{{ $p->name }}</div>
                                        <div class="text-muted small">{{ number_format((float)$p->price,2) }}€</div>
                                    </div>

                                    <div class="ms-auto d-flex align-items-center gap-2">
                                        <span class="badge bg-secondary">Q.tà: 1</span>

                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="col-lg-5">
                    <h3 class="mb-3">Dati per la consegna</h3>

                    @if($errors->has('global'))
                        <div class="alert alert-danger">{{ $errors->first('global') }}</div>
                    @endif

                    <form method="post" action="{{ route('checkout.cart.submit') }}" class="card p-3">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Nome e cognome</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                   name="name" value="{{ old('name') }}" required>
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Telefono</label>
                            <input type="text" class="form-control @error('tel') is-invalid @enderror"
                                   name="tel" value="{{ old('tel') }}" required>
                            @error('tel') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Indirizzo</label>
                            <input type="text" class="form-control @error('street-address') is-invalid @enderror"
                                   name="street-address" value="{{ old('street-address') }}" required>
                            @error('street-address') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <button class="btn btn-primary w-100" {{ $products->isEmpty() ? 'disabled' : '' }}>Conferma ordine</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const token = document.querySelector('meta[name="csrf-token"]')?.content || '';

            function setCartCount(n){
                document.querySelectorAll('.js-cart-badge, .header-cart .number, .header-icon .number')
                    .forEach(el => el.textContent = n);
            }

            document.addEventListener('click', async function(e){
                const btn = e.target.closest('.js-remove');
                if (!btn) return;

                const url = btn.dataset.url;
                const row = btn.closest('.list-group-item');
                btn.disabled = true;

                try {
                    const body = new URLSearchParams({_token: token, _method: 'DELETE'});

                    const res = await fetch(url, {
                        method: 'POST',
                        credentials: 'same-origin',               // trimite cookie-urile de sesiune
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body
                    });

                    let data = {};
                    try { data = await res.json(); } catch(_) {}

                    if (res.ok && (data.ok ?? true)) {
                        row?.parentElement?.removeChild(row);
                        if (typeof data.count !== 'undefined') setCartCount(parseInt(data.count, 10));

                        const list = document.querySelector('.list-group');
                        if (list && !list.querySelector('.list-group-item')) {
                            list.innerHTML = '<div class="list-group-item text-center text-muted">Il carrello è vuoto.</div>';
                            // opțional: dezactivează butonul de confirmare
                            document.querySelector('button.btn.btn-primary.w-100')?.setAttribute('disabled','disabled');
                        }
                    } else {
                        location.reload(); // fallback
                    }
                } catch(_){
                    location.reload();
                }
            });
        });
    </script>
@endpush