@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('styles')
    <style>
        #qr-reader {
            width: 100%;
            max-width: 900px;
            min-height: 260px;
            margin: 0 auto;
        }

        #scannerModal .modal-dialog {
            max-width: 980px;
        }

        #scannerModal .modal-body {
            padding: 1rem 1.25rem;
        }

        #qr-reader__dashboard_section_swaplink {
            display: none !important;
        }

        .progress-material {
            transition: width 0.5s ease;
        }

        .bag-entry {
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .input-section {
            position: sticky;
            top: 70px;
            z-index: 10;
        }

        #formReceiveBag {
            --receive-control-height: 44px;
        }

        #formReceiveBag .receive-form-row .receive-field {
            display: flex;
            flex-direction: column;
        }

        #formReceiveBag .receive-form-row .receive-field>.form-label {
            min-height: 24px;
            margin-bottom: 0.45rem;
            display: flex;
            align-items: flex-end;
        }

        #formReceiveBag .receive-form-row .receive-field.receive-field-action>.form-label {
            visibility: hidden;
        }

        #formReceiveBag .receive-form-row .form-control,
        #formReceiveBag .receive-form-row .form-select,
        #formReceiveBag .receive-form-row .barcode-input-group .btn-scan-camera,
        #formReceiveBag .receive-form-row #btnSaveBag.btn-receive {
            height: var(--receive-control-height);
            min-height: var(--receive-control-height);
        }

        #formReceiveBag .receive-form-row .form-control,
        #formReceiveBag .receive-form-row .form-select {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        #formReceiveBag .receive-form-row .barcode-input-group {
            flex-wrap: nowrap;
        }

        #formReceiveBag .receive-form-row .barcode-input-group .btn-scan-camera {
            min-width: 52px;
            width: 52px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            line-height: 1;
        }

        #formReceiveBag .receive-form-row .barcode-input-group .btn-scan-camera i {
            font-size: 0.95rem;
        }

        #formReceiveBag .receive-form-row #btnSaveBag.btn-receive {
            min-width: 120px;
            padding: 0 1rem;
        }

        @media (max-width: 768px) {
            .btn-receive {
                width: 100%;
                padding: 0 12px;
                font-size: 1rem;
            }

            .form-control,
            .form-select {
                font-size: 16px !important;
                /* prevents iOS zoom */
            }

            #qr-reader {
                max-width: 100%;
                min-height: 200px;
            }

            #scannerModal .modal-dialog {
                max-width: 95vw;
                margin: 1rem auto;
            }
        }

        .bag-row-waiting td {
            background-color: #fff7e6 !important;
        }

        .bag-row-placed td {
            background-color: #f0fff4 !important;
        }

        .badge-soft-warning {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }

        .badge-soft-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
    </style>
@endpush

@php
    $formatBerat = function ($value) {
        if ($value === null || $value === '') {
            return '-';
        }

        $formatted = number_format((float) $value, 3, ',', '.');

        return rtrim(rtrim($formatted, '0'), ',');
    };
