@extends('layouts.app')

@section('head')
    <!-- imgAreaSelect CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/css/imgareaselect-default.css" />
@endsection

@section('content')
<div class="container">
    <h1>ImageMap bewerken</h1>
    <form action="{{ route('imagemaps.update', $imageMap->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <label for="name" class="form-label">Naam</label>
            <input type="text" name="name" id="name" class="form-control" value="{{ $imageMap->name }}" required>
        </div>
        <button type="submit" class="btn btn-success">Opslaan</button>
        <a href="{{ route('imagemaps.index') }}" class="btn btn-secondary">Terug</a>
    </form>

    <hr>
    <h3>Afbeelding</h3>
    <div style="max-width:100%; position:relative; display:inline-block;">
        <img id="map-image" src="{{ asset('storage/' . $imageMap->image_path) }}" alt="ImageMap" style="max-width:100%;height:auto;display:block;" />
        <div id="area-overlays" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;"></div>
    </div>

    <hr>
    <h3>Areas (teken en koppel product)</h3>
    <div id="areas-list" class="mb-3"></div>
    <div id="mapster-container">
        <p>Selecteer een gebied op de afbeelding om een nieuw area toe te voegen. Sleep om een rechthoek te tekenen.</p>
    </div>
</div>
@endsection

@section('script')
    <style>
        .area-overlay {
            position: absolute;
            border: 2px solid #007bff;
            background: rgba(0,123,255,0.2);
            cursor: pointer;
            pointer-events: auto;
            transition: box-shadow 0.2s;
        }
        .area-overlay.selected {
            box-shadow: 0 0 0 4px #ffc107;
            border-color: #ffc107;
            background: rgba(255,193,7,0.2);
        }
        .list-group-item.selected {
            background: #ffe082 !important;
        }
    </style>
    <script>
        console.log('jQuery version:', $.fn.jquery);
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/js/jquery.imgareaselect.min.js"></script>
    <script>
        console.log('imgAreaSelect:', typeof $.fn.imgAreaSelect);
        let imageMapId = {{ $imageMap->id }};
        let areas = @json($areas);
        let $img;
        let selectedAreaIdx = null;

        function renderAreasList() {
            let html = '';
            if (areas.length === 0) {
                html = '<em>Geen areas toegevoegd.</em>';
            } else {
                html = '<ul class="list-group">';
                areas.forEach(function(area, idx) {
                    let productInfo = 'Geen';
                    if (area.product) {
                        let name = area.product.name ? (area.product.name.nl || area.product.name.en || area.product.name) : '';
                        let ref = area.product.properties && area.product.properties.referenceNumber ? area.product.properties.referenceNumber : '';
                        productInfo = name + (ref ? ' (' + ref + ')' : '');
                    }
                    let areaNum = area.number ? area.number : (idx+1);
                    html += `<li class="list-group-item d-flex align-items-center justify-content-between${selectedAreaIdx === idx ? ' selected' : ''}" data-area-idx="${idx}">
                        <span>
                            <strong>Area #</strong> <input type='number' value='${areaNum}' min='1' class='area-num-input' data-area-id='${area.id}' style='width:60px;display:inline-block;'> [${area.coords}]<br>
                            Product: ${productInfo}
                        </span>
                        <button class="btn btn-danger btn-sm" onclick="deleteArea(${area.id})">Verwijder</button>
                    </li>`;
                });
                html += '</ul>';
            }
            $('#areas-list').html(html);
        }

        function renderAreaOverlays() {
            let $container = $('#area-overlays');
            $container.empty();
            let img = $img[0];
            let imgW = img.naturalWidth;
            let imgH = img.naturalHeight;
            let dispW = $img.width();
            let dispH = $img.height();
            let scaleX = dispW / imgW;
            let scaleY = dispH / imgH;
            areas.forEach(function(area, idx) {
                let coords = area.coords.split(',').map(Number);
                let x1 = coords[0] * scaleX;
                let y1 = coords[1] * scaleY;
                let x2 = coords[2] * scaleX;
                let y2 = coords[3] * scaleY;
                let $ov = $('<div></div>')
                    .addClass('area-overlay')
                    .toggleClass('selected', selectedAreaIdx === idx)
                    .css({
                        left: x1 + 'px',
                        top: y1 + 'px',
                        width: (x2-x1) + 'px',
                        height: (y2-y1) + 'px',
                        zIndex: 10 + idx
                    })
                    .attr('data-area-idx', idx)
                    .on('click', function(e) {
                        e.stopPropagation();
                        selectArea(idx);
                    });
                $container.append($ov);
            });
        }

        function selectArea(idx) {
            selectedAreaIdx = idx;
            renderAreasList();
            renderAreaOverlays();
            // Scroll naar de juiste lijst-rij
            let $li = $(`.list-group-item[data-area-idx="${idx}"]`);
            if ($li.length) {
                $('.list-group-item').removeClass('selected');
                $li.addClass('selected');
                $li[0].scrollIntoView({behavior:'smooth', block:'center'});
            }
        }

        function deleteArea(id) {
            if (!confirm('Weet je zeker dat je dit gebied wilt verwijderen?')) return;
            $.ajax({
                url: `/imagemaps/area/${id}`,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function() {
                    areas = areas.filter(a => a.id !== id);
                    selectedAreaIdx = null;
                    renderAreasList();
                    renderAreaOverlays();
                }
            });
        }

        function showAreaForm(shape, coords) {
            // Bepaal voorstelnummer
            let maxNum = 0;
            areas.forEach(a => { if (a.number && a.number > maxNum) maxNum = a.number; });
            let nextNum = maxNum + 1;
            let formHtml = `<form id='area-form' class='mt-2'>
                <div class='mb-2'>
                    <label>Nummer:</label>
                    <input type='number' name='number' class='form-control' value='${nextNum}' min='1' required style='width:100px;display:inline-block;'>
                </div>
                <input type='hidden' name='coords' value='${coords}'>
                <input type='hidden' name='shape' value='${shape}'>
                <div class='mb-2 position-relative'>
                    <label>Product referentie:</label>
                    <input type='text' name='product_id' id='product-ref-input' class='form-control' placeholder='Geef referentienummer in' required autocomplete='off'>
                    <div id='ref-feedback' class='small'></div>
                    <div id='ref-autocomplete' class='list-group position-absolute w-100' style='z-index:1000;display:none;max-height:200px;overflow-y:auto;'></div>
                </div>
                <button type='submit' class='btn btn-primary btn-sm'>Area opslaan</button>
                <button type='button' class='btn btn-secondary btn-sm' onclick='$("#area-form").remove(); renderCanvasAreas();'>Annuleren</button>
            </form>`;
            $('#mapster-container').html(formHtml);
            $('#area-form').on('submit', function(e) {
                e.preventDefault();
                let data = $(this).serializeArray();
                data.push({name: '_token', value: '{{ csrf_token() }}'});
                data.push({name: 'image_map_id', value: imageMapId});
                $.post('/imagemaps/area', data, function(resp) {
                    areas.push(resp);
                    renderAreasList();
                    renderAreaOverlays();
                    $('#area-form').remove();
                });
            });
            // Autocomplete
            $('#product-ref-input').on('input', function() {
                let val = $(this).val();
                if (val.length < 4) {
                    $('#ref-autocomplete').hide();
                    return;
                }
                $.get('/products/autocomplete-reference', {q: val}, function(resp) {
                    let html = '';
                    if (resp.length > 0) {
                        resp.forEach(function(item) {
                            html += `<button type='button' class='list-group-item list-group-item-action' data-ref='${item.referenceNumber}'>${item.referenceNumber} - ${item.name}</button>`;
                        });
                        $('#ref-autocomplete').html(html).show();
                    } else {
                        $('#ref-autocomplete').hide();
                    }
                });
            });
            $(document).on('click', '#ref-autocomplete .list-group-item', function() {
                let ref = $(this).data('ref');
                $('#product-ref-input').val(ref);
                $('#ref-autocomplete').hide();
                checkReference($('#product-ref-input')[0]);
            });
            // Verberg dropdown bij klik buiten
            $(document).on('mousedown', function(e) {
                if (!$(e.target).closest('#ref-autocomplete, #product-ref-input').length) {
                    $('#ref-autocomplete').hide();
                }
            });
        }

        function enableAreaSelect() {
            $img.imgAreaSelect({
                handles: true,
                onSelectEnd: function (img, selection) {
                    if (!selection.width || !selection.height) return;
                    let scaleX = img.naturalWidth / $(img).width();
                    let scaleY = img.naturalHeight / $(img).height();
                    let coords = [
                        Math.round(selection.x1 * scaleX),
                        Math.round(selection.y1 * scaleY),
                        Math.round(selection.x2 * scaleX),
                        Math.round(selection.y2 * scaleY)
                    ].join(',');
                    showAreaForm('rect', coords);
                }
            });
        }

        $(function() {
            renderAreasList();
            $img = $('#map-image');
            enableAreaSelect();
            // overlays na laden afbeelding
            $img.on('load', function() {
                renderAreaOverlays();
            });
            // overlays bij resize
            $(window).on('resize', function() {
                renderAreaOverlays();
            });
            // overlays initieel
            setTimeout(renderAreaOverlays, 200);
        });

        // AJAX check voor referentie (optioneel, werkt als je een endpoint hebt)
        function checkReference(input) {
            let ref = input.value;
            if (!ref) return;
            $('#ref-feedback').text('Controleren...');
            $.get('/products/check-reference', {reference: ref}, function(resp) {
                if (resp.exists) {
                    $('#ref-feedback').text('✔ Referentie gevonden').css('color','green');
                } else {
                    $('#ref-feedback').text('✖ Referentie niet gevonden').css('color','red');
                }
            }).fail(function() {
                $('#ref-feedback').text('Fout bij controle').css('color','orange');
            });
        }

        $(document).on('change', '.area-num-input', function() {
            let areaId = $(this).data('area-id');
            let newNum = $(this).val();
            $.ajax({
                url: `/imagemaps/area/${areaId}/number`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    number: newNum
                },
                success: function(resp) {
                    // Update area in JS array
                    let area = areas.find(a => a.id == areaId);
                    if (area) area.number = parseInt(newNum);
                    renderAreasList();
                    renderAreaOverlays();
                }
            });
        });
    </script>
@endsection