@extends('loja.default', ['title' => 'Carrinho'])

@section('content')
<div class="container mx-auto px-4">
    
    <!-- Breadcrumb -->
    <div class="flex items-center gap-2 text-sm mb-8">
        <a href="{{ route('loja.index', ['link='.$config->loja_id]) }}" class="text-gray-600 hover:text-indigo-600 transition">
            <i class="fas fa-home"></i> Início
        </a>
        <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
        <span class="text-gray-900 font-semibold">Carrinho</span>
    </div>
    
    <!-- Cart Header -->
    <div class="mb-8">
        <h1 class="text-4xl font-black text-gray-900 mb-2">Meu Carrinho</h1>
        <p class="text-gray-600">Total de itens: <span class="font-bold text-indigo-600">{{ sizeof($item->itens) }}</span></p>
    </div>
    
    <input type="hidden" id="carrinho_id" value="{{ $item->id }}">
    
    @if(sizeof($item->itens) > 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($item->itens as $i)
            <div class="bg-white rounded-2xl shadow-lg border-2 border-gray-100 p-6">
                <div class="flex gap-6">
                    <!-- Product Image -->
                    <div class="flex-shrink-0">
                        <img src="{{ $i->produto->img }}" alt="{{ $i->produto->nome }}" class="w-32 h-32 object-cover rounded-xl">
                    </div>
                    
                    <!-- Product Info -->
                    <div class="flex-1 min-w-0">
                        <h3 class="text-xl font-bold text-gray-900 mb-2">{{ $i->produto->nome }}</h3>
                        @if($i->variacao)
                        <p class="text-sm text-gray-600 mb-2">{{ $i->variacao->descricao }}</p>
                        @endif
                        <p class="text-sm text-gray-600 mb-4">Valor unitário: <span class="font-semibold">R$ {{ __moeda($i->valor_unitario) }}</span></p>
                        
                        <!-- Quantity Control -->
                        <form action="{{ route('loja.atualiza-quantidade', [$i->id, 'link='.$config->loja_id]) }}" method="post" id="form-update-{{$i->id}}">
                            @csrf
                            @method('put')
                            <input type="hidden" name="link" value="{{ $config->loja_id }}">
                            <input type="hidden" name="produto_variacao_id" value="{{ $i->variacao_id }}">
                            
                            <div class="flex items-center gap-4">
                                <span class="text-sm font-semibold text-gray-700">Quantidade:</span>
                                <div class="flex items-center border-2 border-gray-200 rounded-xl overflow-hidden">
                                    <button type="button" class="qty-down w-10 h-10 bg-gray-50 hover:bg-indigo-600 hover:text-white transition flex items-center justify-center font-bold">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                    <input class="qtd w-16 h-10 text-center border-none font-semibold" name="quantidade" type="number" value="{{ number_format($i->quantidade, 0) }}" min="1">
                                    <button type="button" class="qty-up w-10 h-10 bg-gray-50 hover:bg-indigo-600 hover:text-white transition flex items-center justify-center font-bold">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                        
                        <!-- Subtotal -->
                        <div class="mt-4">
                            <span class="text-2xl font-black text-indigo-600">R$ {{ __moeda($i->sub_total) }}</span>
                        </div>
                    </div>
                    
                    <!-- Remove Button -->
                    <div class="flex-shrink-0">
                        <form action="{{ route('loja.remove-item', [$i->id, 'link='.$config->loja_id]) }}" method="post" id="form-{{$i->id}}">
                            @csrf
                            @method('delete')
                            <button type="button" class="btn-delete w-12 h-12 bg-red-50 hover:bg-red-500 text-red-500 hover:text-white rounded-xl transition flex items-center justify-center" title="Remover Item">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- Order Summary -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-2xl shadow-lg border-2 border-gray-100 p-6 sticky top-24">
                <h2 class="text-2xl font-black text-gray-900 mb-6">Resumo do Pedido</h2>
                
                <!-- Subtotal -->
                <div class="flex justify-between items-center mb-4 pb-4 border-b border-gray-200">
                    <span class="text-gray-700 font-semibold">Subtotal:</span>
                    <span class="text-2xl font-black text-indigo-600">R$ {{ __moeda($item->valor_total) }}</span>
                </div>
                
                <!-- Shipping Calculator -->
                <form method="post" action="{{ route('loja.carrinho-setar-frete', ['link='.$config->loja_id]) }}">
                    @csrf
                    
                    <div class="mb-6">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Calcular Frete</label>
                        <div class="flex gap-2">
                            <input data-mask="00000-000" class="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none" name="cep" id="cep" type="tel" placeholder="00000-000">
                            <button type="button" class="btn-frete px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl transition">
                                <i class="fas fa-truck"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Shipping Options -->
                    <div class="data-frete space-y-3 mb-6">
                        @if($dataFrete != null)
                        <h5 class="font-semibold text-gray-900 mb-3">Seus endereços cadastrados</h5>
                        {!! $dataFrete !!}
                        @else
                        
                        @if($config->habilitar_retirada)
                        <label class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl cursor-pointer hover:bg-indigo-50 transition">
                            <input class="radio-frete w-5 h-5 text-indigo-600" type="radio" name="tipo_frete" value="0" data-valor="0">
                            <div class="flex-1">
                                <span class="font-semibold text-gray-900">Retirar na loja</span>
                                <p class="text-sm text-gray-600">Grátis</p>
                            </div>
                        </label>
                        @endif
                        
                        @if($config->frete_gratis_valor > 0 && $config->frete_gratis_valor <= $item->valor_total)
                        <label class="flex items-center gap-3 p-4 bg-green-50 rounded-xl cursor-pointer hover:bg-green-100 transition">
                            <input class="radio-frete w-5 h-5 text-green-600" type="radio" name="tipo_frete" value="gratis" data-valor="0">
                            <div class="flex-1">
                                <span class="font-semibold text-green-900">Frete Grátis</span>
                                <p class="text-sm text-green-700">Parabéns! Você ganhou frete grátis</p>
                            </div>
                        </label>
                        @endif
                        
                        @endif
                    </div>
                    
                    <input type="hidden" name="valor_frete" id="valor_frete">
                    <input type="hidden" name="endereco_id" id="endereco_id">
                    
                    <!-- Action Buttons -->
                    <div class="space-y-3">
                        <button type="submit" class="btn-ir-pagamento w-full px-6 py-4 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold rounded-xl transition shadow-lg disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fas fa-credit-card mr-2"></i>
                            IR PARA PAGAMENTO
                        </button>
                        
                        <a href="{{ route('loja.index', ['link='.$config->loja_id]) }}" class="block w-full px-6 py-4 bg-gray-100 hover:bg-gray-200 text-gray-900 font-bold rounded-xl text-center transition">
                            <i class="fas fa-shopping-cart mr-2"></i>
                            CONTINUAR COMPRANDO
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    @else
    <!-- Empty Cart -->
    <div class="text-center py-20">
        <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-6">
            <i class="fas fa-shopping-cart text-4xl text-gray-400"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-2">Seu carrinho está vazio</h3>
        <p class="text-gray-600 mb-6">Adicione produtos ao carrinho para continuar comprando.</p>
        <a href="{{ route('loja.index', ['link='.$config->loja_id]) }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold rounded-xl hover:from-indigo-700 hover:to-purple-700 transition">
            <i class="fas fa-shopping-bag"></i>
            <span>Ver Produtos</span>
        </a>
    </div>
    @endif
    
</div>
@endsection

@section('js')
<script type="text/javascript">
$(function(){
    $('#valor_frete').val('')
})

$(".btn-delete").on("click", function (e) {
    e.preventDefault();
    var form = $(this).parents("form").attr("id");
    Swal.fire({
        title: "Você está certo?",
        text: "Deseja realmente remover este item do seu carrinho?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#d33",
        cancelButtonColor: "#3085d6",
        confirmButtonText: "Sim, remover!",
        cancelButtonText: "Cancelar"
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById(form).submit();
        }
    });
});