@endphp

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Penerimaan Barang'])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ route('trsinm.index') }}'"><i
                                class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        {{-- Header Info (readonly) --}}
        <div class="card shadow-sm mb-4">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h5 class="mb-1">
                            Penerimaan: {{ $batch->batch_id }}
                        </h5>
                        <div class="d-flex gap-3 text-sm text-muted flex-wrap">
                            <span>{{ $batch->vendor_name ?? 'Tanpa Vendor' }}</span>
                            <span>Tipe: {{ $batch->in_type_name ?? '-' }}</span>
                            <span>Rencana:
                                {{ $batch->planned_date ? \Carbon\Carbon::parse($batch->planned_date)->format('d/m/Y') : '-' }}</span>
                            <span>
                                Mode:
                                @if ($batch->receive_mode == 'GENERATE')
                                    <span class="badge bg-success">
                                        <i class="fas fa-qrcode me-1"></i>
                                        GENERATE
                                    </span>
                                @else
                                    <span class="badge bg-warning">
                                        <i class="fas fa-barcode me-1"></i>
                                        USE VENDOR ID
                                    </span>
                                @endif
                            </span>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        @php
                            $statusColors = [
                                'PLANNED' => 'bg-info',
                                'IN_PROGRESS' => 'bg-warning',
                                'RECEIVED' => 'bg-success',
                                'CANCELLED' => 'bg-danger',
                            ];
                        @endphp
                        <span class="badge {{ $statusColors[$batch->status] ?? 'bg-secondary' }} py-2 px-3"
                            style="font-size: 0.85rem;">
                            {{ $batch->status }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Progress Section --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header pb-0">
                <h6 class="mb-0"><i class="fas fa-tasks me-2"></i>Progress Penerimaan</h6>
            </div>
            <div class="card-body" id="progressSection">
                @foreach ($progress['plan_items'] as $item)
                    @php
                        $remaining = $item->qty_planned - $item->qty_received;
                        $pct = $item->qty_planned > 0 ? round(($item->qty_received / $item->qty_planned) * 100) : 0;
                        $progressColor = $pct >= 100 ? 'success' : ($pct > 0 ? 'info' : 'secondary');
                    @endphp
                    <div class="mb-3 progress-item" data-sku="{{ $item->sku_code }}">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="text-sm font-weight-bold">
                                {{ $item->sku_code }} - {{ $item->nama_material }}
                                @if ($item->color_name)
                                    <span class="text-xs text-muted">({{ $item->color_name }})</span>
                                @endif
                            </span>
                            <span class="text-sm">
                                <span class="qty-received">{{ $item->qty_received }}</span> /
                                {{ $item->qty_planned }}
                                <span class="text-xs text-muted">bag</span>
                                <span class="remaining-badge ms-1">
                                    @if ($remaining > 0)
                                        <span class="badge bg-warning text-white">sisa {{ $remaining }}</span>
                                    @elseif ($item->qty_received > $item->qty_planned)
                                        <span class="badge bg-danger">over +{{ abs($remaining) }}</span>
                                    @else
                                        <span class="badge bg-success">selesai</span>
                                    @endif
                                </span>
                            </span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar progress-material bg-{{ $progressColor }}" role="progressbar"
                                style="width: {{ min($pct, 100) }}%" data-planned="{{ $item->qty_planned }}">
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="mt-3 pt-3 border-top">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="font-weight-bold">Total Progress</span>
                        <span class="font-weight-bold text-primary" id="totalProgress">
                            {{ $progress['total_received'] }} / {{ $progress['total_planned'] }} bag
                            <!-- ({{ $progress['percentage'] }}%) -->
                        </span>
                    </div>
                    <div class="progress mt-1" style="height: 12px;">
                        <div class="progress-bar progress-material bg-{{ $progress['percentage'] >= 100 ? 'success' : 'primary' }}"
                            role="progressbar" style="width: {{ min($progress['percentage'], 100) }}%"
                            id="totalProgressBar">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Input Form --}}
        <div class="card shadow-sm mb-4 input-section">
            <div class="card-header pb-0">
                <h6 class="mb-0"><i class="fas fa-plus-circle me-2"></i>Input Bag Baru</h6>
            </div>
            <div class="card-body">
                @if (!$gray_area)
                    <div class="alert alert-warning" role="alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Gray Area belum dikonfigurasi. Silakan buat layout dengan flag "Gray Area" terlebih dahulu.
                    </div>
                @else
                    <form id="formReceiveBag">
                        <div class="row g-3 receive-form-row">
                            @if ($batch->receive_mode === 'USE_VENDOR_ID')
                                <div class="col-md-3 receive-field">
                                    <label class="form-label">QR/Barcode Vendor <span class="text-danger">*</span></label>
                                    <div class="input-group barcode-input-group">
                                        <input type="text" id="inputBarcode" class="form-control"
                                            placeholder="Scan atau ketik barcode..." autofocus required>
                                        <div>
                                            <button type="button"
                                                class="btn btn-outline-secondary border-1 btn-scan-camera"
                                                id="btnScanCamera" title="Scan dari Kamera">
                                                <i class="fas fa-camera"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="inputQty" value="1">
                            @endif

                            <div class="col-md-{{ $batch->receive_mode === 'USE_VENDOR_ID' ? '3' : '3' }} receive-field">
                                <label class="form-label">Material <span class="text-danger">*</span></label>
                                <select id="inputSku" class="form-select" required>
                                    <option value="">Pilih Material</option>
                                    @foreach ($progress['plan_items'] as $item)
                                        @php
                                            $remaining = $item->qty_planned - $item->qty_received;
                                        @endphp
                                        <option value="{{ $item->sku_code }}" data-remaining="{{ $remaining }}"
                                            data-planned="{{ $item->qty_planned }}"
                                            data-received="{{ $item->qty_received }}"
                                            data-nama-material="{{ $item->nama_material }}"
                                            data-berat="{{ $item->berat_per_bag ?? '' }}">
                                            {{ $item->sku_code }} - {{ $item->nama_material }}
                                            @if ($item->color_name)
                                                ({{ $item->color_name }})
                                            @endif
                                            {{-- [sisa: {{ $remaining }}] --}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2 receive-field">
                                <label class="form-label">Berat per Bag (kg) <span class="text-danger">*</span></label>
                                <input type="number" id="inputBerat" class="form-control" step="0.001" min="0.001"
                                    placeholder="0.000" required>
                            </div>

                            @if ($batch->receive_mode === 'GENERATE')
                                <div class="col-md-2 receive-field">
                                    <label class="form-label">Jumlah Bag <span class="text-danger">*</span></label>
                                    <input type="number" id="inputQty" class="form-control" min="1"
                                        max="100" value="1" placeholder="1" required>
                                </div>
                            @endif

                            <div class="col-md-{{ $batch->receive_mode === 'USE_VENDOR_ID' ? '2' : '2' }} receive-field">
                                <label class="form-label">Catatan</label>
                                <input type="text" id="inputNotes" class="form-control" placeholder="Opsional...">
                            </div>

                            <div class="col-md-2 receive-field receive-field-action">
                                <label class="form-label">Aksi</label>
                                <button type="submit" class="btn btn-success btn-receive my-0" id="btnSaveBag">
                                    Simpan
                                </button>
                            </div>
                        </div>
                    </form>

                    {{-- Feedback Area --}}
                    <div id="feedbackArea" class="mt-3" style="display: none;">
                        <div class="alert mb-0" id="feedbackAlert">
                            <span id="feedbackMessage"></span>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Received Bags List --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header pb-0">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="fas fa-box me-2"></i>
                        Bag yang Sudah Diterima
                    </h6>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0" id="tableReceivedBags">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="ps-3">No</th>
                                <th>
                                    {{ $batch->receive_mode === 'USE_VENDOR_ID' ? 'QR/Barcode Vendor' : 'Bag ID' }}
                                </th>
                                <th>Material</th>
                                <th class="text-center">Berat per Bag (kg)</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Waktu</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="receivedBagsBody">
                            @foreach ($bags as $index => $bag)
                                @php
                                    $isPending = $bag->status === 'PENDING';
                                    $isWaitingApproval = !empty($bag->pending_approval);
                                    $isPlaced = !empty($bag->placed_at) || $bag->status !== 'PENDING';

                                    $canDeleteBag = $isPending && !$isPlaced && !$isWaitingApproval;

                                    $rowClass = '';

                                    $statusText = 'Belum Layouting';
                                    $statusClass = 'bg-light text-secondary';

                                    if ($isWaitingApproval) {
                                        $rowClass = 'bag-row-waiting';
                                        $statusText = 'Menunggu Approval Layout';
                                        $statusClass = 'badge-soft-warning';
                                    } elseif ($isPlaced) {
                                        $rowClass = 'bag-row-placed';
                                        $statusText = 'Sudah Layouting';
                                        $statusClass = 'badge-soft-success';
                                    }

                                    $layoutInfo = $bag->nama_layout ?? ($bag->current_layout_id ?? '-');
                                @endphp

                                <tr id="bag-row-{{ $bag->bag_id }}" class="{{ $rowClass }}">
                                    <td class="ps-3 text-s">
                                        {{ $index + 1 }}
                                    </td>

                                    <td title="{{ $bag->bag_id }}">
                                        <span class="text-s font-weight-bold">
                                            {{ $bag->barcode_value ?: '-' }}
                                        </span>
                                    </td>

                                    <td>
                                        <span class="text-s">{{ $bag->sku_code }} - {{ $bag->nama_material }}</span>
                                    </td>

                                    <td class="text-center"
                                        data-export="{{ $bag->berat !== null ? (float) $bag->berat : '' }}"
                                        data-order="{{ $bag->berat !== null ? (float) $bag->berat : 0 }}">
                                        <span class="text-s font-weight-bold">
                                            {{ $formatBerat($bag->berat) }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <div class="d-flex flex-column align-items-center gap-1">
                                            <span class="badge {{ $statusClass }}">
                                                {{ $statusText }}
                                            </span>

                                            @if ($isPlaced || $isWaitingApproval)
                                                <span class="text-xs text-muted">
                                                    {{ $layoutInfo }}
                                                </span>
                                            @endif
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <span class="text-s text-muted">
                                            {{ \Carbon\Carbon::parse($bag->created_at)->format('H:i:s') }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        @if ($canDeleteBag)
                                            <button class="btn btn-link text-danger p-0 btn-delete-bag"
                                                data-bag-id="{{ $bag->bag_id }}" title="Hapus bag ini">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        @else
                                            <span class="text-s text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    @if ($bags->isEmpty())
                        <div class="text-center text-muted py-4" id="noBagsMessage">
                            <i class="fas fa-box-open fa-2x mb-2"></i>
                            <p class="mb-0">Belum ada bag yang diterima. Mulai scan/input di form atas.</p>
                        </div>
                    @endif
                </div>
                <div class="col-lg mt-2">
                    <div class="nav-wrapper" id="noted">
                        <code>
                            Note :
                            <i aria-hidden="true" style="color: #ffc107;" class="fas fa-circle"></i>
                            Menunggu Approval Layout

                            &nbsp;&nbsp;

                            <i aria-hidden="true" style="color: #8fd19e;" class="fas fa-circle"></i>
                            Sudah layouting / tidak bisa dihapus
                        </code>
                    </div>
                </div>
            </div>
        </div>

        {{-- Action Buttons --}}
        <div class="card shadow-sm mb-4">
            <div class="card-body p-3">
                <div class="d-flex justify-content-start align-items-center gap-2 flex-wrap">
                    <a href="{{ route('trsinm.show', $batch->batch_id) }}" class="btn btn-secondary mb-0">
                        <i class="fas fa-save me-1"></i>
                        <span class="font-weight-bold">Simpan & Kembali</span>
                    </a>

                    <form action="{{ route('trsinm.complete', $batch->batch_id) }}" method="POST" id="formComplete"
                        class="mb-0">
                        @csrf
                        <button type="submit" class="btn btn-success mb-0" id="btnComplete">
                            <i class="fas fa-check-circle me-1"></i>
                            <span class="font-weight-bold">Selesai</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Scanner Modal --}}
    <div class="modal fade" id="scannerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-qrcode me-2"></i>Scan Barcode</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info" role="alert">
                        <i class="fas fa-info-circle me-2"></i>
                        Arahkan kamera ke barcode/QR code. Pastikan pencahayaan cukup.
                    </div>
                    <div id="qr-reader"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- QR Print Modal (for GENERATE mode) --}}
    <div class="modal fade" id="qrPrintModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-qrcode me-2"></i>QR Code Bag</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="qrImage" src="" alt="QR Code" style="width: 200px; height: 200px;"
                        class="mb-3">
                    <div>
                        <h5 class="font-weight-bold" id="qrBagId"></h5>
                        <p class="text-muted" id="qrBarcode"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-primary" id="btnPrintQr">
                        <i class="fas fa-print me-1"></i> Print
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('addjs')
    @include('js.trsinm-receive')
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#tableReceivedBags')) {
                $('#tableReceivedBags').DataTable().destroy();
            }

            $('#tableReceivedBags').DataTable({
                paging: true,
                info: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                order: [
                    [0, 'asc']
                ],
                buttons: [
                    @if (($authorize->excel ?? '0') == '1')
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                            title: 'Penerimaan Barang - {{ $batch->batch_id }}',
                            exportOptions: {
                                columns: ':not(:last-child)',
                                format: {
                                    body: function(data, row, column, node) {
                                        // Kolom Berat Per Bag ada di index 3
                                        if (column === 3) {
                                            const rawValue = node ? node.getAttribute(
                                                'data-export') : null;

                                            if (rawValue !== null && rawValue !== '') {
                                                return rawValue;
                                            }

                                            return $('<div>').html(data).text().trim()
                                                .replace(/\./g, '')
                                                .replace(',', '.');
                                        }

                                        return $('<div>').html(data).text().trim();
                                    }
                                }
                            }
                        },
                    @endif
                    @if (($authorize->pdf ?? '0') == '1')
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                            title: 'Penerimaan Barang - {{ $batch->batch_id }}',
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: {
                                columns: ':not(:last-child)'
                            },
                            customize: function(doc) {
                                doc.styles.tableHeader.fillColor = '#00b7bd';
                            }
                        },
                    @endif
                ],
                initComplete: function() {
                    var searchBarHtml = `
                                    <div class="dataTables_filter d-flex justify-content-end">
                                        <input type="text" class="form-control" placeholder="Search..." id="customSearchReceive">
                                    </div>
                                `;
                    $('.dataTables_filter').remove();
                    $(searchBarHtml).insertAfter('.dt-buttons');
                    $('#customSearchReceive').on('keyup', function() {
                        $('#tableReceivedBags').DataTable().search(this.value).draw();
                    });
                }
            });

            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');
        });
    </script>
@endpush