@extends('shop.main')

@section('header')
    @include('shop.components.header')
@endsection

@section('main')
    <section class="main-cart">
        <h1 class="title-area">Carrinho de compras </h1>
        <a href="{{ route('home') }}" class="btn-back-to-shop">Continuar comprando</a>


        @if (Cart::content()->count() > 0)
            <div class="cart-area">
                @foreach ($cartItems as $cartItem)
                    @include('shop.components.loops.product-cart-item')
                @endforeach
            </div>

            <div class="bottom-area">
                <div class="shipping-area">
                    <div class="shipping-form">
                        <label for="cep">Custos de envio:</label>
                        <input type="text" placeholder="Insira seu cep para calcular o valor do frete." name="zipcode">
                        <button id="btn-calculate" onclick="cart.shippingCalculate()">Calcular</button>
                    </div>

                    <div class="shipping-methods hidden">



                    </div>
                </div>
                <div class="box-right">
                    <div class="totals-area">
                        <div>
                            <span class="value-title">Subtotal: </span><span class="value" id="cart-subtotal"> R${{ Cart::subtotal(2, ',', '.') }}</span>
                        </div>
                        <div>
                            <span class="value-title">Frete: </span><span class="value" id="shippingValue"> </span>
                        </div>
                        <div class="total-area">
                            <span class="value-title">Total:</span> <span class="total">R${{ Cart::subtotal(2, ',', '.') }}</span>
                        </div>
                        </span>
                    </div>
                    <div class="finish-order-area">
                        {{-- <a href="{{ route('cart.finish-order') }}">Finalizar</a> --}}
                        <a href="{{ route('cart.finish-order') }}" style="text-align: center" class="finish-order-button disabled" disabled>Finalizar Pedido</a>
                        <a href="{{ route('home') }}" style="font-family: Montserrat; font-size: 11px; color: #aaa; margin-top: 5px;">Ou Continuar comprando</a>
                        <span class="text-success">ENVIANDO NORMALMENTE, ENTREGA RÁPIDA!</span>
                    </div>
                </div>
            </div>
        @else
            <div class="alert alert-danger">Seu carrinho está vazio. <a href="{{ route('home') }}">Iniciar as compras!</a></div>
        @endif

        <div class="models shipping-methods-models">
            <div class="shipping-errors">
                O CEP de destino está temporariamente sem entrega domiciliar. A entrega será efetuada na agência indicada no Aviso de Chegada que será entregue no endereço do destinatário.
            </div>
            <label for="">
                <div class="shipping-method-item">
                    <input type="radio" id="" name="shipping-price" onchange="cart.selectShippingMethod(this)">
                    <span id="title-price">PAC - R$ 9,50</span>
                    <p id="mid">Média de 3 dias úteis após a postagem</p>
                    <p id="max">Maximo de 3 dias úteis após a postagem</p>
                </div>
            </label>
        </div>

    </section>
    @csrf
@endsection

@section('footer')
    @include('shop.components.footer')
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('shop/css/shop-main.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/cart.css') }}">
@endpush
@push('js')
    <script src="{{ asset('shop/js/storage.js') }}"></script>
    <script src="{{ asset('shop/js/cart.js') }}"></script>
    <script>
        storage.init()
    </script>
@endpush