@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto">
    <!-- Progress Bar -->
    <x-wizard-progress :currentStep="3" />

    <!-- Card Principal -->
    <div class="bg-white rounded-2xl shadow-xl p-8">
        <h2 class="text-3xl font-bold text-gray-900 mb-2">
            Período de Exibição
        </h2>
        <p class="text-gray-600 mb-8">
            Selecione as datas e a periodicidade da sua campanha
        </p>

        <form method="POST" action="{{ route('pedido.datas') }}" class="space-y-6">
            @csrf

            <!-- Data de Início -->
            <div>
                <label for="data_inicio" class="block text-sm font-medium text-gray-700 mb-2">
                    Data de Início
                </label>
                <input
                    type="date"
                    name="data_inicio"
                    id="data_inicio"
                    value="{{ old('data_inicio', session('wizard.data_inicio')) }}"
                    min="{{ date('Y-m-d') }}"
                    class="appearance-none relative block w-full px-4 py-3 border @error('data_inicio') border-red-500 @else border-gray-300 @enderror text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition duration-200"
                    required
                    onchange="calcularValor()"
                >
                @error('data_inicio')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Data de Fim -->
            <div>
                <label for="data_fim" class="block text-sm font-medium text-gray-700 mb-2">
                    Data de Fim
                </label>
                <input
                    type="date"
                    name="data_fim"
                    id="data_fim"
                    value="{{ old('data_fim', session('wizard.data_fim')) }}"
                    min="{{ date('Y-m-d', strtotime('+1 day')) }}"
                    class="appearance-none relative block w-full px-4 py-3 border @error('data_fim') border-red-500 @else border-gray-300 @enderror text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition duration-200"
                    required
                    onchange="calcularValor()"
                >
                @error('data_fim')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Periodicidade -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-4">
                    Periodicidade
                </label>
                <div class="grid md:grid-cols-2 gap-4">
                    <!-- Semanal -->
                    <label class="relative flex cursor-pointer">
                        <input
                            type="radio"
                            name="periodicidade"
                            value="semanal"
                            class="sr-only peer"
                            {{ old('periodicidade', session('wizard.periodicidade')) === 'semanal' ? 'checked' : '' }}
                            onchange="calcularValor()"
                            required
                        >
                        <div class="w-full border-2 border-gray-300 rounded-xl p-6 peer-checked:border-purple-500 peer-checked:ring-4 peer-checked:ring-purple-200 hover:border-purple-300 transition duration-200">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-lg font-bold text-gray-900">Semanal</h3>
                                <div class="text-2xl font-extrabold text-purple-600">R$ {{ number_format($precoSemanal, 2, ',', '.') }}</div>
                            </div>
                            <p class="text-sm text-gray-600">7 dias de exibição</p>
                        </div>
                    </label>

                    <!-- Mensal -->
                    <label class="relative flex cursor-pointer">
                        <input
                            type="radio"
                            name="periodicidade"
                            value="mensal"
                            class="sr-only peer"
                            {{ old('periodicidade', session('wizard.periodicidade')) === 'mensal' ? 'checked' : '' }}
                            onchange="calcularValor()"
                            required
                        >
                        <div class="w-full border-2 border-gray-300 rounded-xl p-6 peer-checked:border-purple-500 peer-checked:ring-4 peer-checked:ring-purple-200 hover:border-purple-300 transition duration-200">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-lg font-bold text-gray-900">Mensal</h3>
                                <div class="text-2xl font-extrabold text-purple-600">R$ {{ number_format($precoMensal, 2, ',', '.') }}</div>
                            </div>
                            <p class="text-sm text-gray-600">30 dias de exibição</p>
                            <span class="inline-block mt-2 bg-green-100 text-green-800 text-xs font-semibold px-2 py-1 rounded">
                                Mais Popular
                            </span>
                        </div>
                    </label>
                </div>
                @error('periodicidade')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Resumo do Valor -->
            <div class="bg-gradient-to-r from-purple-50 to-green-50 border-2 border-purple-200 rounded-xl p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">Resumo do Pedido</h3>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between text-gray-700">
                        <span>Período selecionado:</span>
                        <span id="diasTotal" class="font-semibold">-</span>
                    </div>
                    <div class="flex justify-between text-gray-700">
                        <span>Tipo:</span>
                        <span id="tipoSelecionado" class="font-semibold">-</span>
                    </div>
                    <div class="border-t-2 border-purple-200 pt-3 mt-3">
                        <div class="flex justify-between items-center">
                            <span class="text-xl font-bold text-gray-900">Valor Total:</span>
                            <span id="valorTotal" class="text-3xl font-extrabold text-purple-600">R$ 0,00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Informações -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">
                            Informações Importantes
                        </h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <ul class="list-disc list-inside space-y-1">
                                <li>A campanha será exibida em toda a rede Freefi</li>
                                <li>O período começa à meia-noite da data de início</li>
                                <li>A data de fim é inclusiva (até 23:59 daquele dia)</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Botões -->
            <div class="flex items-center justify-between pt-4">
                <a href="{{ route('pedido.criativo') }}" class="text-gray-600 hover:text-gray-900 font-medium transition duration-300">
                    ← Voltar
                </a>
                <button
                    type="submit"
                    class="px-8 py-3 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-lg transition duration-300 transform hover:scale-105 shadow-lg"
                >
                    Continuar →
                </button>
            </div>
        </form>
    </div>
</div>

<script>
const precoSemanal = {{ $precoSemanal }};
const precoMensal = {{ $precoMensal }};

function calcularValor() {
    const dataInicio = document.getElementById('data_inicio').value;
    const dataFim = document.getElementById('data_fim').value;
    const periodicidade = document.querySelector('input[name="periodicidade"]:checked')?.value;

    // Calcular dias
    let dias = 0;
    if (dataInicio && dataFim) {
        const inicio = new Date(dataInicio);
        const fim = new Date(dataFim);
        dias = Math.ceil((fim - inicio) / (1000 * 60 * 60 * 24)) + 1; // +1 para incluir o último dia
    }

    // Atualizar resumo
    document.getElementById('diasTotal').textContent = dias > 0 ? `${dias} dias` : '-';

    if (periodicidade) {
        const tipo = periodicidade === 'semanal' ? 'Semanal' : 'Mensal';
        const valor = periodicidade === 'semanal' ? precoSemanal : precoMensal;

        document.getElementById('tipoSelecionado').textContent = tipo;
        document.getElementById('valorTotal').textContent = `R$ ${valor.toFixed(2).replace('.', ',')}`;
    } else {
        document.getElementById('tipoSelecionado').textContent = '-';
        document.getElementById('valorTotal').textContent = 'R$ 0,00';
    }
}

// Calcular valor inicial se houver dados
document.addEventListener('DOMContentLoaded', function() {
    calcularValor();
});
</script>
@endsection