@extends('layouts.admin.theme')

@section('title', 'Upload de Tábua de Marés Anual')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-info text-white">
                <h5 class="my-2">
                    <i class="fa fa-upload"></i> Upload de Tábua de Marés Anual
                </h5>
            </div>

            <div class="card-body">
                <form action="{{ route('admin.tabua.mares.store') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                    @csrf

                    <!-- Informações -->
                    <div class="alert alert-info">
                        <h6><i class="fa fa-info-circle"></i> Como funciona:</h6>
                        <ul class="mb-0">
                            <li><strong>Faça upload do PDF anual</strong> - O arquivo completo com todos os dias do ano</li>
                            <li><strong>Processamento automático</strong> - Extraímos todos os dados do PDF</li>
                            <li><strong>Uso no frontend</strong> - O sistema buscará automaticamente os dados pela data</li>
                            <li><strong>Atualização única</strong> - Um PDF por ano é suficiente</li>
                        </ul>
                    </div>

                    <!-- Upload do PDF -->
                    <div class="mb-4">
                        <label for="arquivo_pdf" class="form-label">
                            <strong>PDF Anual de Tábuas de Marés *</strong>
                        </label>
                        <input type="file" name="arquivo_pdf" id="arquivo_pdf" 
                               class="form-control @error('arquivo_pdf') is-invalid @enderror" 
                               accept=".pdf" required>
                        @error('arquivo_pdf')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">
                            <i class="fa fa-file-pdf text-danger"></i>
                            Exemplo: "Tábua das marés 2025.pdf" - Deve conter todos os dias do ano
                        </div>

                        <!-- Preview do arquivo -->
                        <div id="filePreview" class="mt-2" style="display: none;">
                            <div class="alert alert-success py-2">
                                <i class="fa fa-check-circle text-success"></i>
                                <strong>Arquivo selecionado:</strong> 
                                <span id="fileName"></span>
                                <span id="fileSize" class="badge bg-secondary ms-2"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Processamento -->
                    <div class="alert alert-warning">
                        <h6><i class="fa fa-cogs"></i> Processamento:</h6>
                        <p class="mb-0">
                            O sistema irá escanear todo o PDF e extrair <strong>todos os horários e alturas 
                            para todos os dias do ano</strong>. Isso pode levar alguns segundos.
                        </p>
                    </div>

                    <!-- Botões -->
                    <div class="d-flex gap-2 mt-4">
                        <button type="submit" class="btn btn-success" id="submitBtn">
                            <i class="fa fa-upload"></i> Processar PDF Anual
                        </button>
                        <a href="{{ route('admin.tabua.mares.index') }}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left"></i> Voltar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection