@extends('front.layouts.app')
@push('title', __('Shopping Cart'))

@section('content')
<section class="py-4">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0 d-flex align-items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cart3" viewBox="0 0 16 16">
                                <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.352L2.77 3H9.5a.5.5 0 0 1 .49.598l-1.388 5.712A.5.5 0 0 1 8.027 9.5H3.537a.5.5 0 0 1-.488-.608l1.43-5.772A.5.5 0 0 1 4.5 3H1.9L1.567 1.678A.5.5 0 0 1 .5 1zm10 5.5a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0zM4.5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                            </svg>
                            {{ __('Shopping Cart') }}
                        </h4>
                    </div>
                    <div class="card-body">
                        @if(count($cart['items']) > 0)
                            <!-- Cart Items Table -->
                            <div class="table-responsive mb-4">
                                <table class="table table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th>{{ __('Product') }}</th>
                                            <th class="text-center">{{ __('Price') }}</th>
                                            <th class="text-center">{{ __('Quantity') }}</th>
                                            <th class="text-center">{{ __('Discount') }}</th>
                                            <th class="text-center">{{ __('Total') }}</th>
                                            <th class="text-center">{{ __('Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($cart['items'] as $item)
                                        <tr id="cart_item_{{ $item['product_id'] }}">
                                            <td>
                                                <div class="d-flex align-items-center gap-3">
                                                    <img src="{{ asset($item['img']) }}" 
                                                         class="rounded" 
                                                         alt="{{ $item['name'] }}"
                                                         style="width: 60px; height: 60px; object-fit: cover;">
                                                    <div>
                                                        <a href="{{ route('product', $item['slug']) }}" 
                                                           class="text-decoration-none fw-bold">
                                                            {{ $item['name'] }}
                                                        </a>
                                                        @if($item['customer_answers'])
                                                            <div class="small text-muted mt-1">
                                                                @foreach($item['customer_answers'] as $answer)
                                                                    <div>{{ $answer }}</div>
                                                                @endforeach
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                {{ config('app.currency_symbol') }}{{ money($item['price']) }}
                                            </td>
                                            <td class="text-center">
                                                <div class="input-group" style="max-width: 130px; margin: 0 auto;">
                                                    <button class="btn btn-outline-secondary btn-sm" 
                                                            onclick="updateCartQty({{ $item['product_id'] }}, {{ $item['qty'] - 1 }})"
                                                            {{ $item['qty'] <= 1 ? 'disabled' : '' }}>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
                                                            <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
                                                        </svg>
                                                    </button>
                                                    <input type="text" 
                                                           class="form-control text-center form-control-sm" 
                                                           value="{{ $item['qty'] }}" 
                                                           readonly>
                                                    <button class="btn btn-outline-secondary btn-sm"
                                                            onclick="updateCartQty({{ $item['product_id'] }}, {{ $item['qty'] + 1 }})">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                                                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                                                        </svg>
                                                    </button>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                @if($item['discount'] > 0)
                                                    <span class="text-success fw-bold">
                                                        -{{ config('app.currency_symbol') }}{{ money($item['discount']) }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td class="text-center fw-bold">
                                                {{ config('app.currency_symbol') }}{{ money($item['price'] * $item['qty'] - ($item['discount'] ?? 0)) }}
                                            </td>
                                            <td class="text-center">
                                                <button class="btn btn-sm btn-danger"
                                                        onclick="removeFromCart({{ $item['product_id'] }})"
                                                        title="{{ __('Remove') }}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 1a.5.5 0 0 0-.5.5v1h6V1.5a.5.5 0 0 0-.5-.5h-5z"/>
                                                    </svg>
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- Cart Actions and Summary -->
                            <div class="row mt-4">
                                <div class="col-lg-8">
                                    <div class="d-flex gap-2">
                                        <a href="{{ route('index') }}" class="btn btn-outline-primary">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
                                            </svg>
                                            {{ __('Continue Shopping') }}
                                        </a>
                                        <button onclick="clearCart()" class="btn btn-outline-danger">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 1a.5.5 0 0 0-.5.5v1h6V1.5a.5.5 0 0 0-.5-.5h-5z"/>
                                            </svg>
                                            {{ __('Clear Cart') }}
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="card bg-light border-1">
                                        <div class="card-body">
                                            <h5 class="card-title mb-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calculator" viewBox="0 0 16 16">
                                                    <path d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"/>
                                                    <path d="M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-2zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
                                                </svg>
                                                {{ __('Cart Summary') }}
                                            </h5>
                                            <hr>
                                            <div class="d-flex justify-content-between mb-2">
                                                <span>{{ __('Subtotal') }}:</span>
                                                <span id="cart_subtotal">{{ config('app.currency_symbol') }}{{ money($cart['totals']['subtotal']) }}</span>
                                            </div>
                                            @if($cart['totals']['discount'] > 0)
                                            <div class="d-flex justify-content-between mb-2 text-success">
                                                <span>{{ __('Discount') }}:</span>
                                                <span id="cart_discount">-{{ config('app.currency_symbol') }}{{ money($cart['totals']['discount']) }}</span>
                                            </div>
                                            @endif
                                            <hr>
                                            <div class="d-flex justify-content-between mb-3">
                                                <strong>{{ __('Total') }}:</strong>
                                                <strong class="text-danger h5 mb-0" id="cart_total">
                                                    {{ config('app.currency_symbol') }}{{ money($cart['totals']['total']) }}
                                                </strong>
                                            </div>
                                            <a href="{{ route('cart.checkout') }}" 
                                               class="btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2">
                                                {{ __('Proceed to Checkout') }}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <!-- Empty Cart Message -->
                            <div class="text-center py-5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-cart-x text-muted mb-3" viewBox="0 0 16 16">
                                    <path d="M7 1.5a.5.5 0 0 1 1 0V4H3.802a.5.5 0 0 1-.471-.332l-1.5-4A.5.5 0 0 1 2.302 0h11.396a.5.5 0 0 1 .471.668l-1.5 4A.5.5 0 0 1 12.198 4H8v-2.5a.5.5 0 0 1 1 0V4a.5.5 0 0 1-1 0V1.5zM1 12a2 2 0 0 1 2-2h1v2.5A1.5 1.5 0 0 0 4.5 16h7a1.5 1.5 0 0 0 1.5-1.5V12h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-2zm2.354 5a.5.5 0 0 0-.5-.5h-.5a.5.5 0 0 0-.5.5v.006c0 .041.015.08.044.11a.5.5 0 0 0 .956 0c.028-.03.044-.069.044-.11v-.006zM5 12.5v2.006c0 .041.015.08.044.11a.5.5 0 0 0 .956 0c.028-.03.044-.069.044-.11V12.5a.5.5 0 0 0-1 0zm2.5 0v2.006c0 .041.015.08.044.11a.5.5 0 0 0 .954 0c.03-.03.046-.069.046-.11V12.5a.5.5 0 0 0-1 0zm2.5 0v2.006c0 .041.015.08.044.11a.5.5 0 0 0 .956 0c.028-.03.044-.069.044-.11V12.5a.5.5 0 0 0-1 0z"/>
                                </svg>
                                <h5 class="mt-3">{{ __('Your cart is empty') }}</h5>
                                <p class="text-muted">{{ __('Add products to your cart to get started') }}</p>
                                <a href="{{ route('index') }}" class="btn btn-primary mt-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shop" viewBox="0 0 16 16">
                                        <path d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a1.5 1.5 0 0 1-1.5 1.5H15v4.75h1.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H2v-4.75H1.5A1.5 1.5 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976l2.609-3.044zM2 5.37v.255h12V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L2.12 5.045A.5.5 0 0 0 2 5.37z"/>
                                        <path d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 1 1 0 1H2.5a.5.5 0 0 1-.5-.5zm2-1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                                    </svg>
                                    {{ __('Start Shopping') }}
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('js')
<script src="{{ asset('front/js/cart.js') }}"></script>
@endpush