@extends('layouts.main')
@section('title', 'AI Report Templates')
@section('container')

<style>
    .status-pill {
        display: inline-block; padding: 2px 10px; border-radius: 20px;
        font-size: 11px; font-weight: 600;
    }
    .s-draft    { background:#e2e3e5; color:#41464b; }
    .s-active   { background:#d1e7dd; color:#0a3622; }
    .s-archived { background:#fff3cd; color:#856404; }
    .btn-xs { padding: 2px 8px; font-size: 11px; border-radius: 4px; }
    .table > tbody > tr > td { vertical-align: middle; }
    .parser-badge {
        display: inline-flex; align-items: center; gap: 4px;
        background: #e8f5e9; color: #2e7d32;
        border: 1px solid #a5d6a7; border-radius: 20px;
        padding: 1px 8px; font-size: 11px; font-weight: 600;
    }
    .run-drop-zone {
        border: 2px dashed #b0bec5; border-radius: 6px;
        padding: 18px; text-align: center; cursor: pointer;
        transition: border-color .2s, background .2s;
    }
    .run-drop-zone.dragover, .run-drop-zone:hover { border-color: var(--secondary); background: #f0f4ff; }
    .run-drop-zone.has-file { border-color: #43a047; background: #f1f8e9; }
</style>

<div class="row">
    <div class="col-12">
        <div class="card">
      
            <div class="card-body p-0">
                <div class="table-responsive active-projects">
                    <div class="tbl-caption p-2 d-flex justify-content-between align-items-center">
                        <h4 class="heading mb-0">All Templates</h4>
                        <a href="{{ route('ai-report-builder.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fa fa-history me-1"></i> Sessions
                        </a>
                    </div>
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Actions</th>
                                <th>Name</th>
                                <th>Status</th>
                                <th>Version</th>
                                <th>PHP Parser</th>
                                <th>Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($templates as $i => $tpl)
                            <tr>
                                <td class="text-muted small">{{ $templates->firstItem() + $i }}</td>
                                   <td>
                                    <div class="d-flex gap-1 flex-wrap">
                                        <a href="{{ route('ai-report-templates.show', $tpl->id) }}"
                                           class="btn btn-xs btn-outline-primary" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>

                                        {{-- Generate Report: upload input file → download Excel --}}
                                        <button type="button"
                                                class="btn btn-xs btn-success"
                                                data-bs-toggle="modal"
                                                data-bs-target="#runReportModal"
                                                data-tpl-name="{{ $tpl->name }}"
                                                data-url="{{ route('ai-report-templates.run', $tpl->id) }}"
                                                title="Generate Report">
                                            <i class="fa fa-file-excel-o me-1"></i>Generate Report
                                        </button>

                                        @if(Auth::user()->hasActionAccess('ai_report.manage') || Auth::user()->isSuperAdmin())
                                        <form action="{{ route('ai-report-templates.generate-parser', $tpl->id) }}" method="POST">
                                            @csrf
                                            <button class="btn btn-xs btn-outline-info" title="Generate PHP Parser">
                                                <i class="fa fa-code"></i>
                                            </button>
                                        </form>

                                        @if($tpl->status === 'draft')
                                        <form action="{{ route('ai-report-templates.activate', $tpl->id) }}" method="POST">
                                            @csrf
                                            <button class="btn btn-xs btn-outline-success" title="Activate">
                                                <i class="fa fa-check"></i>
                                            </button>
                                        </form>
                                        @endif
                                        @endif

                                        @if(Auth::user()->hasActionAccess('ai_report.delete') || Auth::user()->isSuperAdmin())
                                        <form action="{{ route('ai-report-templates.destroy', $tpl->id) }}" method="POST"
                                              onsubmit="return confirm('Delete template \'{{ addslashes($tpl->name) }}\'?')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-xs btn-outline-danger" title="Delete">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <a href="{{ route('ai-report-templates.show', $tpl->id) }}"
                                       class="fw-semibold text-dark">{{ $tpl->name }}</a>
                                    @if($tpl->description)
                                    <div class="text-muted" style="font-size:11px;">
                                        {{ Str::limit($tpl->description, 55) }}
                                    </div>
                                    @endif
                                </td>
                                <td>
                                    @php $sc = ['draft'=>'s-draft','active'=>'s-active','archived'=>'s-archived'][$tpl->status] ?? 's-draft'; @endphp
                                    <span class="status-pill {{ $sc }}">{{ ucfirst($tpl->status) }}</span>
                                </td>
                                <td>
                                    <span class="badge" style="background:var(--secondary);color:#fff;">v{{ $tpl->current_version }}</span>
                                </td>
                                <td>
                                    @if($tpl->hasParser())
                                        <span class="parser-badge"><i class="fa fa-check"></i> Generated</span>
                                    @else
                                        <span class="text-muted small">—</span>
                                    @endif
                                </td>
                                <td class="text-muted small">{{ $tpl->created_at->format('d M Y') }}</td>
                             
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">
                                    <i class="fa fa-list fa-2x mb-2 d-block" style="color:#ccc;"></i>
                                    No templates yet.
                                    <a href="{{ route('ai-report-builder.create') }}" class="btn btn-sm btn-primary mt-2 d-inline-block">
                                        <i class="fa fa-plus me-1"></i> Run First Analysis
                                    </a>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($templates->hasPages())
                <div class="p-2">{{ $templates->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</div>
{{-- Generate Report Modal --}}
<div class="modal fade" id="runReportModal" tabindex="-1" aria-labelledby="runReportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background:var(--secondary);color:#fff;padding:10px 16px;">
                <h6 class="modal-title mb-0" id="runReportModalLabel">
                    <i class="fa fa-file-excel-o me-2"></i>Generate Report — <span id="modal-tpl-name"></span>
                </h6>
                <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding:20px;">
                <p class="text-muted small mb-3">
                    Upload the <strong>Input File</strong> (same format you used when creating this template).
                    The report will be generated and downloaded automatically.
                </p>

                <div class="run-drop-zone" id="run-drop-zone">
                    <input type="file" id="run-file-input" accept=".xlsx,.xls,.csv" style="display:none;">
                    <i class="fa fa-cloud-upload fa-2x mb-2 d-block text-secondary"></i>
                    <span id="run-zone-label" style="font-size:13px;color:#666;">
                        Click or drag &amp; drop Input File here (.xlsx, .xls, .csv)
                    </span>
                </div>

                <div id="run-error" class="alert alert-danger mt-2 d-none" style="font-size:12px;padding:8px 12px;"></div>
            </div>
            <div class="modal-footer" style="padding:10px 16px;">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="run-generate-btn" class="btn btn-sm btn-success" disabled>
                    <i class="fa fa-download me-1"></i>Generate &amp; Download
                </button>
            </div>
        </div>
    </div>
</div>

<script nonce="{{ $cspNonce }}">
(function(){
    var modalEl  = document.getElementById('runReportModal');
    var fileInput= document.getElementById('run-file-input');
    var dropZone = document.getElementById('run-drop-zone');
    var zoneLabel= document.getElementById('run-zone-label');
    var genBtn   = document.getElementById('run-generate-btn');
    var errDiv   = document.getElementById('run-error');
    var csrf     = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    var currentUrl   = '';
    var selectedFile = null;

    // Bootstrap fires show.bs.modal AFTER its own JS is loaded — safe to listen for it now
    modalEl.addEventListener('show.bs.modal', function(e){
        var btn      = e.relatedTarget; // the [data-bs-toggle] button that was clicked
        currentUrl   = btn.dataset.url;
        selectedFile = null;
        document.getElementById('modal-tpl-name').textContent = btn.dataset.tplName || '';
        fileInput.value = '';
        dropZone.classList.remove('has-file');
        zoneLabel.innerHTML = 'Click or drag &amp; drop Input File here (.xlsx, .xls, .csv)';
        genBtn.disabled = true;
        errDiv.classList.add('d-none');
    });

    dropZone.addEventListener('click', function(){ fileInput.click(); });
    dropZone.addEventListener('dragover',  function(e){ e.preventDefault(); dropZone.classList.add('dragover'); });
    dropZone.addEventListener('dragleave', function(){ dropZone.classList.remove('dragover'); });
    dropZone.addEventListener('drop', function(e){
        e.preventDefault();
        dropZone.classList.remove('dragover');
        var f = e.dataTransfer.files[0];
        if(f) setFile(f);
    });
    fileInput.addEventListener('change', function(){
        if(fileInput.files[0]) setFile(fileInput.files[0]);
    });

    function setFile(f){
        var ext = f.name.split('.').pop().toLowerCase();
        if(!['xlsx','xls','csv'].includes(ext)){
            showError('Only .xlsx, .xls, .csv files are allowed.');
            return;
        }
        selectedFile = f;
        var sz = f.size < 1024*1024 ? Math.round(f.size/1024)+'KB' : (f.size/1024/1024).toFixed(1)+'MB';
        zoneLabel.innerHTML = '<i class="fa fa-check-circle text-success me-1"></i><strong>'+esc(f.name)+'</strong> ('+sz+')';
        dropZone.classList.add('has-file');
        errDiv.classList.add('d-none');
        genBtn.disabled = false;
    }

    genBtn.addEventListener('click', function(){
        if(!selectedFile){ showError('Please select a file first.'); return; }

        genBtn.disabled = true;
        genBtn.innerHTML = '<i class="fa fa-spinner fa-spin me-1"></i>Generating…';
        errDiv.classList.add('d-none');

        var fd = new FormData();
        fd.append('input_file', selectedFile, selectedFile.name);
        fd.append('_token', csrf);

        fetch(currentUrl, { method:'POST', body:fd })
        .then(function(res){
            if(!res.ok){
                return res.text().then(function(t){
                    try{ var j=JSON.parse(t); throw new Error(j.error||j.message||'Error '+res.status); }
                    catch(ex){ throw new Error(ex.message||'Server error '+res.status); }
                });
            }
            var cd    = res.headers.get('Content-Disposition') || '';
            var m     = cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
            var fname = m ? m[1].replace(/['"]/g,'') : 'report.xlsx';
            return res.blob().then(function(blob){ return {blob:blob, fname:fname}; });
        })
        .then(function(d){
            var a = document.createElement('a');
            a.href = URL.createObjectURL(d.blob);
            a.download = d.fname;
            document.body.appendChild(a);
            a.click();
            setTimeout(function(){ document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 600);
            // Close modal via dismiss button — works without needing bootstrap.Modal instance
            modalEl.querySelector('[data-bs-dismiss="modal"]').click();
        })
        .catch(function(err){ showError(err.message || 'Report generation failed.'); })
        .finally(function(){
            genBtn.disabled = false;
            genBtn.innerHTML = '<i class="fa fa-download me-1"></i>Generate &amp; Download';
        });
    });

    function showError(msg){ errDiv.textContent = msg; errDiv.classList.remove('d-none'); }
    function esc(s){ var d=document.createElement('div'); d.textContent=s; return d.innerHTML; }
})();
</script>

@endsection