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

        /* 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;
                /* Prevents iOS zoom */
                padding: 0.5rem 0.75rem;
            }

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

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

            .table th,
            .table td {
                padding: 0.5rem 0.25rem;
                font-size: 0.75rem;
            }

            .table .text-sm {
                font-size: 0.75rem !important;
            }

            .table .text-xs {
                font-size: 0.65rem !important;
            }

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

            .table-responsive {
                max-height: 350px !important;
            }

            /* Hide some columns on mobile */
            .table th:nth-child(4),
            .table td:nth-child(4) {
                display: none;
            }
        }

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

            .d-flex.justify-content-between {
                flex-direction: column;
                gap: 0.5rem;
            }

            #btnClearAll {
                width: 100%;
                margin-top: 0.5rem;
            }
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Pengeluaran 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('trsout.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('trsout.store') }}" method="POST" id="formPengeluaran">
            @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 Bag untuk Pengeluaran
                            </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">
                                    <input type="text" id="manualBarcode" class="form-control"
                                        placeholder="Scan atau ketik barcode..." autofocus>
                                    <button type="button" class="btn btn-primary mb-0" id="btnAddBarcode">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </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="btnOpenScanner">
                                    <i class="fas fa-camera me-2"></i> Buka Kamera Scanner
                                </button>
                            </div>

                            {{-- Camera Preview --}}
                            <div id="scannerContainer" 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="btnStopScanner">
                                        <i class="fas fa-stop me-1"></i> Stop Scanner
                                    </button>
                                </div>
                            </div>

                            <hr class="my-4">

                            {{-- Document Info --}}
                            <div class="mb-3">
                                <label class="form-label">Tipe Pengeluaran <span class="text-danger">*</span></label>
                                <select name="out_type_id" id="out_type_id" class="form-select select2-basic" required>
                                    <option value="">Pilih Tipe Pengeluaran</option>
                                    @foreach ($out_types as $type)
                                        <option value="{{ $type->out_type_id }}"
                                            {{ old('out_type_id') == $type->out_type_id ? 'selected' : '' }}>
                                            {{ $type->out_type_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">PIC Pengirim</label>
                                    <select name="pic_pengirim_id" id="pic_pengirim_id" class="form-select select2-basic">
                                        <option value="">Pilih PIC Pengirim</option>
                                        @foreach ($picPengirimOptions as $pic)
                                            <option value="{{ $pic->id_pic_out }}"
                                                {{ old('pic_pengirim_id') == $pic->id_pic_out ? 'selected' : '' }}>
                                                {{ $pic->nama_pic_out }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">PIC Penerima</label>
                                    <select name="pic_penerima_id" id="pic_penerima_id" class="form-select select2-basic">
                                        <option value="">Pilih PIC Penerima</option>
                                        @foreach ($picPenerimaOptions as $pic)
                                            <option value="{{ $pic->id_pic_out }}"
                                                {{ old('pic_penerima_id') == $pic->id_pic_out ? 'selected' : '' }}>
                                                {{ $pic->nama_pic_out }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Shift</label>
                                    <select name="shift" id="shift" class="form-select select2-basic">
                                        <option value="">Pilih Shift</option>
                                        @foreach ($shiftOptions as $shift)
                                            <option value="{{ $shift->value }}"
                                                {{ old('shift') == $shift->value ? 'selected' : '' }}>
                                                {{ $shift->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Group</label>
                                    <select name="group" id="group" class="form-select select2-basic">
                                        <option value="">Pilih Group</option>
                                        @foreach ($groupOptions as $group)
                                            <option value="{{ $group->value }}"
                                                {{ old('group') == $group->value ? 'selected' : '' }}>
                                                {{ $group->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Vendor (shown only for RETURN_VENDOR) --}}
                            <div class="mb-3" id="vendorSection" style="display: none;">
                                <label class="form-label">Vendor <span class="text-danger">*</span></label>
                                <select name="vendor_id" id="vendor_id" class="form-select select2-basic">
                                    <option value="">Pilih Vendor</option>
                                    @foreach ($vendors as $vendor)
                                        <option value="{{ $vendor->vendor_id }}"
                                            {{ old('vendor_id') == $vendor->vendor_id ? 'selected' : '' }}>
                                            {{ $vendor->vendor_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Tanggal Pengeluaran <span class="text-danger">*</span></label>
                                <input type="date" name="out_date" id="out_date" class="form-control"
                                    value="{{ old('out_date', date('Y-m-d')) }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Catatan (Opsional)</label>
                                <textarea name="remarks" class="form-control" rows="2" placeholder="Catatan pengeluaran...">{{ old('remarks') }}</textarea>
                            </div>

                            <div class="d-grid">
                                <button type="submit" class="btn btn-success btn-lg" id="btnSubmit" disabled>
                                    Keluarkan <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>
                                <div>
                                    <span class="badge bg-info me-2" id="totalBerat">0.00 kg</span>
                                    <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>
                        <div class="card-body">
                            {{-- Empty State --}}
                            <div id="emptyState" class="text-center py-5">
                                <i class="fas fa-box-open 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 pengeluaran</p>
                            </div>

                            {{-- Scanned Bags List --}}
                            <div id="bagListContainer" style="display: none;">
                                <div class="table-responsive" style="max-height: 450px; overflow-y: auto;">
                                    <table class="table table-hover align-middle mb-0">
                                        <thead class="sticky-top thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>Bag</th>
                                                <th>Material</th>
                                                <th class="text-center">Berat</th>
                                                <th class="text-center">Lokasi</th>
                                                <th class="text-center" style="width: 50px;"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="bagTableBody">
                                            {{-- Dynamic content from JS --}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Hidden inputs for bags --}}
            <div id="bagInputsContainer"></div>
        </form>
    </div>
@endsection

@push('js')
    @include('js.trsout')

    <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();
                }
            });
        });
    </script>
@endpush