@extends('layouts.app')

@section('page-pretitle', __('Management'))
@section('page-title', __('Flowchart Details'))

@section('head')
<script src="https://unpkg.com/cytoscape@3.24.0/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>
<style>
    .btn-hover-blue:hover, .btn-hover-grey:focus {
        background-color: #0d6efd !important;
        color: #fff !important;
    }
    .btn-hover-red:hover, .btn-hover-red:focus {
        background-color: #dc3545 !important;
        color: #fff !important;
    }
</style>
@endsection

@section('content')
<div class="page wrapper">
    <div class="card shadow-sm p-4">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="text-primary me-2 mb-0">
                <i class="ti ti-info-circle mx-1"></i>{{ \Illuminate\Support\Str::title($flowchart->title) }}
            </h3>
            {{-- <h3 class="mb-3 text-info">{{ $flowchart->title }}</h3> --}}
            <div class="d-flex justify-content-end align-items-center mb-3">
                <button id="download-pdf-btn" class="btn btn-icon shadow-sm btn-hover-red btn-outline-danger bg-red-lt mx-1" title="Download as PDF">
                    <i class="ti ti-file-type-pdf mx-1" style="font-size: 1.4em;"></i>
                </button>
                <button id="download-btn" class="btn btn-icon shadow-sm btn-hover-blue btn-outline-primary bg-blue-lt" title="{{ __('Download Image') }}"><i class="ti ti-file-type-png mx-1" style="font-size: 1.4em;"></i></button>
                <a href="{{ route('flowcharts.index') }}" class="btn btn-outline-secondary mx-2">Back</a>
            </div>
        </div>

        <p><strong>Project:</strong> {{ strtoupper($flowchart->project->description ?? '-') }}</p>
        <p><strong>Description:</strong> {{ $flowchart->description ?? '-' }}</p>
        @if (empty($content['nodes']) || empty($content['edges']))
            <p class="text-muted">No flowchart data available.</p>
        @else
            <div id="cy" style="width: 100%; height: 600px; border: 1px solid #ddd; border-radius: 6px;"></div>
        @endif
    </div>
</div>

<script>
    cytoscape.use( cytoscapeDagre );

    document.addEventListener("DOMContentLoaded", function () {
        const flowchartData = @json(json_decode($flowchart->content, true));

        const nodes = flowchartData.nodes.map(node => ({
            data: { 
                id: String(node.id), 
                label: node.label,
                type: node.type || 'process'
                }
        }));

        const edges = flowchartData.edges.map(edge => ({
            data: {
                source: String(edge.from),
                target: String(edge.to),
                label: edge.text || ''
            }
        }));

        // Calculate max edge label length
        const maxLabelLength = edges.reduce((max, e) => Math.max(max, (e.data.label || '').length), 0);

        // Set spacingFactor based on label length (lower minimum to avoid too long arrows)
        let spacingFactor = 1.1;
        if (maxLabelLength > 15) spacingFactor = 1.4;
        if (maxLabelLength > 30) spacingFactor = 1.8;

        const cy = cytoscape({
            container: document.getElementById('cy'),
            elements: { nodes, edges },
            style: [
                {
                    selector: 'node[type="option"]',
                    style: {
                        'shape': 'diamond',
                        'background-color': '#F39C12'
                    }
                },
                {
                    selector: 'node[type="start"]',
                    style: {
                        'background-color': '#28a745'
                    }
                },
                {
                    selector: 'node[type="end"]',
                    style: {
                        'background-color': '#dc3545'
                    }
                },
                {
                    selector: 'node',
                    style: {
                        'label': 'data(label)',
                        'background-color': '#2E86AB',
                        'color': '#fff',
                        'text-valign': 'center',
                        'text-halign': 'center',
                        'shape': 'round-rectangle',
                        'font-size': '13px',
                        'padding': '10px',
                        'text-wrap': 'wrap',
                        'text-max-width': '120px',
                        'width': 'label',
                        'height': 'label',
                        'transition-property': 'background-color, transform',
                        'transition-duration': '0.3s',
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'label': 'data(label)',
                        'font-size': '12px',
                        'color': '#000',
                        'text-wrap': 'wrap',
                        'text-max-width': 350, // adjust width for wrapping
                        'text-halign': 'center',
                        'text-valign': 'center',
                        'text-background-color': '#fff',
                        'text-background-opacity': 1,
                        'text-background-shape': 'roundrectangle',
                        'text-background-padding': '4px',
                        'text-rotation': 'none', // horizontal text
                        'curve-style': 'bezier',
                        'target-arrow-shape': 'triangle',
                        'arrow-scale': 1.2,
                        'line-color': '#999',
                        'target-arrow-color': '#999',
                        'width': 2
                    }
                }

            ],
            layout: {
                name: 'breadthfirst',
                directed: true,
                padding: 40,
                animate: false,
                animationDuration: 500,
                spacingFactor: spacingFactor // dynamically set
            },

            userZoomingEnabled: true,
            userPanningEnabled: true,
            wheelSensitivity: 0.2,
            minZoom: 0.2,
            maxZoom: 3
        });

        // Export as PNG
        // document.getElementById('download-btn').addEventListener('click', function () {
        //     const png = cy.png({
        //         full: true,
        //         scale: 1,
        //         bg: 'white',
        //         output: 'base64uri',
        //         padding: 20 // smaller padding
        //     });
        //     const link = document.createElement('a');
        //     link.setAttribute('href', png);
        //     link.setAttribute('download', '{{ strtoupper(Str::slug($flowchart->title, "_")) }}_{{ strtoupper(Str::slug($flowchart->project->ref_no ?? "-", "_")) }}.png');
        //     link.click();
        // });

        document.getElementById('download-btn').addEventListener('click', function () {
            const flowchartTitle = "{{ $flowchart->title }}";

            const png = cy.png({
                full: true,
                scale: 1,
                bg: 'white',
                output: 'base64',
                padding: 20
            });

            const img = new Image();
            img.src = 'data:image/png;base64,' + png.replace(/^data:image\/png;base64,/, '');
            img.onload = function () {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');

                const titleFontSize = 24; // Slightly bigger font
                const marginTop = 20;

                canvas.width = img.width;
                canvas.height = img.height + titleFontSize + marginTop;

                // White background
                ctx.fillStyle = 'white';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // Flowchart image
                ctx.drawImage(img, 0, 0);

                // Bold and larger title
                ctx.fillStyle = '#000';
                ctx.font = `bold ${titleFontSize}px sans-serif`;
                ctx.textAlign = 'center';
                ctx.fillText(flowchartTitle, canvas.width / 2, img.height + marginTop + titleFontSize / 2);

                // Download image
                const combinedImage = canvas.toDataURL('image/png');
                const link = document.createElement('a');
                link.setAttribute('href', combinedImage);
                link.setAttribute('download', '{{ strtoupper(Str::slug($flowchart->title, "_")) }}_{{ strtoupper(Str::slug($flowchart->project->ref_no ?? "-", "_")) }}.png');
                link.click();
            };
        });


        document.getElementById('download-pdf-btn').addEventListener('click', function () {
            const png = cy.png({
                full: true,
                scale: 3,
                bg: 'white',
                output: 'base64',
                padding: 20
            });

            // Create a form to POST the image data
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route('flowcharts.downloadPdf', $flowchart->id) }}';
            form.target = '_blank';

            // CSRF token
            const csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = '_token';
            csrf.value = '{{ csrf_token() }}';
            form.appendChild(csrf);

            // Image data
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'imageData';
            input.value = png.replace(/^data:image\/png;base64,/, '');
            form.appendChild(input);

            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        });


    });




</script>
@endsection