@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 Add 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_store') }}">
                        <input type="hidden" name="entries" id="entries">
                        @csrf
                        <input type="hidden" id="edit_index" value="">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input value="{{ 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 In</option>
                                        <option value="Scrap Out">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."
                                        placeholder="Voucher No." type="number" readonly></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input class="js-select2" id="account_id" name="account_id"
                                        label="Select Account" placeholder="Select Account" type="select">
                                        <option value="">-- Select Account --</option>
                                        @foreach ($accounts as $account)
                                            <option value="{{ $account->id }}" data-balance="{{ $account->ledger }}">
                                                {{ $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="ledger_balance" class="form-control" readonly>
                                </div>
                            </div>
                            {{-- Mobail No KO  Select Account KE HISAB SE Account TABLE SE LANA H OR AUTO SHOW KRWANA H AGER ACUNT TABLE ME NA HO US TIME PAR INPUT ME TYPE KAR SKTA H  --}}
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="mobail" name="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" 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" 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')
    <script>
        $(document).ready(function() {
            $('#account_id').on('change', function() {
                let balance = $(this).find(':selected').data('balance') || '';
                $('#ledger_balance').val(balance);
            });

            // 🔹 Page load पर भी balance दिखाने के लिए (edit mode में)
            let initialBalance = $('#account_id').find(':selected').data('balance') || '';
            $('#ledger_balance').val(initialBalance);
        });
    </script>

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

            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 if needed
            typeSelect.dispatchEvent(new Event('change'));
        });
    </script>

    <script>
        $(document).ready(function() {
            $('.js-select2').select2({
                width: '100%'
            });
        });

        function deleteAllEntries() {
            if (confirm("Are you sure you want to delete all entries?")) {
                entries = [];
                refreshTable();
            }
        }
        let entries = [];
        let editIndex = -1;

        function calculateNetRate(qty, amt) {
            return (qty > 0 && amt > 0) ? (qty * amt).toFixed(2) : 0;
        }

        function refreshTable() {
            const tbody = document.querySelector("#entry-table tbody");
            tbody.innerHTML = '';

            entries.forEach((entry, index) => {
                const row = document.createElement("tr");
                row.innerHTML = `
                <td>${entry.brandText}</td>
                <td>${entry.type}</td>
                <td>${entry.sizeText}</td>
                <td>${entry.kg}</td>
                <td>${entry.qty}</td>
                <td>${entry.amt}</td>
                <td>${entry.netRate}</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);
            });
        }

        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,
                qty,
                amt,
                netRate
            };

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

            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 = '';
            $('#scrap_brand').val(null).trigger('change');
            $('#scrap_size').val(null).trigger('change');
            document.getElementById("scrap_qty").value = '';
            document.getElementById("scrap_amt").value = '';
            document.getElementById("scrap_net_rate").value = '';

            refreshTable();
        });

        // Auto-calculate Net Rate
        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);
        }

        // Edit/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];

                document.getElementById("scrap_brand").value = entry.brandVal;
                $('#scrap_brand').val(entry.brandVal).trigger('change');
                $('#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();
            }
        });

        // On form submit: serialize entries to hidden input
        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);
        });
    </script>
@endsection