@extends('layouts.app')

@section('title', 'Data Label Barcode')

@section('content')
    @php
        $printAll = array_filter(['all' => $batch === '' ? 1 : null, 'batch' => $batch ?: null, 'q' => $q ?: null]);
    @endphp

    <div class="page-head">
        <div>
            <h1>Data Label Barcode</h1>
            <p>
                @if ($batch !== '' || $q !== '')
                    {{ number_format($labels->total()) }} baris tampil &middot;
                    {{ number_format($filteredQty) }} keping siap cetak
                    <span class="helptext">(dari {{ number_format($totalLabels) }} label tersimpan)</span>
                @else
                    {{ number_format($totalLabels) }} label tersimpan &middot;
                    total {{ number_format($totalQty) }} keping siap cetak
                @endif
            </p>
        </div>
        <div class="page-head__actions">
            @if ($batch !== '')
                <a class="btn btn--primary" target="_blank" href="{{ route('labels.print', ['batch' => $batch]) }}">Cetak Hasil Upload</a>
                <a class="btn" href="{{ route('labels.index') }}">Lihat Semua</a>
            @endif
            
            <button class="btn btn--primary" type="submit" form="bulk-form">Cetak yang dipilih</button>
            
            <button class="btn btn--danger" type="button" onclick="document.getElementById('delete-form').submit()">Hapus yang dipilih</button>
            
            @if ($totalLabels > 0)
                <button class="btn btn--danger" type="button" onclick="if(confirm('PERINGATAN: Ini akan menghapus SEMUA {{ number_format($totalLabels) }} label!\n\nTindakan ini tidak bisa dibatalkan!\n\nApakah Anda yakin?')) document.getElementById('delete-all-form').submit()">Hapus Semua Label</button>
            @endif
            
            <a class="btn" href="{{ route('labels.import.form') }}">Import Excel</a>
            <a class="btn" href="{{ route('labels.export', array_filter(['q' => $q ?: null, 'batch' => $batch ?: null])) }}">Export Excel</a>
            <a class="btn btn--primary" href="{{ route('labels.create') }}">+ Label Baru</a>
        </div>
    </div>

    @if ($batch !== '')
        <div class="alert alert--ok" style="padding:12px 16px">
            <strong>✓ Upload berhasil:</strong>
            {{ number_format($labels->total()) }} kode seri sudah masuk dan siap dicetak ({{ number_format($filteredQty) }} keping).
        </div>
    @endif

    <div class="card">
        <form class="toolbar" method="get" action="{{ route('labels.index') }}">
            @if ($batch !== '')
                <input type="hidden" name="batch" value="{{ $batch }}">
            @endif
            <input type="text" name="q" value="{{ $q }}" placeholder="Cari kode seri, isi barcode, perusahaan, atau produk">
            <button class="btn" type="submit">Cari</button>
            @if ($q !== '' || $batch !== '')
                <a class="btn" href="{{ route('labels.index') }}">Reset</a>
            @endif
            <a class="btn btn--primary" style="margin-left:auto"
               href="{{ route('labels.print', $printAll) }}" target="_blank">
                {{ $batch !== '' || $q !== '' ? 'Cetak semua yang tampil' : 'Cetak semua label' }}
            </a>
        </form>

        @if ($labels->isEmpty())
            <div class="empty" style="text-align:center; padding:60px 20px">
                <p style="font-size:16px; margin-bottom:20px">
                    Belum ada data label. 
                    <a href="{{ route('labels.import.form') }}" style="color:#2563eb; font-weight:600">Import dari Excel</a> atau 
                    <a href="{{ route('labels.create') }}" style="color:#2563eb; font-weight:600">buat satu per satu</a>.
                </p>
            </div>
        @else
            <form id="bulk-form" method="get" action="{{ route('labels.print') }}" target="_blank">
                <table>
                    <thead>
                    <tr>
                        <th style="width:34px"><input type="checkbox" id="check-all" aria-label="Pilih semua"></th>
                        <th>KODE SERI</th>
                        <th style="width:80px">TOTAL</th>
                        <th style="width:80px">PECAHAN</th>
                        <th>KET</th>
                        <th>ISI BARCODE</th>
                        <th>TEKS LABEL</th>
                        <th style="width:90px">TIPE</th>
                        <th style="width:70px">QTY</th>
                        <th style="width:200px"></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($labels as $label)
                        <tr>
                            <td><input type="checkbox" name="ids[]" value="{{ $label->id }}" class="row-check"
                                       aria-label="Pilih {{ $label->barcode_value }}"></td>
                            <td class="mono"><strong>{{ $label->item_code }}</strong></td>
                            <td class="num">{{ $label->total ? number_format($label->total) : '—' }}</td>
                            <td class="num">{{ $label->pecahan ? number_format($label->pecahan) : '—' }}</td>
                            <td class="truncate" title="{{ $label->notes }}">{{ $label->notes }}</td>
                            <td class="mono" title="{{ $label->barcode_value }}">{{ $label->barcode_value }}</td>
                            <td>{{ $label->title }}</td>
                            <td><span class="pill">{{ $label->barcode_type }}</span></td>
                            <td class="num"><strong>{{ number_format($label->qty) }}</strong></td>
                            <td>
                                <div class="row-actions">
                                    <a class="btn btn--sm" target="_blank"
                                       href="{{ route('labels.print', ['ids' => [$label->id]]) }}">Cetak</a>
                                    <a class="btn btn--sm" target="_blank"
                                       href="{{ route('labels.svg', $label) }}">SVG</a>
                                    <a class="btn btn--sm" href="{{ route('labels.edit', $label) }}">Ubah</a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </form>
            
            {{-- Hidden forms for delete actions --}}
            <form method="post" action="{{ route('labels.bulk-destroy') }}" id="delete-form" style="display:none"
                  onsubmit="return confirm('Hapus label yang dipilih? Tindakan ini tidak bisa dibatalkan.')">
                @csrf
                @method('DELETE')
                <div id="delete-inputs"></div>
            </form>
            
            @if ($totalLabels > 0)
                <form method="post" action="{{ route('labels.destroy-all') }}" id="delete-all-form" style="display:none">
                    @csrf
                    @method('DELETE')
                </form>
            @endif

            <div class="pagination">{{ $labels->links() }}</div>
        @endif
    </div>

    @push('head')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var all = document.getElementById('check-all');
                var boxes = Array.prototype.slice.call(document.querySelectorAll('.row-check'));

                if (all) {
                    all.addEventListener('change', function () {
                        boxes.forEach(function (b) { b.checked = all.checked; });
                    });
                }

                var deleteForm = document.getElementById('delete-form');
                if (deleteForm) {
                    deleteForm.addEventListener('submit', function (e) {
                        var container = document.getElementById('delete-inputs');
                        container.innerHTML = '';
                        var selected = boxes.filter(function (b) { return b.checked; });

                        if (selected.length === 0) {
                            e.preventDefault();
                            alert('Pilih minimal satu label dulu.');
                            return;
                        }

                        selected.forEach(function (b) {
                            var input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = 'ids[]';
                            input.value = b.value;
                            container.appendChild(input);
                        });
                    });
                }
            });
        </script>
    @endpush
@endsection