@extends('layouts.app')

@section('title', 'Shopping Cart')

@section('content')
<div class="container py-5">
    <h1 class="mb-4">Shopping Cart</h1>
    @if(count($cart) > 0)
        <div class="row">
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-body">
                        @foreach($cart as $id => $item)
                        <div class="row align-items-center cart-item mb-3 pb-3 border-bottom">
                            <div class="col-3">
                                <img src="{{ asset('storage/'.$item['image']) }}" class="img-fluid" alt="{{ $item['name'] }}">
                            </div>
                            <div class="col-3">
                                <h5>{{ $item['name'] }}</h5>
                                @if(isset($item['options']['size']))<small>Size: {{ $item['options']['size'] }}</small><br>@endif
                                @if(isset($item['options']['framing']))<small>Framing: {{ $item['options']['framing'] }}</small>@endif
                            </div>
                            <div class="col-2">
                                <input type="number" value="{{ $item['quantity'] }}" min="1" class="form-control update-cart" data-id="{{ $id }}">
                            </div>
                            <div class="col-2">
                                ${{ number_format($item['price'] * $item['quantity'], 2) }}
                            </div>
                            <div class="col-2 text-end">
                                <button class="btn btn-sm btn-outline-danger remove-cart" data-id="{{ $id }}"><i class="fas fa-trash"></i></button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5>Cart Summary</h5>
                        <hr>
                        @php
                            $subtotal = 0;
                            foreach($cart as $item) {
                                $subtotal += $item['price'] * $item['quantity'];
                            }
                            $discount = 0;
                            if(session()->has('coupon')) {
                                $coupon = \App\Models\Coupon::where('code', session('coupon'))->first();
                                if($coupon) {
                                    if($coupon->type == 'fixed') $discount = $coupon->value;
                                    else $discount = ($subtotal * $coupon->value) / 100;
                                }
                            }
                            $shipping = 50;
                            $total = $subtotal - $discount + $shipping;
                        @endphp
                        <p>Subtotal: ${{ number_format($subtotal, 2) }}</p>
                        @if($discount > 0)
                        <p class="text-success">Discount: -${{ number_format($discount, 2) }}</p>
                        @endif
                        <p>Shipping: ${{ number_format($shipping, 2) }}</p>
                        <h4>Total: ${{ number_format($total, 2) }}</h4>
                        <hr>
                        <div class="mb-3">
                            <label>Coupon Code</label>
                            <div class="input-group">
                                <input type="text" id="coupon_code" class="form-control" placeholder="Enter code">
                                <button class="btn btn-outline-secondary" id="apply-coupon">Apply</button>
                            </div>
                        </div>
                        <a href="{{ route('checkout') }}" class="btn btn-dark w-100">Proceed to Checkout</a>
                    </div>
                </div>
            </div>
        </div>
    @else
        <p>Your cart is empty. <a href="{{ route('shop') }}">Continue shopping</a></p>
    @endif
</div>
@endsection

@push('scripts')
<script>
    $('.update-cart').change(function() {
        let id = $(this).data('id');
        let quantity = $(this).val();
        $.post('{{ route("cart.update") }}', {
            _token: '{{ csrf_token() }}',
            id: id,
            quantity: quantity
        }, function() {
            location.reload();
        });
    });

    $('.remove-cart').click(function() {
        let id = $(this).data('id');
        $.post('{{ route("cart.remove") }}', {
            _token: '{{ csrf_token() }}',
            id: id
        }, function() {
            location.reload();
        });
    });

    $('#apply-coupon').click(function() {
        let code = $('#coupon_code').val();
        $.post('{{ route("coupon.apply") }}', {
            _token: '{{ csrf_token() }}',
            code: code
        }, function(data) {
            location.reload();
        }).fail(function() {
            alert('Invalid coupon');
        });
    });
</script>
@endpush