@php(
$headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
    $headerOption['title'] ?? 'PDF Mapper',
    '',
    [],
    [],
    false,
    $headerOption['header_buttons'] ?? []
))
@extends('admin.layouts.layout', $headerOption)

@push('page_css')
<style>
    .mapper-top-bar { border-bottom: 2px solid #16C4C0; padding: 8px 12px; background: #fff; }
    .mapper-tabs .nav-link { padding: 8px 16px; font-size: 13px; font-weight: 500; color: #333; border: none; border-radius: 5px 5px 0 0; }
    .mapper-tabs .nav-link.active { background: #16C4C0 !important; color: #fff !important; }
    .mapper-tabs .nav-link:hover:not(.active) { background: #f0fafa; color: #16C4C0; }
    .crm-field-item { cursor: grab; border: 1px solid #e5e7eb; border-radius: 5px; padding: 6px 10px; margin-bottom: 6px; transition: background 0.2s; }
    .crm-field-item:hover { border-color: #16C4C0; }
    .crm-field-item.mapped { background: #d4f5f4; }
    .crm-field-item.mapped .field-value { background: #16C4C0; color: #fff; border-color: #16C4C0; padding: 3px 8px; border-radius: 3px; font-size: 12px; }
    .pdf-container { position: relative; background: #f5f5f5; border: 1px solid #e5e7eb; border-radius: 5px; overflow: auto; max-height: calc(100vh - 200px); }
    .pdf-page-wrapper { position: relative; margin: 10px auto; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
    .pdf-field-overlay { position: absolute; border: 2px dashed #ccc; background: rgba(22,196,192,0.05); cursor: pointer; transition: all 0.2s; font-size: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .pdf-field-overlay:hover { border-color: #16C4C0; background: rgba(22,196,192,0.15); z-index: 10; }
    .pdf-field-overlay.mapped { border-color: #16C4C0; background: rgba(22,196,192,0.25); border-style: solid; }
    .pdf-field-overlay.drag-over { border-color: #9D9DFC; background: rgba(157,157,252,0.3); }
    .pdf-field-overlay .overlay-label { font-size: 9px; color: #333; text-align: center; word-break: break-all; padding: 1px; }
    .pdf-field-overlay.mapped .overlay-label { color: #fff; font-weight: 600; background: rgba(22,196,192,0.8); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
    .signer-field-item { background: #fff3e0; border-color: #ff9800; }
    .signer-field-item .badge-signer { background: #ff9800; color: #fff; font-size: 10px; }
</style>
@endpush

@section('content')
<div class="col-12">
    <div class="project-box p-0">
        @if(session('success'))
            <div class="alert alert-success m-2">{{ session('success') }}</div>
        @endif

        {{-- TOP BAR: Back arrow + Dropdown + Action Buttons --}}
        <div class="mapper-top-bar d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-2">
                <a href="{{ route('manages.pdf-mappings.index') }}" style="color:#16C4C0; font-size:20px;" title="Back to list">
                    <i class="bx bx-arrow-back"></i>
                </a>
                <select class="select2 no-search" id="templateSelector" style="width:250px;">
                    @foreach($allTemplates as $t)
                        <option value="{{ $t->id }}" {{ $t->id == $template->id ? 'selected' : '' }}>{{ $t->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="d-flex gap-2">
                <form action="{{ route('manages.pdf-mappings.extract-fields', $template->id) }}"
                      method="POST" class="d-inline" id="extractFieldsForm">
                    @csrf
                    <button type="submit" class="green-btn-inner waves-effect btn-sm" id="btnExtractFields">
                        <i class="bx bx-refresh"></i> Extract Fields
                    </button>
                </form>
                <form action="{{ route('manages.pdf-mappings.preview', $template->id) }}"
                      method="POST" target="_blank" class="d-inline">
                    @csrf
                    <button type="submit" class="green-btn-inner waves-effect btn-sm">
                        <i class="bx bx-show"></i> Preview
                    </button>
                </form>
                <button class="green-btn-inner waves-effect btn-sm" id="btnSaveMapping">
                    <i class="bx bx-save"></i> Save
                </button>
            </div>
        </div>

        {{-- TABS (Lead Field Tabs) --}}
        <ul class="nav mapper-tabs px-2 pt-2" id="fieldTabs" style="border-bottom: 2px solid #e5e7eb;">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#tab_core">Core Fields</a>
            </li>
            @foreach($crmTabs as $tab)
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#tab_{{ $tab->id }}">{{ $tab->title }}</a>
            </li>
            @endforeach
        </ul>

        {{-- MAIN CONTENT: Left Fields + Right PDF --}}
        <div class="row g-0" style="min-height: calc(100vh - 250px);">
            {{-- LEFT: CRM Fields --}}
            <div class="col-md-3 border-end" style="max-height:calc(100vh - 250px); overflow-y:auto;">
                <div class="p-2 mb-1" style="background:#f0fafa;">
                    <small class="text-muted">
                        <strong>Instructions:</strong> Map the fields of your lead to your electronic signature document by dragging and dropping. Fields that have already been mapped will appear highlighted in green.
                    </small>
                    <br>
                    <small class="text-muted"><strong>Note:</strong> One lead field can be reused to populate as many Document fields as needed.</small>
                </div>

                <div class="tab-content px-2">
                    {{-- Core Fields Tab --}}
                    <div class="tab-pane active show" id="tab_core">
                        @foreach($coreLeadFields as $f)
                        <div class="crm-field-item {{ $f['is_mapped'] ? 'mapped' : '' }}"
                             draggable="true"
                             data-slug="{{ $f['slug'] }}"
                             data-label="{{ $f['label'] }}"
                             data-mapping-type="1">
                            <div class="small text-muted" style="font-size:11px;">{{ $f['label'] }}</div>
                            @if($f['is_mapped'])
                                <div class="field-value">{{ $f['mapped_to'] }}</div>
                            @endif
                        </div>
                        @endforeach
                    </div>

                    {{-- Dynamic Tabs --}}
                    @foreach($crmTabs as $tab)
                    <div class="tab-pane" id="tab_{{ $tab->id }}">
                        @foreach($tab->fields as $f)
                        <div class="crm-field-item {{ $f->is_mapped ? 'mapped' : '' }}"
                             draggable="true"
                             data-slug="{{ $f->slug }}"
                             data-label="{{ $f->label }}"
                             data-mapping-type="2">
                            <div class="small text-muted" style="font-size:11px;">{{ $f->label }}</div>
                            @if($f->is_mapped)
                                <div class="field-value">{{ $f->mapped_to }}</div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- RIGHT: PDF Preview + Field Overlays --}}
            <div class="col-md-9">
                <div class="pdf-container" id="pdfContainer">
                    @if(!$pdfUrl)
                        <div class="text-center text-muted py-5">
                            <i class="bx bx-file bx-lg"></i>
                            <p>No PDF file attached. Click "Extract Fields" after uploading a PDF.</p>
                        </div>
                    @else
                        <div id="pdfViewer"></div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
(function($) {
    var pdfUrl = @json($pdfUrl);
    var templateId = {{ $template->id }};
    var pdfFields = @json($fields);
    var existingMappings = @json($mappings);
    var localMappings = {}; // fieldId => {mapping_type, crm_field_slug, static_value}

    // Initialize localMappings from existing
    $.each(existingMappings, function(fieldId, m) {
        localMappings[fieldId] = {
            mapping_type: m.mapping_type,
            crm_field_slug: m.crm_field_slug,
            static_value: m.static_value
        };
    });

    // ─── PDF.js RENDERING ────────────────────────────────────────────────
    if (pdfUrl && typeof pdfjsLib !== 'undefined') {
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

        pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
            var viewer = document.getElementById('pdfViewer');
            var totalPages = pdf.numPages;

            for (var pageNum = 1; pageNum <= totalPages; pageNum++) {
                (function(pn) {
                    pdf.getPage(pn).then(function(page) {
                        var scale = 1.2;
                        var viewport = page.getViewport({ scale: scale });

                        var wrapper = document.createElement('div');
                        wrapper.className = 'pdf-page-wrapper';
                        wrapper.style.width = viewport.width + 'px';
                        wrapper.style.height = viewport.height + 'px';
                        wrapper.dataset.page = pn;

                        var canvas = document.createElement('canvas');
                        canvas.width = viewport.width;
                        canvas.height = viewport.height;
                        wrapper.appendChild(canvas);

                        viewer.appendChild(wrapper);

                        var ctx = canvas.getContext('2d');
                        page.render({ canvasContext: ctx, viewport: viewport }).promise.then(function() {
                            // Render field overlays for this page
                            renderOverlays(wrapper, pn, viewport);
                        });
                    });
                })(pageNum);
            }
        }).catch(function(err) {
            console.error('PDF load error:', err);
            $('#pdfViewer').html('<div class="text-center text-danger py-5">Failed to load PDF: ' + err.message + '</div>');
        });
    }

    function renderOverlays(wrapper, pageNum, viewport) {
        var pageHeight = viewport.height;
        var scale = viewport.scale || 1.2;

        pdfFields.forEach(function(field) {
            if ((field.page_number || 1) !== pageNum) return;
            if (!field.x_position && !field.y_position) return;

            var x = (field.x_position || 0) * scale;
            var y = pageHeight - ((field.y_position || 0) + (field.height || 15)) * scale;
            var w = (field.width || 100) * scale;
            var h = (field.height || 15) * scale;

            var div = document.createElement('div');
            div.className = 'pdf-field-overlay' + (localMappings[field.id] ? ' mapped' : '');
            if (field.is_signer_field) div.className += ' signer-field-item';
            div.style.left = x + 'px';
            div.style.top = y + 'px';
            div.style.width = w + 'px';
            div.style.height = h + 'px';
            div.dataset.fieldId = field.id;
            div.dataset.fieldName = field.field_name;
            div.title = field.field_name;

            var label = document.createElement('div');
            label.className = 'overlay-label';
            if (localMappings[field.id]) {
                label.textContent = localMappings[field.id].crm_field_slug || localMappings[field.id].static_value || field.field_name;
            } else {
                label.textContent = field.field_name;
            }
            div.appendChild(label);

            // Drop zone handlers
            div.addEventListener('dragover', function(e) { e.preventDefault(); div.classList.add('drag-over'); });
            div.addEventListener('dragleave', function() { div.classList.remove('drag-over'); });
            div.addEventListener('drop', function(e) {
                e.preventDefault();
                div.classList.remove('drag-over');
                var slug = e.dataTransfer.getData('text/slug');
                var mappingType = parseInt(e.dataTransfer.getData('text/mapping-type')) || 1;
                if (!slug) return;

                // Create mapping
                localMappings[field.id] = { mapping_type: mappingType, crm_field_slug: slug, static_value: null };
                div.classList.add('mapped');
                label.textContent = slug;

                // Highlight the CRM field on the left
                $('.crm-field-item[data-slug="' + slug + '"]').addClass('mapped');

                if (typeof toastr !== 'undefined') toastr.info('Mapped "' + slug + '" → "' + field.field_name + '"');
            });

            // Click to remove mapping
            div.addEventListener('click', function() {
                if (localMappings[field.id]) {
                    confirmDialog({
                        title: 'Remove Mapping',
                        text: 'Remove mapping for "' + field.field_name + '"?',
                        icon: 'question',
                        confirmButtonText: 'Yes, Remove',
                    }).then(function(result) {
                        if (result.isConfirmed) {
                            delete localMappings[field.id];
                            div.classList.remove('mapped');
                            label.textContent = field.field_name;
                        }
                    });
                }
            });

            wrapper.appendChild(div);
        });
    }

    // ─── DRAG FROM CRM FIELDS ────────────────────────────────────────────
    $(document).on('dragstart', '.crm-field-item', function(e) {
        e.originalEvent.dataTransfer.setData('text/slug', $(this).data('slug'));
        e.originalEvent.dataTransfer.setData('text/mapping-type', $(this).data('mapping-type'));
    });

    // ─── TEMPLATE SWITCHER ───────────────────────────────────────────────
    $('#templateSelector').on('change', function() {
        var newId = $(this).val();
        if (newId && newId != templateId) {
            window.location.href = '{{ url("admin/manages/pdf-mappings") }}/' + newId;
        }
    });

    // ─── SAVE MAPPINGS ───────────────────────────────────────────────────
    $('#btnSaveMapping').on('click', function() {
        var btn = $(this);
        var mappings = [];

        $.each(localMappings, function(fieldId, m) {
            mappings.push({
                pdf_template_field_id: parseInt(fieldId),
                mapping_type: m.mapping_type || 1,
                crm_field_slug: m.crm_field_slug,
                static_value: m.static_value
            });
        });

        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Saving...');

        $.ajax({
            url: '{{ route("manages.pdf-mappings.save-mapping", $template->id) }}',
            method: 'POST',
            data: { _token: '{{ csrf_token() }}', mappings: mappings },
            success: function(res) {
                btn.prop('disabled', false).html('<i class="bx bx-save"></i> Save');
                if (res && res.status === 200) {
                    showSuccessToast(res.message || 'Mappings saved.');
                } else { showErrorToast(res.message || 'Failed to save.'); }
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="bx bx-save"></i> Save');
                showErrorToast(xhr.responseJSON?.message || 'Error saving mappings.');
            }
        });
    });

    // ─── EXTRACT FIELDS ──────────────────────────────────────────────────
    $('#extractFieldsForm').on('submit', function(e) {
        e.preventDefault();
        var btn = $('#btnExtractFields');
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Extracting...');
        $.ajax({
            url: '{{ route("manages.pdf-mappings.extract-fields", $template->id) }}',
            method: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            success: function(res) {
                btn.prop('disabled', false).html('<i class="bx bx-refresh"></i> Extract Fields');
                if (res && res.status === 200) {
                    showSuccessToast('Extracted ' + (res.data.count || 0) + ' fields. Reloading...');
                    setTimeout(function() { location.reload(); }, 1000);
                } else { showErrorToast(res.message || 'Failed to extract fields.'); }
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="bx bx-refresh"></i> Extract Fields');
                showErrorToast(xhr.responseJSON?.message || 'Error extracting fields.');
            }
        });
    });

    // Init select2
    if (typeof $.fn.select2 !== 'undefined') {
        $('#templateSelector').select2({ width: '250px', minimumResultsForSearch: Infinity });
    }
})(jQuery);
</script>
@endpush