@extends('layouts.main') {{-- Or your main layout file --}}

@section('title', 'Generate Brandfit Report from JSON')

@push('styles')
<style>
    .report-json-container {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .report-json-container h1 {
        color: #333;
        margin-bottom: 20px;
        text-align: center;
    }
    .form-group {
        margin-bottom: 20px;
    }
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
    }
    textarea.form-control {
        width: 100%;
        min-height: 300px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.9em;
        line-height: 1.5;
    }
    .btn-submit {
        display: block;
        width: 100%;
        padding: 12px;
        background-color: #28a745; /* Green, similar to a success button */
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 1.1em;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .btn-submit:hover {
        background-color: #218838;
    }
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        color: white;
        font-size: 1.5em;
    }
    .error-message {
        color: red;
        margin-top: 10px;
        text-align: center;
    }
</style>
@endpush

@section('content')
<div class="report-json-container">
    <h1>Generate PowerPoint Report from JSON</h1>

    <form id="jsonReportForm">
        <div class="form-group">
            <label for="json_payload">JSON Payload:</label>
            <textarea id="json_payload" name="json_payload" class="form-control" placeholder='Paste your JSON data here...'></textarea>
        </div>

        <button type="submit" class="btn btn-primary btn-submit">Generate and Download Report</button>
    </form>
    <div id="errorMessage" class="error-message" style="display:none;"></div>
</div>

<div id="loadingOverlay" class="loading-overlay" style="display:none;">
    <span>Generating report, please wait...</span>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM fully loaded and parsed');
    const form = document.getElementById('jsonReportForm');
    const jsonPayloadTextarea = document.getElementById('json_payload');
    const loadingOverlay = document.getElementById('loadingOverlay');
    const errorMessageDiv = document.getElementById('errorMessage');

    if (!form) {
        console.error('Form with ID "jsonReportForm" not found!');
        return;
    }
    console.log('Form element found:', form);

    form.addEventListener('submit', async function (event) {
        console.log('Form submit event triggered');
        event.preventDefault();
        console.log('Default form submission prevented');

        errorMessageDiv.style.display = 'none';
        errorMessageDiv.textContent = '';

        let jsonData;
        try {
            jsonData = JSON.parse(jsonPayloadTextarea.value);
            console.log('JSON parsed successfully');
        } catch (error) {
            console.error('Invalid JSON format:', error);
            errorMessageDiv.textContent = 'Invalid JSON format: ' + error.message;
            errorMessageDiv.style.display = 'block';
            return;
        }

        loadingOverlay.style.display = 'flex';
        console.log('Showing loading overlay');

        try {
            console.log('Attempting to fetch...', '{{ route("brandfit.download.json") }}');
            const response = await fetch('{{ route("brandfit.download.json") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/vnd.openxmlformats-officedocument.presentationml.presentation', // Or 'application/octet-stream'
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Important for Laravel POST requests
                },
                body: JSON.stringify(jsonData)
            });
            console.log('Fetch response status:', response.status);

            if (response.ok) {
                console.log('Response OK, processing blob for download...');
                const blob = await response.blob();
                const contentDisposition = response.headers.get('content-disposition');
                let filename = 'brandfit_report.pptx'; // Default filename
                if (contentDisposition) {
                    const filenameMatch = contentDisposition.match(/filename="?(.+)"?/i);
                    if (filenameMatch && filenameMatch.length > 1) {
                        filename = filenameMatch[1];
                    }
                }
                console.log('Downloading file as:', filename);

                const link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = filename;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(link.href);
            } else {
                const errorData = await response.json();
                console.error('Fetch error data:', errorData);
                errorMessageDiv.textContent = `Error (${response.status}): ${errorData.error || 'Could not generate report.'}`;
                errorMessageDiv.style.display = 'block';
            }
        } catch (error) {
            console.error('Submission fetch/catch error:', error);
            errorMessageDiv.textContent = 'An unexpected error occurred: ' + error.message;
            errorMessageDiv.style.display = 'block';
        } finally {
            loadingOverlay.style.display = 'none';
            console.log('Hiding loading overlay');
        }
    });
});
</script>
@endpush