@extends('layouts.app')

@section('title', 'Your Cart — ' . config('app.name'))

@section('header')
    <h2 class="h5 fw-semibold mb-0">{{ __('Your Cart') }}</h2>
@endsection

@section('content')
    <div class="hp-container-narrow">
        @if (session('status') === 'removed-from-cart')
            <div class="alert alert-secondary py-2">Removed from cart.</div>
        @endif

        @if ($cartItems->isEmpty())
            <div class="hp-card">
                <div class="hp-empty">
                    <span class="hp-empty-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4h2l2.4 12.2a2 2 0 0 0 2 1.8h7.2a2 2 0 0 0 2-1.6L20 8H6M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/></svg>
                    </span>
                    <p class="mb-3 small">Your cart is empty.</p>
                    <a href="{{ route('home') }}" class="btn btn-primary btn-sm">Browse services</a>
                </div>
            </div>
        @else
            <div class="d-flex flex-column gap-2">
                @foreach ($cartItems as $item)
                    <div class="hp-card p-3 d-flex justify-content-between align-items-center gap-2">
                        <div class="d-flex align-items-center gap-3">
                            <span class="hp-quick-link-icon">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Zm5 0V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18"/></svg>
                            </span>
                            <div>
                                <h3 class="h6 fw-semibold mb-1">{{ $item->service->name }}</h3>
                                <p class="text-muted small mb-0">{{ $item->service->category->name }}</p>
                            </div>
                        </div>
                        <form method="POST" action="{{ route('customer.cart.destroy', $item) }}">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-link text-danger text-decoration-none">Remove</button>
                        </form>
                    </div>
                @endforeach
            </div>

            <div class="hp-sticky-bar">
                <div class="hp-sticky-bar-inner">
                    <a href="{{ route('customer.checkout.create') }}" class="btn btn-primary w-100 py-2">
                        Proceed to Checkout ({{ $cartItems->count() }} service{{ $cartItems->count() === 1 ? '' : 's' }})
                    </a>
                </div>
            </div>
        @endif
    </div>
@endsection