@extends('layouts.adminlte')

@section('title', 'BUILDER SLIP')
@section('page_title', 'BUILDER SLIP')

@push('styles')
    <style>
        .builder-item { border: 1px solid #d8dee4; border-radius: 8px; padding: 10px 12px; background: #fff; margin-bottom: 8px; cursor: grab; }
        .builder-item .meta { font-size: 12px; color: #6b7280; }
        .builder-wrap { max-width: 1200px; }
        .preview-box { border: 1px solid #d8dee4; border-radius: 10px; background: #fff; padding: 14px; min-height: 420px; }
        .preview-block { border: 1px dashed #cfd8e3; border-radius: 8px; padding: 10px; margin-bottom: 10px; background: #f8fafc; }
        .preview-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
        .preview-line { height: 8px; background: #e5e7eb; border-radius: 6px; margin-bottom: 6px; }
        .preview-line.short { width: 45%; }
    </style>
@endpush

@section('content')
    <div class="card builder-wrap">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Builder: {{ $profile->code }} - {{ $profile->name }}</h3>
            <div class="d-flex gap-2">
                <button id="btnOpenPreview" class="btn btn-outline-info btn-sm"><i class="fas fa-eye me-1"></i>Preview Full</button>
                <button id="btnSaveLayout" class="btn btn-primary btn-sm"><i class="fas fa-save me-1"></i>Simpan Layout</button>
                <a href="{{ route('penggajian.slip_profiles.index') }}" class="btn btn-outline-secondary btn-sm">Kembali</a>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-info py-2">
                Drag & drop untuk urutan blok. Centang aktif untuk menampilkan blok saat cetak slip.
            </div>
            <div class="row g-3">
                <div class="col-lg-6">
                    <div id="layoutList">
                        @foreach($layout as $item)
                            <div class="builder-item" data-key="{{ $item['key'] }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <strong>{{ $item['label'] ?? $item['key'] }}</strong>
                                        <div class="meta">Key: {{ $item['key'] }}</div>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input item-enabled" type="checkbox" {{ !empty($item['enabled']) ? 'checked' : '' }}>
                                        <label class="form-check-label">Aktif</label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="preview-box">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <strong>Preview Live</strong>
                            <small class="text-muted">Render mengikuti urutan + status aktif</small>
                        </div>
                        <div id="previewList"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Preview Full Slip</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="fullPreviewContainer" class="p-3 bg-white border rounded"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/sortablejs/Sortable.min.js') }}"></script>
    <script>
        $(function () {
            const list = document.getElementById('layoutList');
            const previewList = $('#previewList');
            const fullPreviewModal = new bootstrap.Modal(document.getElementById('previewModal'));
            const profileMeta = {
                companyName: @json($profile->company_name ?: 'PT. Contoh Perusahaan'),
                companyAddress: @json($profile->company_address ?: 'Alamat perusahaan'),
                showNpwp: @json((bool) $profile->show_npwp),
                showBank: @json((bool) $profile->show_bank_account),
                showSignature: @json((bool) $profile->show_signature),
                headerNote: @json($profile->header_note ?: 'Slip gaji ini dihasilkan sistem.'),
                footerNote: @json($profile->footer_note ?: 'Dokumen ini sah tanpa tanda tangan basah.'),
            };
            Sortable.create(list, {
                animation: 120,
                onSort: function () { renderPreview(); },
            });

            const renderBlockPreview = (key, label) => {
                const safeLabel = $('<div>').text(label || key).html();
                if (key === 'earnings_table') {
                    return `<div class="preview-block"><div class="preview-title">${safeLabel}</div><div class="preview-line"></div><div class="preview-line"></div><div class="preview-line"></div><div class="preview-line short"></div></div>`;
                }
                if (key === 'signature_block') {
                    return `<div class="preview-block"><div class="preview-title">${safeLabel}</div><div class="preview-line short"></div><div class="preview-line short"></div></div>`;
                }
                return `<div class="preview-block"><div class="preview-title">${safeLabel}</div><div class="preview-line"></div><div class="preview-line short"></div></div>`;
            };

            const renderPreview = () => {
                const html = [];
                $('#layoutList .builder-item').each(function () {
                    const enabled = $(this).find('.item-enabled').is(':checked');
                    if (!enabled) return;
                    const key = ($(this).data('key') || '').toString();
                    const label = ($(this).find('strong').text() || '').toString();
                    html.push(renderBlockPreview(key, label));
                });
                if (html.length === 0) {
                    previewList.html('<div class="text-muted small">Tidak ada blok aktif.</div>');
                    return;
                }
                previewList.html(html.join(''));
            };

            const collectLayout = () => {
                const layout = [];
                $('#layoutList .builder-item').each(function () {
                    layout.push({
                        key: ($(this).data('key') || '').toString(),
                        enabled: $(this).find('.item-enabled').is(':checked')
                    });
                });
                return layout;
            };

            const buildFullPreviewHtml = () => {
                const layout = collectLayout();
                const parts = [];
                layout.forEach((block) => {
                    if (!block.enabled) return;
                    if (block.key === 'company_header') {
                        parts.push(`<h5 class="mb-1">${profileMeta.companyName}</h5>`);
                        parts.push(`<div class="text-muted mb-2">${profileMeta.companyAddress}</div>`);
                    } else if (block.key === 'employee_info') {
                        parts.push(`
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <div><strong>Karyawan:</strong> KRY-0001 - Contoh Karyawan</div>
                                    <div><strong>Periode:</strong> 2026-02-26 s/d 2026-03-25</div>
                                    <div><strong>Tgl Proses:</strong> 2026-03-25</div>
                                </div>
                                <div class="col-md-6">
                                    ${profileMeta.showNpwp ? '<div><strong>NPWP:</strong> 12.345.678.9-012.000</div>' : ''}
                                    ${profileMeta.showBank ? '<div><strong>Rekening:</strong> BCA - 1234567890 (Contoh Karyawan)</div>' : ''}
                                    <div><strong>Generated:</strong> 2026-03-03 10:00:00</div>
                                </div>
                            </div>
                        `);
                    } else if (block.key === 'header_note') {
                        parts.push(`<div class="alert alert-info py-2 px-3 mb-3">${profileMeta.headerNote}</div>`);
                    } else if (block.key === 'earnings_table') {
                        parts.push(`
                            <table class="table table-bordered mb-3">
                                <thead><tr><th>Komponen</th><th class="text-end">Nominal (Rp)</th></tr></thead>
                                <tbody>
                                    <tr><td>Bruto</td><td class="text-end">6.500.000,00</td></tr>
                                    <tr><td>PPh21</td><td class="text-end">(325.000,00)</td></tr>
                                    <tr><td>BPJS</td><td class="text-end">(65.000,00)</td></tr>
                                    <tr><td>Reimburse</td><td class="text-end">150.000,00</td></tr>
                                    <tr class="table-primary"><td><strong>NETTO DITERIMA</strong></td><td class="text-end"><strong>6.260.000,00</strong></td></tr>
                                </tbody>
                            </table>
                        `);
                    } else if (block.key === 'attendance_summary') {
                        parts.push(`<small class="text-muted d-block mb-3">Approved Attendance: 26 hari / 208.00 jam</small>`);
                    } else if (block.key === 'signature_block' && profileMeta.showSignature) {
                        parts.push(`
                            <div class="text-end mt-4 mb-3">
                                <div>Hormat kami,</div><br><br>
                                <div>_________________________</div>
                                <small class="text-muted">HR / Finance</small>
                            </div>
                        `);
                    } else if (block.key === 'footer_note') {
                        parts.push(`<hr><small class="text-muted">${profileMeta.footerNote}</small>`);
                    }
                });
                return parts.join('');
            };

            $('#btnSaveLayout').on('click', function () {
                const layout = collectLayout().map(x => ({ key: x.key, enabled: x.enabled ? 1 : 0 }));
                $.ajax({
                    url: '{{ route('penggajian.slip_profiles.builder_save', ['id' => $profile->id]) }}',
                    type: 'POST',
                    data: { layout }
                }).done((resp) => {
                    Swal.fire('Success', resp?.message || 'Layout tersimpan', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan layout', 'error');
                });
            });

            $('#btnOpenPreview').on('click', function () {
                $('#fullPreviewContainer').html(buildFullPreviewHtml());
                fullPreviewModal.show();
            });

            $('#layoutList').on('change', '.item-enabled', renderPreview);
            renderPreview();
        });
    </script>
@endpush