@extends('layouts.app')

@section('title', 'Giỏ hàng - XING NEW')

@section('content')
<div class="bg-slate-50 py-12 min-h-screen">
    <div class="container mx-auto px-4">
        <h1 class="text-3xl font-bold text-slate-900 mb-8">Giỏ hàng của bạn</h1>

        @if(session('cart') && count(session('cart')) > 0)
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Cart Items -->
                <div class="lg:col-span-2 space-y-4">
                    @foreach(session('cart') as $id => $details)
                        <div class="bg-white rounded-xl shadow-sm p-4 flex items-center gap-4 transition-all hover:shadow-md" data-id="{{ $id }}">
                            <div class="w-20 h-20 bg-slate-100 rounded-lg overflow-hidden flex-shrink-0">
                                @if($details['image'])
                                    <img src="{{ Storage::url($details['image']) }}" alt="{{ $details['name'] }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-slate-300">
                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                    </div>
                                @endif
                            </div>
                            <div class="flex-grow">
                                <h3 class="font-bold text-slate-900">{{ $details['name'] }}</h3>
                                @if(isset($details['attributes']) && !empty($details['attributes']))
                                    <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1">
                                        @foreach($details['attributes'] as $attr => $val)
                                            <span class="text-[10px] text-slate-500 bg-slate-100 px-2 py-0.5 rounded uppercase font-bold">
                                                {{ $attr }}: {{ $val }}
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                                <p class="text-blue-600 font-bold mt-1 text-sm">{{ number_format($details['price'], 0, ',', '.') }}đ</p>
                            </div>
                            <div class="flex items-center border border-slate-200 rounded-lg bg-white overflow-hidden">
                                <button class="px-3 py-1 hover:bg-slate-50 text-slate-600 border-r border-slate-200 update-cart-minus">-</button>
                                <input type="number" value="{{ $details['quantity'] }}" class="w-12 text-center border-none focus:ring-0 text-slate-700 font-medium cart-quantity" min="1">
                                <button class="px-3 py-1 hover:bg-slate-50 text-slate-600 border-l border-slate-200 update-cart-plus">+</button>
                            </div>
                            <div class="text-right ml-4">
                                <p class="font-bold text-slate-900">{{ number_format($details['price'] * $details['quantity'], 0, ',', '.') }}đ</p>
                                <button class="text-red-500 hover:text-red-700 text-sm mt-1 remove-from-cart">Xóa</button>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Order Summary -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-2xl shadow-sm p-6 sticky top-24">
                        <h2 class="text-xl font-bold text-slate-900 mb-6 pb-4 border-b border-slate-100">Tổng cộng</h2>
                        <div class="space-y-4 mb-6 text-slate-600">
                            <div class="flex justify-between">
                                <span>Tạm tính</span>
                                <span class="font-medium text-slate-900">{{ number_format($total, 0, ',', '.') }}đ</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-500 italic text-sm">(Giá chưa bao gồm phí vận chuyển)</span>
                            </div>
                            <div class="flex justify-between text-lg pt-4 border-t border-slate-100">
                                <span class="font-bold text-slate-900">Thành tiền</span>
                                <span class="font-bold text-blue-600">{{ number_format($total, 0, ',', '.') }}đ</span>
                            </div>
                        </div>
                        <a href="{{ route('cart.checkout') }}" class="block w-full bg-slate-900 hover:bg-slate-800 text-white text-center font-bold py-4 rounded-xl shadow-lg transition-all transform hover:-translate-y-1 mb-4">
                            Tiến hành đặt hàng
                        </a>
                        <a href="{{ route('products.index') }}" class="block w-full bg-white hover:bg-slate-50 text-slate-700 text-center font-semibold py-4 rounded-xl border border-slate-200 transition-all">
                            Tiếp tục mua sắm
                        </a>
                    </div>
                </div>
            </div>
        @else
            <div class="bg-white rounded-3xl p-12 text-center shadow-sm">
                <div class="w-24 h-24 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-6 text-slate-300">
                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 11-8 0m-4 5h16l1 12H3l1-12z"></path></svg>
                </div>
                <h3 class="text-2xl font-bold text-slate-900 mb-2">Giỏ hàng đang trống</h3>
                <p class="text-slate-500 mb-8">Bạn chưa thêm sản phẩm nào vào giỏ hàng.</p>
                <a href="{{ route('products.index') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold px-10 py-4 rounded-xl shadow-lg shadow-blue-500/30 transition-all transform hover:-translate-y-1">
                    Khám phá sản phẩm
                </a>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script type="text/javascript">
    // Function to update cart via AJAX
    function updateCart(id, quantity) {
        $.ajax({
            url: '{{ route('cart.update') }}',
            method: "PATCH",
            data: {
                _token: '{{ csrf_token() }}', 
                id: id, 
                quantity: quantity
            },
            success: function (response) {
                window.location.reload();
            },
            error: function() {
                alert('Có lỗi xảy ra khi cập nhật giỏ hàng!');
                window.location.reload();
            }
        });
    }

    // Handle plus/minus buttons
    $(".update-cart-plus, .update-cart-minus").click(function (e) {
        e.preventDefault();
        var ele = $(this);
        var id = ele.closest("[data-id]").attr("data-id");
        var quantityInput = ele.closest(".flex").find(".cart-quantity");
        var quantity = parseInt(quantityInput.val());

        if (ele.hasClass("update-cart-plus")) {
            quantity++;
        } else if (quantity > 1) {
            quantity--;
        }
        
        updateCart(id, quantity);
    });

    // Handle manual quantity input change
    $(".cart-quantity").change(function() {
        var ele = $(this);
        var id = ele.closest("[data-id]").attr("data-id");
        var quantity = parseInt(ele.val());

        if (isNaN(quantity) || quantity < 1) {
            quantity = 1;
        }
        
        updateCart(id, quantity);
    });

    // Remove from cart
    $(".remove-from-cart").click(function (e) {
        e.preventDefault();
        var ele = $(this);
        var id = ele.closest("[data-id]").attr("data-id");

        if(confirm("Bạn có muốn xóa sản phẩm này khỏi giỏ hàng?")) {
            $.ajax({
                url: '{{ route('cart.remove') }}',
                method: "DELETE",
                data: {
                    _token: '{{ csrf_token() }}', 
                    id: id
                },
                success: function (response) {
                    window.location.reload();
                }
            });
        }
    });

</script>
@endpush
@endsection