@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;
        }

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

        .scanned-bag-item {
            transition: all 0.3s ease;
        }

        .scanned-bag-item:hover {
            background-color: #f8f9fa;
        }

        .scanned-bag-item.removing {
            opacity: 0;
            transform: translateX(-100%);
        }

        .autocomplete-item:hover {
            background-color: #e9ecef;
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .container-fluid {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            .card-header h6 {
                font-size: 0.9rem;
            }

            .btn {
                padding: 0.5rem 0.75rem;
                font-size: 0.85rem;
            }

            .btn-lg {
                padding: 0.65rem 1rem;
                font-size: 0.95rem;
            }

            .form-control,
            .form-select {
                font-size: 16px !important;
                padding: 0.5rem 0.75rem;
            }

            .input-group .btn {
                padding: 0.5rem 1rem;
            }

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

            .badge {
                font-size: 0.65rem;
                padding: 0.3em 0.45em;
            }

            .list-group-item {
                padding: 0.75rem;
            }

            .list-group-item h6 {
                font-size: 0.85rem;
            }

            .list-group-item small {
                font-size: 0.7rem;
            }
        }

        @media (max-width: 576px) {
            .card-body {
                padding: 1rem;
            }

            .card-header {
                padding: 0.75rem 1rem;
            }

            h5,
            h6 {
                font-size: 0.95rem;
            }

            .fa-4x {
                font-size: 2.5rem;
            }

            .list-group-item .d-flex {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 0.5rem;
            }

            .list-group-item .d-flex:last-child {
                width: 100%;
                justify-content: space-between;
                flex-direction: row;
            }
        }
    </style>
@endpush

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

    <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('trspnd.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">

        <form action="{{ route('trspnd.bulk.store') }}" method="POST" id="formBulkPerpindahan">
            @csrf

            <div class="row">
                {{-- Left Column: Scan Area --}}
                <div class="col-lg-5 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header pb-0">
                            <h6 class="mb-0">
                                Scan Multiple Bags
                            </h6>
                        </div>
                        <div class="card-body">
                            {{-- Manual Input --}}
                            <div class="mb-4">
                                <label class="form-label">Input Manual Bag ID / Barcode</label>
                                <div class="input-group position-relative">
                                    <input type="text" id="bulkBarcodeInput" class="form-control"
                                        placeholder="Scan atau ketik barcode..." autocomplete="off" autofocus>
                                    <button type="button" class="btn btn-primary mb-0" id="btnAddBag">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                    <div id="autocompleteDropdown"
                                        class="position-absolute w-100 bg-white border rounded shadow-sm"
                                        style="top: 100%; left: 0; z-index: 1050; display: none; max-height: 300px; overflow-y: auto;">
                                    </div>
                                </div>
                                <small class="text-muted">Tekan Enter untuk menambahkan ke daftar</small>
                            </div>

                            <div class="text-center mb-3">
                                <span class="text-muted">— atau —</span>
                            </div>

                            {{-- QR Scanner Button --}}
                            <div class="d-grid">
                                <button type="button" class="btn btn-outline-primary" id="btnOpenBulkScanner">
                                    <i class="fas fa-camera me-2"></i> Buka Kamera Scanner
                                </button>
                            </div>

                            {{-- Camera Preview --}}
                            <div id="bulkScannerContainer" class="mt-4" style="display: none;">
                                <div id="qr-reader"></div>
                                <div class="text-center mt-2">
                                    <button type="button" class="btn btn-sm btn-danger" id="btnStopBulkScanner">
                                        <i class="fas fa-stop me-1"></i> Stop Scanner
                                    </button>
                                </div>
                            </div>

                            <hr class="my-4">

                            {{-- Transfer Destination --}}
                            <div class="mb-3">
                                <label class="form-label">Layout Tujuan <span class="text-danger">*</span></label>
                                <select name="to_layout_id" id="bulkToLayoutSelect" class="form-select select2-basic"
                                    required>
                                    <option value="">Pilih Layout Tujuan</option>
                                    @foreach ($layouts as $layout)
                                        @php
                                            $occupiedBags = (int) ($layout->occupied_bags ?? 0);
                                            $pendingLayoutApprovals = (int) ($layout->pending_layout_approvals ?? 0);

                                            $hasBaris = trim((string) ($layout->baris ?? '')) !== '';

                                            // Kalau punya baris = slot detail, maka kalau sudah isi/pending harus disable.
                                            // Kalau tidak punya baris = layout general, boleh banyak bag.
                                            $isLayoutUsed =
                                                $hasBaris && ($occupiedBags > 0 || $pendingLayoutApprovals > 0);
                                        @endphp

                                        <option value="{{ $layout->id_layout }}"
                                            data-is-gray-area="{{ (int) $layout->is_gray_area }}"
                                            data-has-baris="{{ $hasBaris ? 1 : 0 }}"
                                            data-occupied-bags="{{ $occupiedBags }}"
                                            data-pending-layout-approvals="{{ $pendingLayoutApprovals }}"
                                            @disabled($isLayoutUsed)>

                                            {{ $layout->nama_layout }}{{ $hasBaris ? ' - BARIS ' . $layout->baris : '' }}

                                            @if ($layout->is_gray_area)
                                                (Gray Area)
                                            @elseif ($hasBaris && $pendingLayoutApprovals > 0)
                                                (Menunggu Approval)
                                            @elseif ($hasBaris && $occupiedBags > 0)
                                                (Terisi)
                                            @elseif (!$hasBaris && ($occupiedBags > 0 || $pendingLayoutApprovals > 0))
                                                (Isi: {{ $occupiedBags }}
                                                Bag{{ $pendingLayoutApprovals > 0 ? ', Pending: ' . $pendingLayoutApprovals : '' }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Catatan (Opsional)</label>
                                <textarea name="notes" class="form-control" rows="2" placeholder="Catatan perpindahan..."></textarea>
                            </div>

                            @php
                                $approverCount = $approvers->count();
                                $defaultApproverId = old('approver_id');

                                if (!$defaultApproverId && $approverCount === 1) {
                                    $defaultApproverId = $approvers->first()->id;
                                }
                            @endphp

                            <div class="mb-3" id="approverSection">
                                <label class="form-label">
                                    Approver <span class="text-danger">*</span>
                                </label>

                                <select name="approver_id" id="approverSelect" class="form-select select2-basic" required>
                                    @if ($approverCount > 1)
                                        <option value="">Pilih Approver</option>
                                    @endif

                                    @foreach ($approvers as $approver)
                                        <option value="{{ $approver->id }}"
                                            {{ (string) $defaultApproverId === (string) $approver->id ? 'selected' : '' }}>
                                            {{ trim(($approver->firstname ?? '') . ' ' . ($approver->lastname ?? '')) ?: $approver->username }}
                                            ({{ $approver->username }})
                                        </option>
                                    @endforeach
                                </select>

                                @if ($approverCount <= 0)
                                    <div class="alert alert-danger text-white py-2 mt-2 mb-0">
                                        Belum ada approver aktif.
                                    </div>
                                @endif
                            </div>

                            <div class="d-grid">
                                <button type="submit" class="btn btn-success btn-lg mb-0" id="btnBulkSubmit" disabled>
                                    Pindahkan <span id="totalBagsCount">0</span> Bag
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Right Column: Scanned Bags List --}}
                <div class="col-lg-7 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">
                                    Daftar Bag (<span id="scannedCount">0</span>)
                                </h6>
                                <button type="button" class="btn btn-sm btn-outline-danger" id="btnClearAll"
                                    style="display: none;">
                                    <i class="fas fa-trash me-1"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            {{-- Empty State --}}
                            <div id="bulkEmptyState" class="text-center py-5">
                                <i class="fas fa-layer-group fa-4x text-muted mb-3"></i>
                                <h5 class="text-muted">Belum Ada Bag</h5>
                                <p class="text-muted mb-0">Scan barcode untuk menambahkan bag ke daftar</p>
                            </div>

                            {{-- Scanned Bags List --}}
                            <div id="scannedBagsList" class="list-group"
                                style="display: none; max-height: 500px; overflow-y: auto;">
                                {{-- Items will be added here --}}
                            </div>

                            {{-- Summary --}}
                            <div id="bulkSummary" class="mt-3 p-3 bg-light rounded" style="display: none;">
                                <div class="row text-center">
                                    <div class="col-4">
                                        <div class="h4 mb-0" id="summaryTotalBags">0</div>
                                        <small class="text-muted">Total Bag</small>
                                    </div>
                                    <div class="col-4">
                                        <div class="h4 mb-0" id="summaryTotalBerat">0</div>
                                        <small class="text-muted">Total Berat (kg)</small>
                                    </div>
                                    <div class="col-4">
                                        <div class="h4 mb-0" id="summaryMaterials">0</div>
                                        <small class="text-muted">Jenis Material</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('addjs')
    @include('js.trspnd-bulk')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    html: '{!! implode('<br>', $errors->all()) !!}',
                    confirmButtonColor: '#028284'
                });
            @endif
        });
        $(document).ready(function() {
            $('.select2-basic').select2({
                width: '100%',
                allowClear: false,
                placeholder: function() {
                    return $(this).find('option:first').text();
                },
                templateResult: function(data) {
                    if (!data.id) {
                        return data.text;
                    }

                    return $('<span></span>').text(data.text);
                },
                templateSelection: function(data) {
                    return data.text;
                }
            });

            function styleDisabledSelect2Options() {
                $('.select2-results__option[aria-disabled="true"], .select2-results__option--disabled').each(
                    function() {
                        $(this).css({
                            'background-color': '#e9ecef',
                            'color': '#9ca3af',
                            'cursor': 'not-allowed'
                        });
                    });
            }

            $('.select2-basic').on('select2:open', function() {
                setTimeout(styleDisabledSelect2Options, 50);
                setTimeout(styleDisabledSelect2Options, 150);
                setTimeout(styleDisabledSelect2Options, 300);

                $(document).off('keyup.select2-disabled-bg').on('keyup.select2-disabled-bg',
                    '.select2-search__field',
                    function() {
                        setTimeout(styleDisabledSelect2Options, 50);
                        setTimeout(styleDisabledSelect2Options, 150);
                    });
            });

        });
    </script>
@endpush