@extends('layouts.app')

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

    <!-- Card Principal -->
    <div class="bg-white rounded-2xl shadow-xl p-8">
        <h2 class="text-3xl font-bold text-gray-900 mb-2">
            Enviar Criativo
        </h2>
        <p class="text-gray-600 mb-8">
            Faça upload da imagem que será exibida aos usuários
        </p>

        <form method="POST" action="{{ route('pedido.criativo') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- Nome do Criativo -->
            <div>
                <label for="nome_criativo" class="block text-sm font-medium text-gray-700 mb-2">
                    Nome do Criativo
                </label>
                <input
                    type="text"
                    name="nome_criativo"
                    id="nome_criativo"
                    value="{{ old('nome_criativo', session('wizard.nome_criativo')) }}"
                    class="appearance-none relative block w-full px-4 py-3 border @error('nome_criativo') border-red-500 @else border-gray-300 @enderror placeholder-gray-500 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition duration-200"
                    placeholder="Ex: Promoção de Verão 2025"
                    required
                >
                @error('nome_criativo')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Upload do Arquivo -->
            <div>
                <label for="arquivo_criativo" class="block text-sm font-medium text-gray-700 mb-2">
                    Arquivo da Imagem
                </label>
                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 @error('arquivo_criativo') border-red-500 @else border-gray-300 @enderror border-dashed rounded-lg hover:border-purple-400 transition duration-200">
                    <div class="space-y-1 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div class="flex text-sm text-gray-600">
                            <label for="arquivo_criativo" class="relative cursor-pointer bg-white rounded-md font-medium text-purple-600 hover:text-purple-500 focus-within:outline-none">
                                <span>Selecionar arquivo</span>
                                <input
                                    id="arquivo_criativo"
                                    name="arquivo_criativo"
                                    type="file"
                                    class="sr-only"
                                    accept="image/jpeg,image/png,image/jpg,image/gif"
                                    onchange="previewImage(this)"
                                    required
                                >
                            </label>
                            <p class="pl-1">ou arraste e solte</p>
                        </div>
                        <p class="text-xs text-gray-500">
                            PNG, JPG, GIF até 5MB
                        </p>
                    </div>
                </div>
                @error('arquivo_criativo')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror

                <!-- Preview da Imagem -->
                <div id="imagePreview" class="mt-4 hidden">
                    <p class="text-sm font-medium text-gray-700 mb-2">Preview:</p>
                    <div class="relative inline-block">
                        <img id="preview" class="max-w-full h-auto max-h-96 rounded-lg shadow-lg" alt="Preview">
                        <button
                            type="button"
                            onclick="removeImage()"
                            class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-2 hover:bg-red-600 transition duration-200"
                        >
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                    </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">
                            Requisitos da Imagem
                        </h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <ul class="list-disc list-inside space-y-1">
                                <li>Formato: JPG, PNG ou GIF</li>
                                <li>Tamanho máximo: 5MB</li>
                                <li>Resolução recomendada: 1920x1080px</li>
                                <li>O criativo será analisado pelo franqueado antes da publicação</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Botões -->
            <div class="flex items-center justify-between pt-4">
                <a href="{{ route('pedido.empresa') }}" 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>
function previewImage(input) {
    const preview = document.getElementById('preview');
    const previewContainer = document.getElementById('imagePreview');

    if (input.files && input.files[0]) {
        const reader = new FileReader();

        reader.onload = function(e) {
            preview.src = e.target.result;
            previewContainer.classList.remove('hidden');
        }

        reader.readAsDataURL(input.files[0]);
    }
}

function removeImage() {
    const input = document.getElementById('arquivo_criativo');
    const preview = document.getElementById('preview');
    const previewContainer = document.getElementById('imagePreview');

    input.value = '';
    preview.src = '';
    previewContainer.classList.add('hidden');
}
</script>
@endsection