@extends('layouts.app')

@section('title', __('loja.title'))

@section('styles')
<style>
    /* Gradiente personalizado para cobrir o texto embutido na imagem original de fundo */
    .hero-overlay {
        background: linear-gradient(to bottom, #020617 0%, #020617 75%, rgba(2, 6, 23, 0.3) 100%);
    }
    @media (min-width: 1024px) {
        .hero-overlay {
            background: linear-gradient(to right, #020617 0%, #020617 48%, #020617 58%, rgba(2, 6, 23, 0) 95%);
        }
    }

    [x-cloak] { display: none !important; }

    .ease-dji {
        transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
    .hero-image-float {
        animation: float 4s ease-in-out infinite;
    }
    .hero-image-float:hover {
        animation-play-state: paused;
    }
</style>
@endsection

@section('content')

{{-- HERO DINÂMICA (DJI-Style) — DESTAQUES DA LOJA --}}
@include('loja.partials.dji-hero')

<div id="catalogo" class="bg-white text-slate-800 pb-24 px-6 md:px-12 relative z-10">
    <div class="max-w-[1440px] mx-auto pt-12">

        {{-- Barra de Pesquisa e Filtros Unificada (Minimalista) --}}
        <div class="bg-white rounded-2xl md:rounded-3xl p-5 md:p-6 border border-slate-200/90 shadow-[0_4px_25px_rgba(0,0,0,0.03)] mb-12 fade-in-up">
            <form action="{{ route('loja.index') }}" method="GET" class="space-y-4">
                @if(request('categoria'))
                    <input type="hidden" name="categoria" value="{{ request('categoria') }}">
                @endif
                
                {{-- Linha 1: Pesquisa ocupa a linha inteira --}}
                <div class="relative">
                    <input type="text" name="pesquisa" value="{{ request('pesquisa') }}" placeholder="{{ __('loja.search_placeholder') }}" 
                           class="w-full bg-slate-50 border border-slate-200/80 rounded-2xl pl-12 pr-4 py-3.5 text-xs text-slate-800 placeholder:text-slate-400 focus:bg-white focus:border-[#06458F] focus:ring-2 focus:ring-[#06458F]/10 outline-none transition-smooth font-medium">
                    <svg class="w-4 h-4 text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                    </svg>
                </div>

                {{-- Linha 2: Categorias à esquerda + Ordenação à direita --}}
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 items-center">
                    {{-- Filtros por Categoria --}}
                    <div class="lg:col-span-9 flex items-center gap-2 overflow-x-auto scrollbar-hide py-1">
                        @php
                            $categoriaAtual = request('categoria', 'all');
                            $cats = [
                                'all'          => __('loja.cat_all'),
                                'gps'          => __('loja.cat_gps'),
                                'estacao_total'=> __('loja.cat_stations'),
                                'drones'       => __('loja.cat_drones'),
                                'epis'         => __('loja.cat_epis'),
                            ];
                        @endphp
                        @foreach($cats as $key => $label)
                            <a href="{{ route('loja.index', ['categoria' => $key == 'all' ? null : $key, 'pesquisa' => request('pesquisa'), 'ordenacao' => request('ordenacao')]) }}"
                               class="whitespace-nowrap px-4 py-2.5 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all
                                {{ ($categoriaAtual == $key)
                                   ? 'bg-[#06458F] text-white shadow-sm'
                                   : 'bg-slate-100 hover:bg-slate-200/80 text-slate-600 hover:text-slate-900 border border-slate-200/50' }}">
                                {{ $label }}
                            </a>
                        @endforeach
                    </div>

                    {{-- Ordenação --}}
                    <div class="lg:col-span-3">
                        <select name="ordenacao" onchange="this.form.submit()" 
                                class="w-full bg-slate-50 border border-slate-200/80 rounded-xl px-4 py-2.5 text-[10px] text-slate-700 font-bold uppercase tracking-wider focus:bg-white focus:border-[#06458F] outline-none transition-smooth cursor-pointer">
                            <option value="recentes" {{ request('ordenacao') == 'recentes' ? 'selected' : '' }}>{{ __('loja.sort_recent') }}</option>
                            <option value="preco_min" {{ request('ordenacao') == 'preco_min' ? 'selected' : '' }}>{{ __('loja.sort_price_asc') }}</option>
                            <option value="preco_max" {{ request('ordenacao') == 'preco_max' ? 'selected' : '' }}>{{ __('loja.sort_price_desc') }}</option>
                            <option value="disponibilidade" {{ request('ordenacao') == 'disponibilidade' ? 'selected' : '' }}>{{ __('loja.sort_avail') }}</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>

        {{-- Grelha de Equipamentos --}}
        @if($produtos->isEmpty())
            <div class="py-16 px-6 text-center border border-slate-100 rounded-[2.5rem] bg-slate-50/30 fade-in">
                {{-- Skeleton Grid animado para dar a sensação de sistema ativo em segundo plano --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 max-w-6xl mx-auto mb-10 opacity-50 animate-pulse">
                    @for($i = 0; $i < 4; $i++)
                        <div class="bg-white rounded-2xl border border-slate-200/80 p-4 flex flex-col">
                            <div class="w-full h-48 bg-slate-100 rounded-xl mb-4"></div>
                            <div class="h-4 bg-slate-200 rounded w-3/4 mb-3"></div>
                            <div class="h-3 bg-slate-150 rounded w-1/2 mb-4"></div>
                            <div class="h-9 bg-slate-200 rounded-lg mt-auto"></div>
                        </div>
                    @endfor
                </div>
                <div class="max-w-md mx-auto">
                    <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#F4F6F8] text-[#06458F] text-[9px] font-bold uppercase tracking-widest mb-4">
                        <span class="w-1.5 h-1.5 rounded-full bg-[#06458F] animate-ping"></span>
                        {{ __('loja.catalog_status') }}
                    </span>
                    <h4 class="text-[#06458F] font-bold uppercase tracking-wider text-sm mb-2">{{ __('loja.no_items_title') }}</h4>
                    <p class="text-[#636D7D] text-xs font-light mb-6">
                        {{ __('loja.no_items_desc') }}
                    </p>
                    <a href="{{ route('loja.index') }}" class="inline-block px-6 py-3.5 bg-[#06458F] text-white text-[10px] font-bold uppercase tracking-widest rounded-xl hover:bg-[#0A529F] transition-smooth">
                        {{ __('loja.clear_filters') }}
                    </a>
                </div>
            </div>
        @else
            {{-- Grelha de Produtos Otimizada (4 colunas em monitores grandes, 3 em médios, 2 em tablets) --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($produtos as $produto)
                    @php
                        $rawPhone = isset($empresaConfig) && !empty($empresaConfig->telefone) ? $empresaConfig->telefone : '948944582';
                        $cleanPhone = preg_replace('/[^0-9]/', '', $rawPhone);
                        if (strlen($cleanPhone) === 9 && str_starts_with($cleanPhone, '9')) {
                            $cleanPhone = '244' .$cleanPhone;
                        }
                        if (empty($cleanPhone)) {
                            $cleanPhone = '244948944582';
                        }$whatsappMsg = 'Olá AMD-Topografia! Gostaria de pedir uma cotação/informações sobre o equipamento: ' . $produto->nome . ' (Ref: #' . $produto->id . ')';
                    @endphp

                    <div class="group bg-white rounded-2xl border border-slate-200/90 p-4 flex flex-col hover:border-[#06458F]/40 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 relative reveal">
                        
                        {{-- Imagem do Produto com Enquadramento Proporcional e Fundo Neutro --}}
                        <div class="relative w-full h-48 bg-[#F8FAFC] rounded-xl overflow-hidden mb-4 flex items-center justify-center p-3 border border-slate-100">
                            <a href="{{ route('loja.show', $produto->id) }}" class="w-full h-full flex items-center justify-center">
                                @if($produto->imagem)
                                    <img src="{{ asset('storage/' . $produto->imagem) }}" alt="{{ $produto->nome }}" class="max-h-full max-w-full object-contain group-hover:scale-105 transition-transform duration-300">
                                @else
                                    <svg class="w-12 h-12 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path 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"/>
                                    </svg>
                                @endif
                            </a>
                            
                            {{-- Status no Canto Superior Esquerdo --}}
                            <div class="absolute top-2.5 left-2.5 flex flex-wrap gap-1 pointer-events-none">
                                @if($produto->status_disponibilidade)
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white/95 backdrop-blur-xs border border-slate-200/80 text-[8px] font-bold uppercase tracking-wider rounded-md shadow-2xs text-slate-700">
                                        <span class="w-1.5 h-1.5 rounded-full {{ $produto->status_disponibilidade === 'Disponível' ? 'bg-emerald-500' : ($produto->status_disponibilidade === 'Alugado' ? 'bg-blue-500' : 'bg-amber-500') }}"></span>
                                        @if($produto->status_disponibilidade === 'Disponível')
                                            {{ __('loja.available') }}
                                        @elseif($produto->status_disponibilidade === 'Alugado')
                                            {{ __('loja.rented') }}
                                        @elseif($produto->status_disponibilidade === 'Em Manutenção')
                                            {{ __('loja.maintenance') }}
                                        @else
                                            {{ $produto->status_disponibilidade }}
                                        @endif
                                    </span>
                                @endif
                            </div>

                            {{-- Botão WhatsApp no Canto Superior Direito --}}
                            <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($whatsappMsg) }}" 
                               target="_blank" 
                               rel="noopener noreferrer"
                               class="absolute top-2.5 right-2.5 w-7 h-7 rounded-full bg-white/95 backdrop-blur-xs hover:bg-[#25D366] text-slate-400 hover:text-white border border-slate-200/80 flex items-center justify-center transition-all duration-200 shadow-2xs hover:scale-105"
                               title="Pedir Cotação no WhatsApp">
                                <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
                                    <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.694.074-2.127-.521-1.625-.676-2.678-2.327-2.759-2.435-.08-.109-.659-.877-.659-1.671 0-.795.418-1.186.566-1.345.148-.16.323-.2.43-.2.107 0 .216.002.311.006.1.006.234-.038.366.279.136.327.464 1.134.505 1.217.042.083.07.18.014.29-.056.11-.084.18-.167.279-.083.1-.175.223-.25.299-.083.084-.17.176-.073.344.097.168.431.714.927 1.155.637.568 1.175.744 1.343.827.169.083.268.07.368-.046.101-.116.43-.502.545-.674.116-.172.23-.143.388-.083.158.06 1.005.474 1.177.56.173.086.288.128.33.2.042.072.042.417-.102.822z"/>
                                </svg>
                            </a>
                        </div>

                        {{-- Detalhes do Produto --}}
                        <div class="flex-1 flex flex-col">
                            {{-- Marca e Modelo --}}
                            <div class="flex items-center gap-1.5 mb-1">
                                @if($produto->marca)
                                    <span class="text-[9px] font-bold uppercase text-slate-400 tracking-wider">{{ $produto->marca }}</span>
                                @endif
                                @if($produto->modelo)
                                    <span class="text-[9px] font-medium text-slate-400">• {{ $produto->modelo }}</span>
                                @endif
                            </div>

                            {{-- Nome do Equipamento com altura mínima para uniformizar grelha --}}
                            <a href="{{ route('loja.show', $produto->id) }}" class="block mb-1.5">
                                <h3 class="text-xs sm:text-sm font-bold text-slate-900 group-hover:text-[#06458F] transition-colors leading-snug line-clamp-2 uppercase min-h-[2.4rem]">
                                    {{ $produto->nome }}
                                </h3>
                            </a>
                            
                            {{-- Descrição Resumida --}}
                            <p class="text-slate-500 text-[11px] line-clamp-2 font-normal leading-relaxed mb-3">
                                {{ $produto->descricao }}
                            </p>

                            {{-- Bloco de Preços --}}
                            <div class="border-t border-slate-100 pt-2.5 mt-auto mb-3">
                                @if($produto->preco && in_array($produto->tipo, ['venda', 'ambos']))
                                    <div class="flex items-baseline flex-wrap gap-x-1.5">
                                        <span class="text-base sm:text-lg font-black text-[#06458F] tracking-tight">
                                            {{ number_format($produto->preco, 2, ',', '.') }} <small class="text-[10px] font-bold text-slate-500">Kz</small>
                                        </span>
                                        @if($produto->preco_aluguer && in_array($produto->tipo, ['aluguer', 'ambos']))
                                            <span class="text-[9px] text-slate-400 font-medium">
                                                ou {{ number_format($produto->preco_aluguer, 2, ',', '.') }} Kz/dia
                                            </span>
                                        @endif
                                    </div>
                                @elseif($produto->preco_aluguer && in_array($produto->tipo, ['aluguer', 'ambos']))
                                    <div class="flex items-baseline gap-1">
                                        <span class="text-base sm:text-lg font-black text-[#06458F] tracking-tight">
                                            {{ number_format($produto->preco_aluguer, 2, ',', '.') }} <small class="text-[10px] font-bold text-slate-500">Kz</small>
                                        </span>
                                        <span class="text-[9px] text-slate-400 font-medium uppercase tracking-wider">/ dia</span>
                                    </div>
                                @endif
                            </div>
                        </div>

                        {{-- Barra de Ações --}}
                        <div class="flex items-center gap-1.5 pt-1">
                            @if($produto->preco && in_array($produto->tipo, ['venda', 'ambos']))
                                <button data-produto-id="{{ $produto->id }}" data-tipo="venda"
                                    class="btn-add-to-cart flex-1 py-2 px-3 bg-[#06458F] hover:bg-[#0A529F] text-white rounded-lg text-[9px] font-bold uppercase tracking-wider transition-all shadow-2xs hover:shadow active:scale-95 flex items-center justify-center gap-1.5 cursor-pointer">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
                                    </svg>
                                    <span>{{ __('loja.buy') }}</span>
                                </button>
                            @endif

                            @if($produto->preco_aluguer && in_array($produto->tipo, ['aluguer', 'ambos']))
                                <button type="button" 
                                    data-id="{{ $produto->id }}"
                                    data-nome="{{ $produto->nome }}"
                                    data-preco-aluguer="{{ $produto->preco_aluguer }}"
                                    class="btn-open-aluguer-modal {{ in_array($produto->tipo, ['ambos']) ? 'px-2.5' : 'flex-1' }} py-2 bg-slate-50 hover:bg-slate-100 border border-slate-200 text-[#06458F] rounded-lg text-[9px] font-bold uppercase tracking-wider transition-all active:scale-95 flex items-center justify-center gap-1 cursor-pointer">
                                    <span>{{ __('loja.rent') }}</span>
                                </button>
                            @endif

                            <a href="{{ route('loja.show', $produto->id) }}"
                               class="p-2 bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-[#06458F] border border-slate-200 rounded-lg transition-all flex items-center justify-center shrink-0 cursor-pointer"
                               title="{{ __('loja.specs') }}">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
            
            {{-- Paginação --}}
            <div class="mt-12 reveal">
                {{ $produtos->links() }}
            </div>
        @endif

        {{-- Seção de Suporte Rápido e Engenheiros --}}
        <div class="mt-24 bg-slate-50 border border-slate-100 p-8 md:p-12 rounded-[2.5rem] text-center max-w-4xl mx-auto reveal shadow-[0_15px_45px_rgba(6,69,143,0.015)]">
            <span class="w-1.5 h-1.5 rounded-full bg-[#06458F] animate-ping mb-4 inline-block"></span>
            <h3 class="text-xl sm:text-2xl font-bold text-[#06458F] uppercase mb-4">{{ __('loja.setup_question') }}</h3>
            <p class="text-slate-500 text-sm max-w-xl mx-auto mb-8 font-light leading-relaxed">
                {{ __('loja.setup_desc') }}
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="https://wa.me/{{ preg_replace('/\D/', '', $empresaConfig->telefone ?? '+244 948 944 582') }}" target="_blank" class="px-8 py-4 bg-[#06458F] hover:bg-[#0A529F] text-white font-bold uppercase tracking-wider text-[10px] rounded-xl transition-smooth shadow-sm flex items-center gap-2">
                    <svg class="w-4 h-4 text-white fill-current" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.455L0 24zm6.49-5.188c1.676.994 3.32 1.554 5.449 1.555 5.568 0 10.1-4.52 10.104-10.086.002-2.697-1.04-5.232-2.93-7.127-1.89-1.894-4.4-2.938-7.108-2.939-5.57 0-10.103 4.519-10.107 10.087-.001 2.228.587 4.4 1.702 6.136l-.99 3.615 3.78-.986zM17.587 14.19c-.312-.156-1.848-.912-2.129-1.014-.28-.103-.484-.156-.687.156-.203.311-.784 1.014-.962 1.218-.178.203-.356.23-.668.074-1.258-.629-2.083-1.12-2.906-2.529-.215-.369.215-.343.615-1.14.077-.152.038-.285-.019-.39-.058-.105-.484-1.166-.663-1.597-.174-.421-.37-.363-.508-.37-.13-.004-.28-.004-.43-.004-.15 0-.395.056-.602.28-.207.225-.79.771-.79 1.881 0 1.11.807 2.183.918 2.333.111.15 1.587 2.424 3.844 3.4.536.232.955.371 1.282.476.54.172 1.03.148 1.417.09.431-.064 1.48-.605 1.685-1.19.206-.583.206-1.085.144-1.19-.06-.105-.22-.156-.53-.312z"/></svg>
                    {{ __('loja.whatsapp_btn') }}
                </a>
                <a href="{{ route('contactos.create') }}" class="px-8 py-4 bg-white border border-slate-200 hover:border-[#06458F] text-[#06458F] font-bold uppercase tracking-wider text-[10px] rounded-xl transition-smooth">
                    {{ __('loja.contact_form_btn') }}
                </a>
            </div>
        </div>

    </div>
</div>

{{-- Modal de Agendamento/Aluguer --}}
<div id="modalAluguer" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm hidden z-[110] flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl max-w-md w-full p-8 shadow-2xl border border-slate-200 relative fade-in">
        <button type="button" onclick="fecharModalAluguer()" class="absolute top-6 right-6 text-slate-400 hover:text-slate-600 transition cursor-pointer">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
        
        <div class="mb-6">
            <span class="px-2.5 py-1 rounded-full bg-[#F4F6F8] text-[#06458F] text-[8px] font-bold uppercase tracking-wider mb-2 inline-block">{{ __('loja.modal_rent_title') }}</span>
            <h2 id="aluguer-nome-produto" class="text-xl font-bold text-[#06458F] uppercase tracking-tight">{{ __('loja.modal_rent_title') }}</h2>
            <p class="text-slate-500 text-xs font-light">{{ __('loja.modal_rent_subtitle') }}</p>
        </div>

        <form id="formAluguer" class="space-y-4" onsubmit="event.preventDefault(); confirmarAluguer();">
            <input type="hidden" id="aluguer-produto-id">
            <div>
                <label class="block text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-2">{{ __('loja.billing_period') }}</label>
                <select id="aluguer-periodo" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-slate-800 outline-none focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] text-xs font-bold uppercase tracking-wider cursor-pointer" onchange="atualizarEstimativaAluguer()">
                    <option value="Diário">Diário</option>
                    <option value="Semanal">Semanal</option>
                    <option value="Mensal">Mensal</option>
                </select>
            </div>
            
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-2">{{ __('loja.start_date') }}</label>
                    <input type="date" id="aluguer-data-inicio" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none text-xs cursor-pointer" onchange="atualizarEstimativaAluguer()">
                </div>
                <div>
                    <label class="block text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-2">{{ __('loja.end_date') }}</label>
                    <input type="date" id="aluguer-data-fim" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none text-xs cursor-pointer" onchange="atualizarEstimativaAluguer()">
                </div>
            </div>

            <div class="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex justify-between items-center mt-6">
                <div>
                    <span class="block text-[8px] font-bold text-slate-400 uppercase tracking-widest">{{ __('loja.base_price') }}</span>
                    <span id="aluguer-preco-base" class="text-xs font-bold text-[#06458F]">0,00 Kz</span>
                </div>
                <div class="text-right">
                    <span class="block text-[8px] font-bold text-[#06458F] uppercase tracking-widest">{{ __('loja.total_estimate') }}</span>
                    <span id="aluguer-estimativa-total" class="text-sm font-bold text-[#06458F]">0,00 Kz</span>
                </div>
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 bg-[#06458F] hover:bg-[#0A529F] text-white font-bold py-4 rounded-xl uppercase text-[10px] tracking-widest transition-smooth shadow-md shadow-[#06458F]/10 cursor-pointer">
                    {{ __('loja.confirm_rent') }}
                </button>
                <button type="button" onclick="fecharModalAluguer()" class="flex-1 bg-slate-50 border border-slate-200 text-[#636D7D] hover:bg-slate-100 font-bold py-4 rounded-xl uppercase text-[10px] tracking-widest transition-smooth cursor-pointer">
                    {{ __('loja.cancel') }}
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Toast de Notificação unificado em Azul Marinho (#06458F) --}}
<div id="toast" class="fixed right-6 bottom-6 bg-[#06458F] text-white px-6 py-4 rounded-xl shadow-2xl opacity-0 pointer-events-none transition-all duration-300 z-50 text-[10px] font-bold tracking-widest uppercase flex items-center gap-3 border border-white/10">
    <span class="w-1.5 h-1.5 rounded-full bg-[#A9B8C9] animate-pulse"></span>
    <span id="toast-text">{{ __('loja.added_to_cart') }}</span>
</div>
@endsection

@section('scripts')
<script>
    const CSRF_TOKEN   = '{{ csrf_token() }}';
    const LOCALE        = '{{ app()->getLocale() }}';
    const BASE_CARRINHO = '{{ rtrim(url("/".app()->getLocale()."/carrinho"), "/") }}';
    const TOAST_ADDED  = @json(__('loja.added_to_cart'));
    const TOAST_ERROR  = @json(__('loja.toast_error'));
    const TOAST_NET    = @json(__('loja.toast_network_error'));

    function showToast(text = TOAST_ADDED) {
        const t = document.getElementById('toast');
        document.getElementById('toast-text').textContent = text;
        t.style.opacity = '1';
        t.classList.remove('pointer-events-none');
        setTimeout(() => { t.style.opacity = '0'; t.classList.add('pointer-events-none'); }, 2000);
    }

    document.querySelectorAll('.btn-add-to-cart').forEach(btn => {
        btn.addEventListener('click', async () => {
            const id = btn.dataset.produtoId;
            const tipo = btn.dataset.tipo || 'venda';
            const formData = new FormData();
            formData.append('_token', CSRF_TOKEN);
            formData.append('tipo', tipo);
            formData.append('quantidade', 1);
            try {
                const res = await fetch(`${BASE_CARRINHO}/adicionar/${id}`, { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } });
                const data = await res.json();
                if (data.success) {
                    if (typeof toggleCartDrawer === 'function') {
                        toggleCartDrawer(true);
                    } else {
                        showToast();
                    }
                } else { alert(TOAST_ERROR); }
            } catch (err) { console.error(err); alert(TOAST_NET); }
        });
    });

    // --- LOGICA DE ESTIMATIVA E MODAL DE ALUGUER ---
    let activeProductPreco = 0;

    function abrirModalAluguer(id, nome, precoAluguer) {
        document.getElementById('aluguer-produto-id').value = id;
        document.getElementById('aluguer-nome-produto').textContent = nome;
        activeProductPreco = parseFloat(precoAluguer);
        
        // Set dates (hoje e daqui a 3 dias)
        const hoje = new Date();
        const amanha = new Date();
        amanha.setDate(hoje.getDate() + 3);
        
        document.getElementById('aluguer-data-inicio').value = hoje.toISOString().split('T')[0];
        document.getElementById('aluguer-data-fim').value = amanha.toISOString().split('T')[0];
        
        document.getElementById('aluguer-preco-base').textContent = new Intl.NumberFormat('pt-AO', { style: 'currency', currency: 'AOA' }).format(activeProductPreco).replace('AOA', 'Kz');
        
        atualizarEstimativaAluguer();
        document.getElementById('modalAluguer').classList.remove('hidden');
    }

    function fecharModalAluguer() {
        document.getElementById('modalAluguer').classList.add('hidden');
    }

    function atualizarEstimativaAluguer() {
        const inicioStr = document.getElementById('aluguer-data-inicio').value;
        const fimStr = document.getElementById('aluguer-data-fim').value;
        const periodo = document.getElementById('aluguer-periodo').value;
        
        if (!inicioStr || !fimStr) return;
        
        const inicio = new Date(inicioStr);
        const fim = new Date(fimStr);
        const diffTime = Math.abs(fim - inicio);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) || 1;
        
        let total = activeProductPreco;
        
        if (periodo === 'Diário') {
            total = activeProductPreco * diffDays;
        } else if (periodo === 'Semanal') {
            const weeks = Math.ceil(diffDays / 7) || 1;
            total = activeProductPreco * 7 * weeks * 0.9; // 10% desconto semanal
        } else if (periodo === 'Mensal') {
            const months = Math.ceil(diffDays / 30) || 1;
            total = activeProductPreco * 30 * months * 0.8; // 20% desconto mensal
        }
        
        document.getElementById('aluguer-estimativa-total').textContent = new Intl.NumberFormat('pt-AO', { style: 'currency', currency: 'AOA' }).format(total).replace('AOA', 'Kz');
    }

    async function confirmarAluguer() {
        const id = document.getElementById('aluguer-produto-id').value;
        const periodo = document.getElementById('aluguer-periodo').value;
        const inicio = document.getElementById('aluguer-data-inicio').value;
        const fim = document.getElementById('aluguer-data-fim').value;
        
        const formattedInicio = inicio.split('-').reverse().join('/');
        const formattedFim = fim.split('-').reverse().join('/');
        const datas = `De ${formattedInicio} a ${formattedFim}`;
        
        const formData = new FormData();
        formData.append('_token', CSRF_TOKEN);
        formData.append('tipo', 'aluguer');
        formData.append('quantidade', 1);
        formData.append('aluguer_periodo', periodo);
        formData.append('aluguer_datas', datas);
        
        try {
            const res = await fetch(`${BASE_CARRINHO}/adicionar/${id}`, { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            if (data.success) {
                fecharModalAluguer();
                if (typeof toggleCartDrawer === 'function') {
                    toggleCartDrawer(true);
                } else {
                    showToast();
                }
            } else { alert(TOAST_ERROR); }
        } catch (err) {
            console.error(err);
            alert(TOAST_NET);
        }
    }

    // Event listener dinâmico para abrir o modal de aluguer usando data attributes
    document.querySelectorAll('.btn-open-aluguer-modal').forEach(button => {
        button.addEventListener('click', function() {
            const id = this.dataset.id;
            const nome = this.dataset.nome;
            const precoAluguer = this.dataset.precoAluguer;
            abrirModalAluguer(id, nome, precoAluguer);
        });
    });

    window.addEventListener('keydown', (e) => { if(e.key === 'Escape') fecharModalAluguer(); });
</script>
@endsection