@extends('modules.layouts.base')

@php
    $moduleTitle = 'Nuova Stampa Rate';
    $moduleIcon = 'fas fa-plus';
    $moduleBreadcrumb = 'Moduli > Stampe Rate > Nuova Stampa';
@endphp

@section('module-actions')
<div class="btn-group" role="group">
    <a href="{{ route('stampeRate.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>
        Torna all'Elenco
    </a>
</div>
@endsection

@section('module-content')
<<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="module-card">
            <div class="module-card-header">
                <h6 class="module-card-title mb-0">
                    <i class="fas fa-plus me-2"></i>
                    Configurazione Stampa Rate
                </h6>
            </div>
            <div class="module-card-body">
                    <form id="stampaRateForm" method="POST" action="{{ route('stampeRate.generate') }}">
                        @csrf
                        
                        <!-- Selezione Stabile -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="stabile_id" class="form-label fw-bold">
                                    <i class="fas fa-building me-1"></i>
                                    Stabile *
                                </label>
                                <select class="form-select @error('stabile_id') is-invalid @enderror" 
                                        id="stabile_id" 
                                        name="stabile_id" 
                                        required
                                        onchange="loadRateStabile()">
                                    <option value="">Seleziona uno stabile...</option>
                                    @foreach($stabili as $stabile)
                                    <option value="{{ $stabile->id }}" {{ old('stabile_id') == $stabile->id ? 'selected' : '' }}>
                                        {{ $stabile->denominazione }} - {{ $stabile->indirizzo }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('stabile_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <!-- Selezione Template -->
                            <div class="col-md-6">
                                <label for="template_id" class="form-label fw-bold">
                                    <i class="fas fa-palette me-1"></i>
                                    Template *
                                </label>
                                <select class="form-select @error('template_id') is-invalid @enderror" 
                                        id="template_id" 
                                        name="template_id" 
                                        required
                                        onchange="previewTemplate()">
                                    <option value="">Seleziona un template...</option>
                                    @foreach($templates as $template)
                                    <option value="{{ $template->id }}" 
                                            {{ old('template_id') == $template->id ? 'selected' : '' }}>
                                        {{ $template->name }} 
                                        @if(isset($template->is_public) && !$template->is_public)
                                            <span class="badge bg-secondary">Privato</span>
                                        @endif
                                    </option>
                                    @endforeach
                                </select>
                                @error('template_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Anteprima Template -->
                        <div id="templatePreview" class="mb-4" style="display: none;">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h6 class="card-title mb-0">
                                        <i class="fas fa-eye me-1"></i>
                                        Anteprima Template
                                    </h6>
                                </div>
                                <div class="card-body p-2">
                                    <img id="templatePreviewImage" 
                                         src="" 
                                         alt="Anteprima Template" 
                                         class="img-fluid rounded"
                                         style="max-height: 200px;">
                                </div>
                            </div>
                        </div>
                        
                        <!-- Info Rate -->
                        <div id="rateInfo" class="mb-4" style="display: none;">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h6 class="card-title mb-0">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Informazioni Rate Trovate
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <h4 class="text-success mb-0" id="rateCount">0</h4>
                                                <small class="text-muted">Rate Totali</small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <h4 class="text-info mb-0" id="rateScadute">0</h4>
                                                <small class="text-muted">Rate Scadute</small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <h4 class="text-warning mb-0" id="rateProssimeScadenza">0</h4>
                                                <small class="text-muted">In Scadenza (30gg)</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Opzioni Avanzate -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-cogs me-1"></i>
                                    Opzioni di Generazione
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   id="include_scadute" 
                                                   name="include_scadute" 
                                                   value="1"
                                                   {{ old('include_scadute') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="include_scadute">
                                                Includi rate scadute
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   id="solo_in_scadenza" 
                                                   name="solo_in_scadenza" 
                                                   value="1"
                                                   {{ old('solo_in_scadenza') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="solo_in_scadenza">
                                                Solo rate in scadenza (30 giorni)
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <label for="formato_output" class="form-label">Formato Output</label>
                                        <select class="form-select" id="formato_output" name="formato_output">
                                            <option value="pdf" {{ old('formato_output', 'pdf') == 'pdf' ? 'selected' : '' }}>PDF</option>
                                            <option value="zip" {{ old('formato_output') == 'zip' ? 'selected' : '' }}>ZIP con PDF individuali</option>
                                            <option value="both" {{ old('formato_output') == 'both' ? 'selected' : '' }}>Entrambi</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="qualita_pdf" class="form-label">Qualità PDF</label>
                                        <select class="form-select" id="qualita_pdf" name="qualita_pdf">
                                            <option value="standard" {{ old('qualita_pdf', 'standard') == 'standard' ? 'selected' : '' }}>Standard</option>
                                            <option value="alta" {{ old('qualita_pdf') == 'alta' ? 'selected' : '' }}>Alta Qualità</option>
                                            <option value="stampa" {{ old('qualita_pdf') == 'stampa' ? 'selected' : '' }}>Ottimizzata per Stampa</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Note Aggiuntive -->
                        <div class="mb-4">
                            <label for="note" class="form-label">
                                <i class="fas fa-sticky-note me-1"></i>
                                Note Aggiuntive
                            </label>
                            <textarea class="form-control" 
                                      id="note" 
                                      name="note" 
                                      rows="3" 
                                      placeholder="Inserisci eventuali note o istruzioni specifiche per questa stampa...">{{ old('note') }}</textarea>
                        </div>
                        
                        <!-- Pulsanti -->
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('stampeRate.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>
                                Annulla
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-primary me-2" onclick="previewStampa()">
                                    <i class="fas fa-eye me-1"></i>
                                    Anteprima
                                </button>
                                <button type="submit" class="btn btn-module-primary">
                                    <i class="fas fa-play me-1"></i>
                                    Genera Stampa
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">Caricamento...</span>
                </div>
                <h5>Generazione in corso...</h5>
                <p class="text-muted mb-0">Stiamo creando le tue stampe rate. Questo potrebbe richiedere alcuni minuti.</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Carica rate per stabile selezionato
function loadRateStabile() {
    const stabileId = document.getElementById('stabile_id').value;
    const rateInfo = document.getElementById('rateInfo');
    
    if (!stabileId) {
        rateInfo.style.display = 'none';
        return;
    }
    
    // Mostra loading
    document.getElementById('rateCount').textContent = '...';
    document.getElementById('rateScadute').textContent = '...';
    document.getElementById('rateProssimeScadenza').textContent = '...';
    rateInfo.style.display = 'block';
    
    // Chiamata AJAX
    fetch(`/api/stampe-rate/rate/${stabileId}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('rateCount').textContent = data.totali || 0;
            document.getElementById('rateScadute').textContent = data.scadute || 0;
            document.getElementById('rateProssimeScadenza').textContent = data.in_scadenza || 0;
        })
        .catch(error => {
            console.error('Errore nel caricamento rate:', error);
            document.getElementById('rateCount').textContent = 'Errore';
            document.getElementById('rateScadute').textContent = 'Errore';
            document.getElementById('rateProssimeScadenza').textContent = 'Errore';
        });
}

// Preview template selezionato
function previewTemplate() {
    const templateSelect = document.getElementById('template_id');
    const selectedOption = templateSelect.options[templateSelect.selectedIndex];
    const previewUrl = selectedOption.getAttribute('data-preview');
    const previewDiv = document.getElementById('templatePreview');
    const previewImage = document.getElementById('templatePreviewImage');
    
    if (previewUrl) {
        previewImage.src = previewUrl;
        previewDiv.style.display = 'block';
    } else {
        previewDiv.style.display = 'none';
    }
}

// Anteprima stampa
function previewStampa() {
    const form = document.getElementById('stampaRateForm');
    const formData = new FormData(form);
    
    // Valida form prima dell'anteprima
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    // TODO: Implementare preview
    alert('Funzione anteprima in sviluppo');
}

// Submit form con loading
document.getElementById('stampaRateForm').addEventListener('submit', function(e) {
    const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
    loadingModal.show();
});

// Carica rate al page load se stabile già selezionato
document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementById('stabile_id').value) {
        loadRateStabile();
    }
    if (document.getElementById('template_id').value) {
        previewTemplate();
    }
});
</script>
@endpush