@extends('layouts.admin')
@section('title', 'New sale | Mintavia Admin')

<style>
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    /* Entire table uses fixed layout */
    .scrollable-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    /* Fix header */
    .scrollable-table thead {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    /* Make tbody scrollable */
    .scrollable-table tbody {
        display: block;
        max-height: 400px;
        /* 👈 Change this height as needed */
        overflow-y: auto;
    }

    .scrollable-table tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    /* Consistent column sizes */
    .scrollable-table th,
    .scrollable-table td {
        border: 1px solid #dee2e6;
        padding: 8px;
        word-wrap: break-word;
    }
</style>

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Scrap Edit Screen</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.reports.scrap') }}" class="btn btn-dark btn-md" title="Back to Coupon List">
                            Scrap Report <i class="fa fa-share" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <form id="save-form" method="post" action="{{ route('admin.reports.scrap_update', $voucher_no) }}">
                        @csrf
                        <input type="hidden" name="entries" id="entries">
                        <input type="hidden" id="edit_index" value="">

                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input value="{{ $scrap->date ?? date('Y-m-d') }}" id="date" name="date"
                                        label="Date" placeholder="Date" type="date"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <x-admin-input class="select2" id="type_of_voucher" name="type_of_voucher"
                                        label="Type Of Voucher" placeholder="Type Of Voucher" type="select">
                                        <option value="">Select Type Of Voucher</option>
                                        <option value="Scrap In"
                                            {{ $scrap->type_of_voucher === 'Scrap In' ? 'selected' : '' }}>Scrap In</option>
                                        <option value="Scrap Out"
                                            {{ $scrap->type_of_voucher === 'Scrap Out' ? 'selected' : '' }}>Scrap Out
                                        </option>
                                    </x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="voucher_no" name="voucher_no" label="Voucher No."
                                        value="{{ $voucher_no }}" placeholder="Voucher No." type="number"
                                        readonly></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input class="select2" id="account_id" name="account_id" label="Select Account"
                                        placeholder="Select Account" type="select">
                                        @foreach ($accounts as $account)
                                            <option value="{{ $account->id }}" data-balance="{{ $account->ledger }}"
                                                {{ $scrap->account_id == $account->id ? 'selected' : '' }}>
                                                {{ $account->name }}
                                            </option>
                                        @endforeach
                                    </x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <label>Balance</label>
                                    <input type="text" id="account_balance" class="form-control" value="" readonly>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="mobail" name="mobail" value="{{ $scrap->mobail }}"
                                        label="Mobail No." placeholder="Mobail No." type="number"></x-admin-input>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <!-- HTML FORM ROW -->
                        <div class="row">
                            <div class="col-md-2">
                                <label class="form-label">Brand</label>
                                <select id="scrap_brand" class="form-control js-select2">
                                    <option value="">-- Select Brand --</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $brand->brand_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Type</label>
                                <select id="scrap_type" class="form-control">
                                    <option value="">-- Type Of --</option>
                                    <option value="Water Type">Water Type</option>
                                    <option value="Jal Type">Jal Type</option>
                                    <option value="Without Re Chargabal">Without Re Chargabal</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Size</label>
                                <select id="scrap_size" class="form-control js-select2">
                                    <option value="">-- Select Size --</option>
                                    @foreach ($sizes as $size)
                                        <option value="{{ $size->id }}">{{ $size->size_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">KG</label>
                                <input type="number" id="scrap_kg" class="form-control" placeholder="KG">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">Qty</label>
                                <input type="number" id="scrap_qty" class="form-control" placeholder="Qty">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Amount</label>
                                <input type="number" id="scrap_amt" class="form-control" placeholder="Amount">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">Net Rate</label>
                                <input type="number" id="scrap_net_rate" class="form-control" readonly>
                            </div>
                            <div class="col-md-1 d-flex align-items-end">
                                <button id="addRow" type="button" class="btn btn-success w-100">+</button>
                            </div>
                        </div>

                        <!-- TABLE TO SHOW ENTRIES -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="table-responsive" style="max-height:300px; overflow-y:auto;">
                                    <table class="table table-bordered table-striped" id="entry-table">
                                        <thead>
                                            <tr>
                                                <th>Brand</th>
                                                <th>Type</th>
                                                <th>Size</th>
                                                <th>KG</th>
                                                <th>Qty</th>
                                                <th>Amount</th>
                                                <th>Net Rate</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="row align-items-end">
                            <!-- Remark Short -->
                            <div class="col-md-5 mb-3">
                                <div class="form-group">
                                    <x-admin-input id="remark_short" value="{{ $scrap->remark_short }}"
                                        name="remark_short" label="Remark" placeholder="Enter short remark"
                                        type="text" />
                                </div>
                            </div>

                            <!-- Remark Long -->
                            <div class="col-md-5 mb-3">
                                <div class="form-group">
                                    <x-admin-input id="remark_long" value="{{ $scrap->remark_long }}" name="remark_long"
                                        label="Remark" placeholder="Enter long remark" type="text" />
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="col-md-2 mb-3 text-md-right text-left">
                                <div class="form-group">
                                    <button type="button" class="btn btn-danger mb-1"
                                        onclick="deleteAllEntries()">Delete</button>
                                    <a href="{{ route('admin.reports.scrap') }}" class="btn btn-secondary mb-1">Close</a>
                                    <button type="submit" class="btn btn-success mb-1">Save</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <!-- Select2 JS -->
    <script>
        function showBalance() {
            let select = document.getElementById("account_id");
            let selectedOption = select.options[select.selectedIndex];
            let balance = selectedOption.getAttribute("data-balance") || "0.00";
            document.getElementById("account_balance").value = balance;
        }

        // Page load par run kare
        document.addEventListener("DOMContentLoaded", function() {
            showBalance();
        });

        // Dropdown change par run kare
        document.getElementById("account_id").addEventListener("change", function() {
            showBalance();
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const typeSelect = document.getElementById('type_of_voucher');
            const voucherInput = document.getElementById('voucher_no');

            // Update voucher number based on type selection
            // typeSelect.addEventListener('change', function() {
            //     const type = this.value;
            //     if (type === 'Scrap In') {
            //         voucherInput.value = {{ $nextScrapInVoucher }};
            //     } else if (type === 'Scrap Out') {
            //         voucherInput.value = {{ $nextScrapOutVoucher }};
            //     } else {
            //         voucherInput.value = '';
            //     }
            // });

            // Trigger change on load to set initial voucher number
            //typeSelect.dispatchEvent(new Event('change'));

            // Initialize entries array with data from the server
            let entries = @json($entries ?? []);
            let editIndex = -1;

            // Debug: Log entries to console to verify data
            console.log('Initial entries:', entries);

            // Function to calculate net rate
            function calculateNetRate(qty, amt) {
                return (qty > 0 && amt > 0) ? (qty * amt).toFixed(2) : 0;
            }

            // Function to refresh the table with entries
            function refreshTable() {
                const tbody = document.querySelector("#entry-table tbody");
                tbody.innerHTML = '';

                if (!entries || entries.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="8" class="text-center">No entries found</td></tr>';
                    return;
                }

                entries.forEach((entry, index) => {
                    const row = document.createElement("tr");
                    row.innerHTML = `
                <td>${entry.brandText || 'N/A'}</td>
                <td>${entry.type || 'N/A'}</td>
                <td>${entry.sizeText || 'N/A'}</td>
                <td>${entry.kg || 0}</td>
                <td>${entry.qty || 0}</td>
                <td>${entry.amt || 0}</td>
                <td>${entry.netRate || 0}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary edit-btn" data-index="${index}">Edit</button>
                    <button type="button" class="btn btn-sm btn-danger delete-btn" data-index="${index}">Delete</button>
                </td>
            `;
                    tbody.appendChild(row);
                });
            }

            // Add or update an entry
            document.getElementById("addRow").addEventListener("click", function() {
                const brand = document.getElementById("scrap_brand");
                const type = document.getElementById("scrap_type");
                const size = document.getElementById("scrap_size");
                const kg = parseFloat(document.getElementById("scrap_kg").value) || 0;
                const qty = parseFloat(document.getElementById("scrap_qty").value) || 0;
                const amt = parseFloat(document.getElementById("scrap_amt").value) || 0;
                const netRate = calculateNetRate(qty, amt);

                const entry = {
                    brandVal: brand.value,
                    brandText: brand.options[brand.selectedIndex]?.text || '',
                    type: type.value,
                    sizeVal: size.value,
                    sizeText: size.options[size.selectedIndex]?.text || '',
                    kg: kg,
                    qty: qty,
                    amt: amt,
                    netRate: netRate
                };

                // Validate required fields
                if (!entry.brandVal || !entry.type || !entry.sizeVal || !entry.qty || !entry.amt) {
                    alert("Please fill all entry fields before adding.");
                    return;
                }

                // Add or update entry
                if (editIndex >= 0) {
                    entries[editIndex] = entry;
                    editIndex = -1;
                } else {
                    entries.push(entry);
                }

                // Reset form fields
                brand.value = "";
                type.value = "";
                size.value = "";
                document.getElementById("scrap_kg").value = '';
                document.getElementById("scrap_qty").value = '';
                document.getElementById("scrap_amt").value = '';
                document.getElementById("scrap_net_rate").value = '';

                // Refresh the table
                refreshTable();
            });

            // Auto-calculate net rate on input change
            document.getElementById("scrap_amt").addEventListener("input", updateNetRate);
            document.getElementById("scrap_qty").addEventListener("input", updateNetRate);

            function updateNetRate() {
                const amt = parseFloat(document.getElementById("scrap_amt").value) || 0;
                const qty = parseFloat(document.getElementById("scrap_qty").value) || 0;
                document.getElementById("scrap_net_rate").value = calculateNetRate(qty, amt);
            }

            // Handle edit and delete actions
            document.querySelector("#entry-table").addEventListener("click", function(e) {
                if (e.target.classList.contains("edit-btn")) {
                    const index = e.target.dataset.index;
                    const entry = entries[index];
                    // Populate form with entry data for editing
                    $('#scrap_brand').val(entry.brandVal || '').trigger('change');
                    document.getElementById("scrap_type").value = entry.type || '';
                    $('#scrap_size').val(entry.sizeVal || '').trigger('change');
                    document.getElementById("scrap_kg").value = entry.kg || '';
                    document.getElementById("scrap_qty").value = entry.qty || '';
                    document.getElementById("scrap_amt").value = entry.amt || '';
                    document.getElementById("scrap_net_rate").value = entry.netRate || '';

                    editIndex = index;
                }

                if (e.target.classList.contains("delete-btn")) {
                    const index = e.target.dataset.index;
                    entries.splice(index, 1);
                    refreshTable();
                }
            });

            // Delete all entries
            window.deleteAllEntries = function() {
                if (confirm("Are you sure you want to delete all entries?")) {
                    entries = [];
                    refreshTable();
                }
            }

            // Serialize entries to hidden input on form submit
            document.getElementById("save-form").addEventListener("submit", function(e) {
                if (entries.length === 0) {
                    e.preventDefault();
                    alert("Please add at least one entry before submitting.");
                    return;
                }
                document.getElementById("entries").value = JSON.stringify(entries);
            });

            // Initialize Select2 for dropdowns
            $(document).ready(function() {
                $('.select2').select2();
            });

            // Refresh table on page load to show existing entries
            refreshTable();
        });
    </script>
@endsection