@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">Coupon Bill Add Screen</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.coupon_show') }}" class="btn btn-dark btn-md" title="Back to Coupon List">
                            Coupon 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.coupon.save') }}">
                        @csrf
                        <input type="hidden" id="edit_index" value="">
                        <div class="row">
                            <div class="col-md-3">
                                <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 id="voucher_no" name="voucher_no" label="Voucher No."
                                        placeholder="Voucher No." type="number" :value="$nextVoucherNo"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <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>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <x-admin-input class="select2" id="brand_id" name="brand_id" label="Select Brand"
                                        placeholder="Select Brand" type="select">
                                        @foreach ($brand as $brands)
                                            <option value="{{ $brands->id }}">{{ $brands->brand_name }}</option>
                                        @endforeach
                                    </x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="coupon_qty" name="coupon_qty" label="Coupon Qty"
                                        placeholder="Coupon Qty" type="number"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="coupon_amt" name="coupon_amt" label="Coupon Amt"
                                        placeholder="Coupon Amt" type="number"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="total_amt" name="total_amt" label="Total Amt" placeholder="Total Amt"
                                        type="number" readonly></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-1 align-items-center">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-block btn-sm btn-info" id="add-entry">Add</button>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="table-responsive scrollable-table" style="max-height: 300px; overflow-y: auto;">
                                    <table class="table table-bordered table-striped" id="entry-table">
                                        <thead>
                                            <tr>
                                                <th>Brand</th>
                                                <th>Coupon Qty</th>
                                                <th>Coupon Amount</th>
                                                <th>Total Amount</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                <!-- Separate fixed footer table for total row -->
                                <table class="table table-bordered table-striped">
                                    <tfoot>
                                        <tr>
                                            <th>Total</th>
                                            <th id="total-qty">0</th>
                                            <th id="total-amt">0.00</th>
                                            <th id="total-value">0.00</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </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.coupon_show') }}" class="btn btn-secondary mb-1">Close</a>
                                    <button type="submit" class="btn btn-success mb-1">Save</button>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="entries" id="entries">
                    </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>
        let entries = [];

        function calculateTotal() {
            let qty = parseFloat(document.getElementById('coupon_qty').value) || 0;
            let amt = parseFloat(document.getElementById('coupon_amt').value) || 0;
            let total = qty * amt;
            document.getElementById('total_amt').value = total.toFixed(2);
        }

        document.getElementById('coupon_qty').addEventListener('input', calculateTotal);
        document.getElementById('coupon_amt').addEventListener('input', calculateTotal);

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

            let totalQty = 0;
            let totalAmt = 0;
            let totalValue = 0;

            entries.forEach((entry, index) => {
                totalQty += parseFloat(entry.coupon_qty) || 0;
                totalAmt += parseFloat(entry.coupon_amt) || 0;
                totalValue += parseFloat(entry.total_amt) || 0;

                let row = `
            <tr>
                <td>${entry.brand_name}</td>
                <td>${entry.coupon_qty}</td>
                <td>${entry.coupon_amt}</td>
                <td>${entry.total_amt}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-warning" onclick="editEntry(${index})">
                        <i class='fa fa-edit'></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteEntry(${index})">
                        <i class='fa fa-trash'></i>
                    </button>
                </td>
            </tr>`;
                tableBody.innerHTML += row;
            });

            // Update totals in footer
            document.getElementById('total-qty').innerText = totalQty;
            document.getElementById('total-amt').innerText = totalAmt.toFixed(2);
            document.getElementById('total-value').innerText = totalValue.toFixed(2);

            // Store JSON for server
            document.getElementById('entries').value = JSON.stringify(entries);
        }


        function editEntry(index) {
            const e = entries[index];
            document.getElementById('brand_id').value = e.brand_id;
            document.getElementById('coupon_qty').value = e.coupon_qty;
            document.getElementById('coupon_amt').value = e.coupon_amt;
            document.getElementById('total_amt').value = e.total_amt;
            $('#brand_id').trigger('change');
            document.getElementById('edit_index').value = index;
        }

        function deleteEntry(index) {
            entries.splice(index, 1);
            refreshTable();
        }

        function deleteAllEntries() {
            if (confirm('Are you sure you want to delete all entries?')) {
                entries = [];
                refreshTable();
            }
        }

        document.getElementById('add-entry').addEventListener('click', function() {
            const brand = document.querySelector(`#brand_id option:checked`);

            const entry = {
                brand_id: brand.value,
                brand_name: brand.text,
                coupon_qty: document.getElementById('coupon_qty').value,
                coupon_amt: document.getElementById('coupon_amt').value,
                total_amt: document.getElementById('total_amt').value
            };

            if (!entry.brand_id || !entry.coupon_qty || !entry.coupon_amt) {
                alert("Please fill brand, qty, and amount before adding.");
                return;
            }

            let index = document.getElementById('edit_index').value;
            if (index !== '') {
                entries[index] = entry;
            } else {
                entries.push(entry);
            }

            document.getElementById('edit_index').value = '';
            document.getElementById('brand_id').value = '';
            document.getElementById('coupon_qty').value = '';
            document.getElementById('coupon_amt').value = '';
            document.getElementById('total_amt').value = '';
            $('#brand_id').val('').trigger('change');
            refreshTable();
        });

        document.getElementById('save-form').addEventListener('submit', function(e) {
            if (entries.length === 0) {
                e.preventDefault();
                alert('Please add at least one entry before saving.');
                return false;
            }

            // Date, Voucher, and Account are outside the table, included in the form
            document.getElementById('entries').value = JSON.stringify(entries);
        });

        (function($) {
            $(function() {
                $('.select2').select2({
                    width: '100%'
                });
            });
        })(jQuery);
    </script>
@endsection