@extends('layout.app')
@section('title', 'Create Stock Inward')

@push('header_script')
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.css')}}">
    <link rel="stylesheet" href="{{asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        /* Card and Container Layout */
        .si-card {
            background: #ffffff;
            border: 1.5px solid #cbd5e1;
            border-radius: 12px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
            margin-bottom: 24px;
            overflow: hidden;
        }
        .si-card-header {
            padding: 16px 22px;
            background: #ffffff;
            border-bottom: 1.5px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .si-card-title {
            font-size: 15px;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .si-card-title i {
            font-size: 18px;
            color: #f97316;
        }
        .si-card-body {
            padding: 24px;
        }

        /* Modern Segmented Pill Switch */
        .segmented-nav {
            display: inline-flex;
            background: #f1f5f9;
            padding: 4px;
            border-radius: 10px;
            border: 1.5px solid #e2e8f0;
            gap: 4px;
            margin-bottom: 24px;
        }
        .segmented-nav .tab-btn {
            border: none;
            background: transparent;
            color: #64748b;
            font-size: 13.5px;
            font-weight: 600;
            padding: 8px 20px;
            border-radius: 7px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .segmented-nav .tab-btn:hover {
            color: #0f172a;
        }
        .segmented-nav .tab-btn.active {
            background: #ffffff;
            color: #f97316;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        /* Labels & Badges */
        .proto-label {
            font-size: 12px;
            font-weight: 600;
            color: #475569;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .tag-auto {
            background: #ecfdf5;
            color: #059669;
            border: 1px solid #a7f3d0;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 20px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .tag-req {
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 20px;
            font-weight: 600;
        }
        
        /* Modern Inputs */
        .proto-input, .proto-select {
            width: 100%;
            border: 1.5px solid #cbd5e1;
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 13.5px;
            color: #0f172a;
            transition: all 0.2s ease;
            background-color: #ffffff;
        }
        .proto-input:focus, .proto-select:focus {
            outline: none;
            border-color: #f97316;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
        }
        .proto-input.readonly {
            background-color: #f8fafc;
            color: #334155;
            font-weight: 600;
            border-color: #e2e8f0;
        }

        /* Select2 Modernization */
        .select2.select2-container {
            width: 100% !important;
        }
        .select2-container .select2-selection--single {
            height: 38px !important;
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 8px !important;
            padding: 4px 8px !important;
            background-color: #ffffff !important;
            display: flex !important;
            align-items: center !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 28px !important;
            color: #0f172a !important;
            font-size: 13.5px !important;
            padding-left: 4px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
            right: 8px !important;
        }
        .select2-container--default.select2-container--open .select2-selection--single,
        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #f97316 !important;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
        }
        .select2-dropdown {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 8px !important;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
            overflow: hidden;
            z-index: 1060 !important;
        }
        .select2-search--dropdown {
            padding: 8px !important;
        }
        .select2-search--dropdown .select2-search__field {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 6px !important;
            padding: 6px 10px !important;
            outline: none !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        .select2-search--dropdown .select2-search__field:focus {
            border-color: #f97316 !important;
        }
        .select2-results__option {
            padding: 8px 12px !important;
            font-size: 13.5px !important;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #f97316 !important;
            color: #ffffff !important;
        }

        /* Item Entry Box */
        .item-entry-wrapper {
            border: 1.5px solid #cbd5e1;
            border-radius: 10px;
            overflow: hidden;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
        }
        .item-entry-header {
            background: #f8fafc;
            padding: 12px 18px;
            border-bottom: 1.5px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .item-table {
            width: 100%;
            font-size: 13px;
            border-collapse: collapse;
        }
        .item-table th {
            background-color: #f1f5f9;
            color: #475569;
            font-size: 11.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 10px 12px;
            border-bottom: 1.5px solid #e2e8f0;
        }
        .item-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
        }
        .item-table tr:last-child td {
            border-bottom: none;
        }
        .item-table input {
            border: 1.5px solid #cbd5e1;
            border-radius: 6px;
            padding: 5px 8px;
            font-size: 13px;
            transition: all 0.2s;
        }
        .item-table input:focus {
            outline: none;
            border-color: #f97316;
            box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
        }
        .item-table .remove-row {
            font-size: 18px;
            color: #94a3b8;
            cursor: pointer;
            transition: color 0.2s;
        }
        .item-table .remove-row:hover {
            color: #ef4444;
        }

        /* SKU Trigger Pill */
        .open-sku-modal {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-decoration: none !important;
            margin-top: 4px;
            transition: all 0.2s;
            background: #fef2f2;
            border: 1px solid #fecaca;
        }
        .open-sku-modal:hover {
            filter: brightness(0.95);
        }

        /* Add Item Button Bar */
        .btn-proto-add {
            background: #ffffff;
            color: #f97316;
            border: none;
            border-top: 1.5px dashed #cbd5e1;
            width: 100%;
            padding: 11px;
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .btn-proto-add:hover {
            background: #fff7ed;
            color: #ea580c;
        }

        /* Summary Footer */
        .item-entry-footer {
            background: #f8fafc;
            border-top: 1.5px solid #e2e8f0;
            padding: 14px 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
        }

        /* Action Buttons */
        .btn-save-inward {
            background: #f97316;
            border: 1.5px solid #f97316;
            color: #ffffff;
            font-size: 14px;
            font-weight: 700;
            padding: 9px 24px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }
        .btn-save-inward:hover {
            background: #ea580c;
            border-color: #ea580c;
            color: #ffffff;
            box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3);
        }

        /* SKU Modal Modernization */
        .sku-modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            backdrop-filter: blur(4px);
            background: rgba(15, 23, 42, 0.6);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .sku-modal-content {
            background: #fff;
            border-radius: 16px;
            width: 100%;
            max-width: 750px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
        }
        .sku-modal-header {
            padding: 1rem 1.5rem;
            border-bottom: 1.5px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
        }
        .sku-modal-footer {
            padding: 1rem 1.5rem;
            border-top: 1.5px solid #e2e8f0;
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            background: #f8fafc;
        }
    </style>
@endpush

@section('content')

<div class="app-hero-header d-flex align-items-center">
     <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Inventory</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('stock-inward.index') }}">Stock Inward</a>
        </li>
        <li class="breadcrumb-item" aria-current="page">Create</li>
    </ol>
</div>

<div class="app-body">
    @if(session('error_msg'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error_msg') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row gx-3">
        <div class="col-sm-12">
            <div class="si-card">
                <div class="si-card-header">
                    <h6 class="si-card-title">
                        <i class="ri-inbox-archive-line"></i> Stock Inward Information
                    </h6>
                    <span class="badge bg-light text-muted border font-monospace" style="font-size: 11px;">Inventory Entry</span>
                </div>
                <div class="si-card-body">
                    {!! Form::open(['route' => 'stock-inward.store', 'method' => 'POST', 'id' => 'stockInwardForm', 'enctype' => 'multipart/form-data']) !!}
                    <input type="hidden" name="inward_source" id="inward_source" value="Purchase Voucher">
                    
                    <!-- Modern Segmented Pill Tabs -->
                    <div class="segmented-nav">
                        <button type="button" class="tab-btn active" data-target="voucher-tab">
                            <i class="ri-file-text-line"></i> Purchase Voucher / Bill No.
                        </button>
                        <button type="button" class="tab-btn" data-target="direct-tab">
                            <i class="ri-inbox-archive-line"></i> Direct Inward - No Bill
                        </button>
                    </div>
            
                    <!-- Form Fields -->
                    <div class="row g-3 mb-4">
                        <div class="col-12" id="pv_selector_wrap">
                            <label class="proto-label"><i class="ri-search-line text-muted"></i> Purchase Voucher / Bill No.</label>
                            <select name="purchase_voucher_id" id="purchase_voucher_id" class="form-control select2" style="width: 100%;">
                                <option value="">Search / select voucher...</option>
                                @foreach($purchaseVouchers as $id => $voucher_no)
                                    <option value="{{ $id }}" {{ old('purchase_voucher_id') == $id ? 'selected' : '' }}>{{ $voucher_no }}</option>
                                @endforeach
                                <option value="__manual__" {{ old('purchase_voucher_id') == '__manual__' ? 'selected' : '' }}>+ Bill not in list / enter manually</option>
                            </select>
                            <div class="text-danger" style="font-size: 0.75rem; margin-top: 0.25rem;">{{ $errors->first('purchase_voucher_id') }}</div>
                            <div id="pv_alert" class="alert alert-warning p-2 mt-2" style="font-size: 0.8rem; display: none;">
                                <i class="ri-error-warning-line"></i> No matching Purchase Voucher for that number - add the bill details directly below.
                            </div>
                        </div>

                        <!-- PV Auto-filled Fields -->
                        <div class="col-md-6 pv-only">
                            <label class="proto-label">Supplier <span class="tag-auto"><i class="ri-magic-line"></i> Auto-filled</span></label>
                            <input type="text" id="supplier_name_readonly" class="proto-input readonly font-monospace" readonly placeholder="Auto-filled from voucher">
                            <input type="hidden" id="hidden_party_account_ledger_id" name="party_account_ledger_id">
                        </div>
                        <div class="col-md-6 pv-only">
                            <label class="proto-label">Invoice No. <span class="tag-auto"><i class="ri-magic-line"></i> Auto-filled</span></label>
                            <input type="text" name="invoice_no" id="invoice_no_readonly" class="proto-input readonly font-monospace" readonly placeholder="Auto-filled from voucher">
                        </div>
                        <div class="col-md-6 pv-only">
                            <label class="proto-label">Invoice Date <span class="tag-auto"><i class="ri-magic-line"></i> Auto-filled</span></label>
                            <input type="text" id="invoice_date_readonly" class="proto-input readonly font-monospace" readonly placeholder="Auto-filled from voucher">
                            <input type="hidden" name="invoice_date" id="invoice_date_hidden">
                        </div>
                        <div class="col-md-6 pv-only">
                            <label class="proto-label">Invoice Amount <span class="tag-auto"><i class="ri-magic-line"></i> Auto-filled</span></label>
                            <input type="text" id="invoice_amount_readonly" class="proto-input readonly font-monospace text-success fw-bold" readonly placeholder="₹0.00">
                            <input type="hidden" name="invoice_amount" id="invoice_amount_hidden">
                        </div>

                        <!-- Manual Bill Fields -->
                        <div class="col-md-6 manual-only" style="display: none;">
                            <label class="proto-label">Supplier <span class="badge-req tag-req" style="display:none;">Required here</span><span class="badge-opt badge bg-light text-muted border" style="font-size: 0.65rem;">Optional</span></label>
                            <select name="party_account_ledger_id_manual" id="party_account_ledger_id_manual" class="form-control select2" style="width: 100%;">
                                <option value="">Select supplier...</option>
                                @php 
                                $suppliers = \App\Models\AccountLedger::join('account_groups', 'account_groups.id', '=', 'account_ledgers.account_group_id')
                                    ->whereIn('account_groups.a_group_name', ['Sundry Debtors', 'Sundry Creditors', 'Unsecured Loans', 'Loans and Advances (Assets)', 'Cash In Hand', 'Bank Accounts'])
                                    ->whereNull('account_groups.a_sub_group_name')
                                    ->where('account_ledgers.status', 1)
                                    ->select('account_ledgers.id', 'account_ledgers.ledger_name')
                                    ->get(); 
                                @endphp
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}" {{ old('party_account_ledger_id') == $supplier->id ? 'selected' : '' }}>{{ $supplier->ledger_name }}</option>
                                @endforeach
                            </select>
                            <div class="text-danger" style="font-size: 0.75rem; margin-top: 0.25rem;">{{ $errors->first('party_account_ledger_id') }}</div>
                        </div>
                        <div class="col-md-6 manual-only" style="display: none;">
                            <label class="proto-label" id="label_invoice_no">Invoice / Reference No. <span class="badge-req tag-req" style="display:none;">Required here</span><span class="badge-opt badge bg-light text-muted border" style="font-size: 0.65rem;">Optional</span></label>
                            <input type="text" name="invoice_no_manual" id="invoice_no_manual" class="proto-input font-monospace" value="{{ old('invoice_no') }}" placeholder="INV-0000">
                            <div class="text-danger" style="font-size: 0.75rem; margin-top: 0.25rem;">{{ $errors->first('invoice_no') }}</div>
                        </div>
                        <div class="col-md-6 manual-only" style="display: none;">
                            <label class="proto-label" id="label_invoice_date">Date <span class="badge-req tag-req" style="display:none;">Required here</span><span class="badge-opt badge bg-light text-muted border" style="font-size: 0.65rem;">Optional</span></label>
                            <input type="text" name="invoice_date_manual" id="invoice_date_manual" class="proto-input datepicker font-monospace" placeholder="DD-MM-YYYY" value="{{ old('invoice_date') }}">
                            <div class="text-danger" style="font-size: 0.75rem; margin-top: 0.25rem;">{{ $errors->first('invoice_date') }}</div>
                        </div>
                        <div class="col-md-6 manual-only" style="display: none;">
                            <label class="proto-label" id="label_invoice_amount">Amount <span class="badge-req tag-req" style="display:none;">Required here</span><span class="badge-opt badge bg-light text-muted border" style="font-size: 0.65rem;">Optional</span></label>
                            <input type="number" name="invoice_amount_manual" id="invoice_amount_manual" class="proto-input font-monospace" step="any" value="{{ old('invoice_amount') }}" placeholder="0.00">
                            <div class="text-danger" style="font-size: 0.75rem; margin-top: 0.25rem;">{{ $errors->first('invoice_amount') }}</div>
                        </div>
                        <div class="col-md-6 manual-only direct-inward-only" style="display: none;">
                            <label class="proto-label">Bill Upload <span class="badge bg-light text-muted border" style="font-size: 0.65rem;">Optional</span></label>
                            <input type="file" name="doc" id="doc" class="form-control" style="font-size: 0.85rem; padding: 0.4rem 0.75rem;">
                        </div>
                        <div class="col-md-6 manual-only direct-inward-only" style="display: none;">
                            <label class="proto-label">Remarks <span class="badge bg-light text-muted border" style="font-size: 0.65rem;">Optional</span></label>
                            <input type="text" name="remarks_manual" id="remarks_manual" class="proto-input" placeholder="e.g. Opening stock, stock transfer" value="{{ old('remarks') }}">
                        </div>
                        <div id="direct_inward_alert" class="col-12 alert alert-info py-2" style="display: none; font-size: 0.85rem;">
                            <i class="ri-information-line"></i> Direct inward means items are added directly to inventory without a purchase bill.
                        </div>
                    </div>
                    
                    <!-- Modern Item Entry Table -->
                    <div class="item-entry-wrapper mb-4">
                        <div class="item-entry-header">
                            <div class="d-flex align-items-center gap-2">
                                <i class="ri-shopping-cart-2-line text-primary fs-5" style="color: #f97316 !important;"></i>
                                <span class="fw-bold text-dark" style="font-size: 13.5px; letter-spacing: 0.02em;">ITEM ENTRY</span>
                            </div>
                            <span class="badge bg-light text-muted border font-monospace" style="font-size: 11px;">Live Calculation</span>
                        </div>
                        <div class="table-responsive">
                            <table class="item-table" id="item_table">
                                <thead>
                                    <tr>
                                        <th style="width: 25%">ITEM</th>
                                        <th style="width: 15%">MANUFACTURER</th>
                                        <th style="width: 15%">BRAND</th>
                                        <th style="width: 10%; text-align: center;">QTY</th>
                                        <th style="width: 10%">UNIT</th>
                                        <th style="width: 12%; text-align: right;">RATE</th>
                                        <th style="width: 10%; text-align: right;">AMOUNT</th>
                                        <th style="width: 3%"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- JS Rows -->
                                </tbody>
                            </table>
                        </div>
                        <button type="button" class="btn-proto-add" id="add_item_btn">
                            <i class="ri-add-line fs-5"></i> Add Another Item
                        </button>
                        <div class="item-entry-footer">
                            <span class="text-muted fw-semibold" style="font-size: 13.5px;">Line Total:</span>
                            <strong class="text-dark font-monospace fs-5" id="line_total" style="color: #0f172a !important;">₹0.00</strong>
                        </div>
                    </div>
                    
                    <!-- Footer Buttons -->
                    <div class="d-flex justify-content-end align-items-center gap-2 pt-3 border-top">
                        <a href="{{ route('stock-inward.index') }}" class="btn btn-light px-4">Cancel</a>
                        <button type="submit" class="btn-save-inward">
                            <i class="ri-save-line"></i> Save Inward
                        </button>
                    </div>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- SKU Modal Container -->
<div class="sku-modal-overlay" id="sku_modal_wrapper">
    <div class="sku-modal-content">
        <div class="sku-modal-header">
            <div>
                <h5 class="fw-bold text-dark mb-1" id="sku_modal_title">SKU Details</h5>
                <div class="text-muted small" id="sku_modal_subtitle">0 of 0 SKU(s) entered</div>
            </div>
            <button type="button" class="btn-close" onclick="closeSkuModal()"></button>
        </div>
        <div class="p-0" style="max-height: 400px; overflow-y: auto;">
            <table class="item-table m-0" id="sku_table">
                <thead>
                    <tr>
                        <th style="width: 5%; text-align: center;">#</th>
                        <th style="width: 20%">SKU CODE</th>
                        <th style="width: 20%">BATCH NO.</th>
                        <th style="width: 15%">MANUFACTURER</th>
                        <th style="width: 15%">BRAND</th>
                        <th style="width: 8%; text-align: center;">QTY</th>
                        <th style="width: 8%">UNIT</th>
                        <th style="width: 9%; text-align: right;">AMOUNT</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- JS generated rows -->
                </tbody>
            </table>
        </div>
        <div class="sku-modal-footer">
            <button type="button" class="btn btn-light px-3" onclick="closeSkuModal()">Cancel</button>
            <button type="button" class="btn-save-inward py-2 px-3" style="font-size: 13.5px;" id="save_sku_btn">
                <i class="ri-check-line"></i> Save SKUs
            </button>
        </div>
    </div>
</div>

@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script src="{{asset('theme/assets/vendor/datatables/dataTables.min.js')}}"></script>
    <script src="{{asset('theme/assets/sweetalert/sweet-alert.min.js')}}"></script>
<script>
    let productsList = {!! json_encode(\App\Models\Product::with('manufacturer', 'brand')->get()) !!};
    let rowCount = 0;
    let currentSkuRowId = null;

    function getProductOptions() {
        let opts = '<option value="">Select item...</option>';
        productsList.forEach(p => {
            opts += `<option value="${p.id}">${p.product_name}</option>`;
        });
        return opts;
    }

    function createRow(detail = null, readonlyRate = false) {
        rowCount++;
        let rId = 'row_' + rowCount;
        
        let html = `
        <tr id="${rId}">
            <td>
                <select name="item_id[]" class="form-control item-select select2">
                    ${getProductOptions()}
                </select>
            </td>
            <td>
                <input type="text" name="manufacturer[]" class="proto-input mfg-input" placeholder="Type Mfr..." style="font-size: 0.8rem; padding: 5px 8px; width: 100%;">
            </td>
            <td>
                <input type="text" name="brand[]" class="proto-input brand-input" placeholder="Type Brand..." style="font-size: 0.8rem; padding: 5px 8px; width: 100%;">
            </td>
            <td>
                <input type="number" name="quantity[]" class="form-control item-qty font-monospace" style="text-align: center; padding: 5px 8px;" ${window.allowNegativeStock === 'yes' ? '' : 'min="0"'} step="any">
                <a href="#" class="open-sku-modal" style="display:none; text-align: center;">Enter SKUs *</a>
            </td>
            <td>
                <span class="unit-text text-muted fw-semibold">—</span>
                <input type="hidden" name="unit_id[]" class="unit-id-field">
            </td>
            <td>
                <input type="number" name="purchase_rate[]" class="form-control item-rate font-monospace ${readonlyRate?'readonly':''}" ${readonlyRate?'readonly':''} style="text-align: right; padding: 5px 8px;" step="any" required>
            </td>
            <td style="text-align: right; font-family: monospace; font-weight: 700; color: #0f172a; font-size: 13.5px;">
                <span class="item-amt-text">₹0</span>
                <input type="hidden" name="amount[]" class="item-amt-input" value="0">
            </td>
            <td style="text-align: center; vertical-align: middle;">
                <i class="ri-delete-bin-line remove-row" style="color: #94a3b8; cursor: pointer; font-size: 18px;" title="Remove row"></i>
                <div class="sku-inputs-container"></div>
            </td>
        </tr>
        `;
        
        $('#item_table tbody').append(html);
        $('#' + rId + ' .select2').select2({width: '100%', dropdownAutoWidth: false});
        
        if (detail) {
            $('#' + rId + ' .item-select').val(detail.product_id).trigger('change');
            $('#' + rId + ' .item-qty').val(detail.available_qty).attr('max', detail.available_qty);
            $('#' + rId + ' .item-rate').val(detail.rate);
            
            setTimeout(function() {
                $('#' + rId + ' .item-qty').trigger('input');
            }, 10);
        }
        
        setTimeout(function() {
            updateTotals();
        }, 50);
        return rId;
    }

    $(document).ready(function() {
        window.allowNegativeStock = @json($allowNegativeStock ?? 'no');
        
        $('.select2').select2({
            width: '100%',
            dropdownAutoWidth: false
        });
        
        $('.tab-btn').on('click', function() {
            $('.tab-btn').removeClass('active');
            $(this).addClass('active');
            
            if($(this).data('target') === 'voucher-tab') {
                $('#inward_source').val('Purchase Voucher');
                $('#pv_selector_wrap').show();
                
                $('#purchase_voucher_id').val('').trigger('change');
                $('.pv-only').show();
                $('.manual-only').hide();
                $('#pv_alert').hide();
                
            } else {
                let source = $(this).data('target') === 'direct-tab' ? 'Direct Inward' : 'Manual Bill';
                $('#inward_source').val(source);
                $('#pv_selector_wrap').hide();
                
                $('.pv-only').hide();
                $('.manual-only').show();
                
                $('#invoice_no_manual, #invoice_date_manual, #invoice_amount_manual').val('');
                $('#party_account_ledger_id_manual').val('').trigger('change');
                
                updateManualFieldsUI(source);
                
                $('#item_table tbody').empty();
                createRow();
            }
        });

        $('#purchase_voucher_id').on('change', function() {
            var pv_id = $(this).val();
            
            if(pv_id === '__manual__') {
                $('#inward_source').val('Manual Bill');
                $('#pv_alert').show();
                $('.pv-only').hide();
                $('.manual-only').show();
                
                updateManualFieldsUI('Manual Bill');
                
                $('#item_table tbody').empty();
                createRow();
            } else if (pv_id) {
                $('#inward_source').val('Purchase Voucher');
                $('#pv_alert').hide();
                $('.pv-only').show();
                $('.manual-only').hide();
                
                $.ajax({
                    url: "{{ route('stock-inward.get-purchase-voucher') }}",
                    type: "GET",
                    data: { purchase_voucher_id: pv_id },
                    success: function(res) {
                        if(res.success && res.data) {
                            $('#hidden_party_account_ledger_id').val(res.data.party_account_ledger_id);
                            $('#supplier_name_readonly').val(res.data.account_ledger ? res.data.account_ledger.ledger_name : '');
                            $('#invoice_no_readonly').val(res.data.supplier_invoice_no || '');
                            
                            var invDate = res.data.supplier_invoice_date || '';
                            if (invDate && invDate.indexOf('-') !== -1) {
                                var parts = invDate.split('-');
                                if (parts[0].length === 4) { 
                                    invDate = parts[0] + '-' + parts[1] + '-' + parts[2];
                                }
                            }
                            $('#invoice_date_hidden').val(invDate);
                            $('#invoice_date_readonly').val(invDate);
                            
                            $('#invoice_amount_hidden').val(res.data.net_total || 0);
                            $('#invoice_amount_readonly').val('₹' + (res.data.net_total || 0));
                            
                            $('#item_table tbody').empty();
                            
                            res.data.voucher_details.forEach(function(detail) {
                                createRow(detail, true);
                            });
                            updateTotals();
                        }
                    }
                });
            } else {
                if ($('#inward_source').val() === 'Purchase Voucher') {
                    $('#item_table tbody').empty();
                    $('.pv-only input').val('');
                }
            }
        });

        function updateManualFieldsUI(source) {
            if(source === 'Manual Bill') {
                $('#direct_inward_alert').hide();
                $('.badge-req').hide();
                $('.badge-opt').show();
                $('.direct-inward-only').hide();
                
                $('#label_invoice_no').contents().first()[0].textContent = 'Bill Number ';
                $('#label_invoice_date').contents().first()[0].textContent = 'Bill Date ';
                $('#label_invoice_amount').contents().first()[0].textContent = 'Bill Amount ';
                
                // Set requirements - now optional as requested
                $('#party_account_ledger_id_manual, #invoice_no_manual, #invoice_date_manual, #invoice_amount_manual').removeAttr('required');
            } else if(source === 'Direct Inward') {
                $('#direct_inward_alert').show();
                $('.badge-req').hide();
                $('.badge-opt').show();
                $('.direct-inward-only').show();
                
                $('#label_invoice_no').contents().first()[0].textContent = 'Invoice / Reference No. ';
                $('#label_invoice_date').contents().first()[0].textContent = 'Date ';
                $('#label_invoice_amount').contents().first()[0].textContent = 'Amount ';
                
                // Remove requirements
                $('#party_account_ledger_id_manual, #invoice_no_manual, #invoice_date_manual, #invoice_amount_manual').removeAttr('required');
            }
        }

        $(document).on('change', '.item-select', function() {
            let row = $(this).closest('tr');
            let pId = $(this).val();
            if(!pId) {
                row.find('.mfg-input, .brand-input').val('');
                row.find('.unit-text').text('—');
                row.find('.unit-id-field').val('');
                row.find('.open-sku-modal').hide();
                return;
            }
            let prod = productsList.find(p => p.id == pId);
            if(prod) {
                let mfgName = prod.manufacturer ? (prod.manufacturer.name || prod.manufacturer.manufacturer_name || '') : '';
                let brandName = prod.brand ? (prod.brand.brand_name || prod.brand.name || '') : '';

                row.find('.mfg-input').val(mfgName);
                row.find('.brand-input').val(brandName);

                let unitName = prod.units || prod.unit_id || prod.unit || '—';
                row.find('.unit-text').text(unitName); 
                row.find('.unit-id-field').val(unitName);
                
                // SKU is REQUIRED for every item every time
                var curQty = parseFloat(row.find('.item-qty').val()) || 0;
                if(curQty > 0) {
                    row.find('.open-sku-modal').show();
                    if ($('#sku_modal_wrapper').css('display') === 'none' || currentSkuRowId !== row.attr('id')) {
                        row.find('.open-sku-modal').click();
                    }
                }

                if ($('#inward_source').val() === 'Direct Inward' || $('#inward_source').val() === 'Manual Bill') {
                    let defaultRate = (prod.rate_per !== undefined && prod.rate_per !== null && prod.rate_per !== '') 
                        ? parseFloat(prod.rate_per) 
                        : (prod.purchase_rate ? parseFloat(prod.purchase_rate) : 0);
                    
                    if (!row.find('.item-rate').prop('readonly')) {
                        row.find('.item-rate').val(defaultRate > 0 ? defaultRate : '');
                        updateTotals();
                    }
                }
            }
        });

        $(document).on('input', '.item-qty, .item-rate', function() {
            var row = $(this).closest('tr');
            var qty = parseFloat(row.find('.item-qty').val()) || 0;
            var max = parseFloat(row.find('.item-qty').attr('max'));
            
            if (max && qty > max) row.find('.item-qty').val(max);
            
            updateTotals();
            
            // SKU is REQUIRED for every item whenever qty > 0
            if(qty > 0) {
                row.find('.open-sku-modal').show();
                let filled = row.find('.sku-inputs-container input[name^="sku_codes"]').filter(function() { return $(this).val().trim() !== ""; }).length;
                if(filled > 0) {
                    row.find('.open-sku-modal').text(filled + ' / ' + parseInt(qty) + ' SKUs entered');
                    if(filled >= qty) {
                        row.find('.open-sku-modal').css('color', '#059669'); // Green
                    } else {
                        row.find('.open-sku-modal').css('color', '#dc2626'); // Red
                    }
                } else {
                    row.find('.open-sku-modal').text('Enter SKUs * (Required)').css('color', '#dc2626');
                }
            } else {
                row.find('.open-sku-modal').hide();
            }
        });

        // Automatically open the SKU modal when user leaves or changes the qty field
        $(document).on('change', '.item-qty', function() {
            var row = $(this).closest('tr');
            var qty = parseFloat($(this).val()) || 0;
            if(qty > 0) {
                // If modal not currently open, click it to open
                if ($('#sku_modal_wrapper').css('display') === 'none' || currentSkuRowId !== row.attr('id')) {
                    row.find('.open-sku-modal').click();
                }
            }
        });

        $('#add_item_btn').click(function() {
            createRow(null, $('#inward_source').val() === 'Purchase Voucher');
        });

        $(document).on('click', '.remove-row', function() {
            $(this).closest('tr').remove();
            updateTotals();
            reindexSkuInputs();
        });

        function updateTotals() {
            var totalAmt = 0;
            $('#item_table tbody tr').each(function() {
                var qty  = parseFloat($(this).find('.item-qty').val()) || 0;
                var rate = parseFloat($(this).find('.item-rate').val()) || 0;
                var amt  = qty * rate;
                
                $(this).find('.item-amt-text').text('₹' + amt.toFixed(2));
                $(this).find('.item-amt-input').val(amt.toFixed(2));
                totalAmt += amt;
            });
            $('#line_total').text('₹' + totalAmt.toFixed(2));
        }
        
        // SKU Modal Logic
        $(document).on('click', '.open-sku-modal', function(e) {
            e.preventDefault();
            let row = $(this).closest('tr');
            let qty = parseInt(row.find('.item-qty').val()) || 0;
            currentSkuRowId = row.attr('id');
            
            let itemName = row.find('.item-select option:selected').text();
            let mfg = row.find('.mfg-input').val() || '—';
            let brand = row.find('.brand-input').val() || '—';
            let unit = row.find('.unit-text').text();
            let rate = row.find('.item-rate').val() || 0;
            
            $('#sku_modal_title').text('SKU Details - ' + itemName);
            
            let html = '';
            let existingSkus = [];
            row.find('.sku-inputs-container input[name^="sku_codes"]').each(function() { existingSkus.push($(this).val()); });
            let existingBatches = [];
            row.find('.sku-inputs-container input[name^="batch_nos"]').each(function() { existingBatches.push($(this).val()); });
            
            for(let i=0; i<qty; i++) {
                let sVal = existingSkus[i] || '';
                let bVal = existingBatches[i] || '';
                html += `
                <tr>
                    <td style="text-align: center; color: #94a3b8;">${i+1}</td>
                    <td><input type="text" class="proto-input sku-code-in" value="${sVal}" placeholder="Required" style="border-color: #fca5a5;"></td>
                    <td><input type="text" class="proto-input batch-no-in" value="${bVal}" placeholder="Optional"></td>
                    <td style="color: #64748b;">${mfg}</td>
                    <td style="color: #64748b;">${brand}</td>
                    <td style="text-align: center; color: #64748b;">1</td>
                    <td style="color: #64748b;">${unit}</td>
                    <td style="text-align: right; font-family: monospace;">₹${rate}</td>
                </tr>
                `;
            }
            
            if(qty === 0) {
                html = `<tr><td colSpan="8" style="text-align:center; padding: 2rem; color: #94a3b8;">Enter a Qty greater than 0 first.</td></tr>`;
            }
            
            $('#sku_table tbody').html(html);
            updateSkuModalSubtitle();
            
            $('#sku_modal_wrapper').css('display', 'flex');
        });
        
        $(document).on('input', '.sku-code-in', function() {
            updateSkuModalSubtitle();
        });
        
        function updateSkuModalSubtitle() {
            let filledSku = $('#sku_table tbody .sku-code-in').filter(function() { return $(this).val().trim() !== ''; }).length;
            let total = $('#sku_table tbody tr').length;
            if($('#sku_table tbody .sku-code-in').length === 0) total = 0;
            $('#sku_modal_subtitle').text(filledSku + ' of ' + total + ' SKU(s) entered');
        }

        function reindexSkuInputs() {
            $('#item_table tbody tr').each(function(rowIndex) {
                $(this).find('.sku-inputs-container input[name^="sku_codes"]').each(function() {
                    $(this).attr('name', `sku_codes[${rowIndex}][]`);
                });
                $(this).find('.sku-inputs-container input[name^="batch_nos"]').each(function() {
                    $(this).attr('name', `batch_nos[${rowIndex}][]`);
                });
            });
        }

        $('#save_sku_btn').click(function() {
            if(!currentSkuRowId) return;
            let rId = currentSkuRowId;
            let row = $('#' + rId);
            let rIndex = $('#item_table tbody tr').index(row);
            if (rIndex < 0) rIndex = 0;
            let container = row.find('.sku-inputs-container');
            
            // Check that all SKU codes are filled
            let emptySkuCount = 0;
            $('#sku_table tbody .sku-code-in').each(function() {
                if(!$(this).val().trim()) emptySkuCount++;
            });
            if(emptySkuCount > 0) {
                alert('SKU is REQUIRED! Please enter SKU Code for all ' + $('#sku_table tbody tr').length + ' units.');
                return false;
            }


            container.empty();
            let filled = 0;
            $('#sku_table tbody tr').each(function() {
                let sku = $(this).find('.sku-code-in').val();
                let batch = $(this).find('.batch-no-in').val();
                if(sku !== undefined) {
                    if(sku.trim()) filled++;
                    container.append(`<input type="hidden" name="sku_codes[${rIndex}][]" value="${sku.trim()}">`);
                    container.append(`<input type="hidden" name="batch_nos[${rIndex}][]" value="${(batch || '').trim()}">`);
                }
            });
            
            reindexSkuInputs();

            let total = $('#' + rId + ' .item-qty').val();
            $('#' + rId + ' .open-sku-modal').text(filled + ' / ' + parseInt(total) + ' SKUs entered');
            if(filled >= total) {
                $('#' + rId + ' .open-sku-modal').css('color', '#059669'); // Green
            } else {
                $('#' + rId + ' .open-sku-modal').css('color', '#dc2626'); // Red
            }
            
            closeSkuModal();
        });

        // Form Submit
        $('#stockInwardForm').submit(function(e) {
            // Re-index SKU inputs to strictly match current DOM row order
            reindexSkuInputs();

            // Check if every item row has valid qty and all SKUs entered
            let hasError = false;
            let errorMsg = '';
            let errorRowToOpen = null;

            $('#item_table tbody tr').each(function() {
                let row = $(this);
                let itemId = row.find('.item-select').val();
                if (!itemId) return;

                let qty = parseFloat(row.find('.item-qty').val()) || 0;
                let itemName = row.find('.item-select option:selected').text();

                if (qty <= 0) {
                    hasError = true;
                    errorMsg = 'Please enter a valid quantity greater than 0 for item "' + itemName + '".';
                    return false;
                }

                let filledSkus = row.find('.sku-inputs-container input[name^="sku_codes"]').filter(function() { 
                    return $(this).val().trim() !== ''; 
                }).length;

                if (filledSkus < qty) {
                    hasError = true;
                    errorMsg = 'SKU is REQUIRED for every item! Please enter all ' + parseInt(qty) + ' SKUs for "' + itemName + '".';
                    errorRowToOpen = row;
                    return false;
                }
            });

            if (hasError) {
                e.preventDefault();
                alert(errorMsg);
                if (errorRowToOpen) {
                    errorRowToOpen.find('.open-sku-modal').click();
                }
                return false;
            }

            if ($(this).data('submitted') === true) {
                e.preventDefault();
                return false;
            }
            $(this).data('submitted', true);
            $(this).find('button[type="submit"]').prop('disabled', true);

            // Re-name fields based on inward_source before submit
            let src = $('#inward_source').val();
            if(src === 'Manual Bill' || src === 'Direct Inward') {
                $('#party_account_ledger_id_manual').attr('name', 'party_account_ledger_id');
                $('#invoice_no_manual').attr('name', 'invoice_no');
                $('#invoice_date_manual').attr('name', 'invoice_date');
                $('#invoice_amount_manual').attr('name', 'invoice_amount');
            } else {
                $('#party_account_ledger_id_manual').removeAttr('name');
                $('#invoice_no_manual').removeAttr('name');
                $('#invoice_date_manual').removeAttr('name');
                $('#invoice_amount_manual').removeAttr('name');
            }
        });
        
        createRow();
        
    });
    
    if (typeof $.fn.daterangepicker === 'function') {
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: false,
            locale: { format: "DD-MM-YYYY" }
        });

        $('.datepicker').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
        });

        $('.datepicker').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    }
    
    function closeSkuModal() {
        $('#sku_modal_wrapper').hide();
        currentSkuRowId = null;
    }
</script>
@endpush