$('.qtd').on("blur", function (e) {
    e.preventDefault();
    var form = $(this).parents("form").attr("id");
    document.getElementById(form).submit();
});

$('.qty-up').on("click", function (e) {
    var form = $(this).parents("form").attr("id");
    document.getElementById(form).submit();
})

$('.qty-down').on("click", function (e) {
    var form = $(this).parents("form").attr("id");
    document.getElementById(form).submit();
})

$('.btn-frete').on("click", function (e) {
    let carrinho_id = $('#carrinho_id').val()
    let cep = $('#cep').val()
    if(cep.length != 9){
        Swal.fire({
            icon: 'error',
            title: 'CEP inválido',
            text: 'Por favor, insira um CEP válido'
        });
    }else{
        showLoading();
        $.get(path_url + 'api/ecommerce/calcular-frete', {
            carrinho_id: carrinho_id,
            cep: cep
        })
        .done((res) => {
            $('.data-frete').html(res)
            hideLoading();
        })
        .fail((err) => {
            console.log(err)
            $('.data-frete').html('')
            hideLoading();
            Swal.fire({
                icon: 'error',
                title: 'Erro',
                text: 'Algo deu errado ao calcular o frete'
            });
        })
    }
})

$(document).on("click", ".radio-frete", function () {
    $('#endereco_id').val('')
    let valorFrete = $(this).data('valor')
    let enderecoId = $(this).data('endereco-id')
    $('#valor_frete').val(valorFrete)
    $('#endereco_id').val(enderecoId)
    
    $('.btn-ir-pagamento').removeAttr('disabled')
})
</script>
@endsection