@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 justify-content-between align-items-center">
                    <h3 class="card-title">Coupon Bill Edit Screen</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.coupon_show') }}" class="btn btn-sm btn-danger">
                            <i class="fa fa-arrow-circle-left"></i> Back
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <form id="save-form" method="post" action="{{ route('admin.coupon_edit.update', $voucher_no) }}">
                        @csrf
                        <input type="hidden" id="edit_index" value="">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <x-admin-input value="{{ optional($coupons->first())->date }}" 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="{{ optional($coupons->first())->voucher_no }}"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <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>
                        <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 id="entry-table-body">
                                            @php
                                                $entries = $coupons
                                                    ->map(function ($item) {
                                                        return [
                                                            'id' => $item->id,
                                                            'brand_id' => $item->brand_id,
                                                            'brand_name' => $item->brand
                                                                ? $item->brand->brand_name
                                                                : '',
                                                            'coupon_qty' => $item->coupon_qty,
                                                            'coupon_amt' => $item->coupon_amt,
                                                            'total_amt' => number_format(
                                                                $item->coupon_qty * $item->coupon_amt,
                                                                2,
                                                            ),
                                                        ];
                                                    })
                                                    ->toArray();
                                            @endphp
                                            @foreach ($coupons as $index => $entry)
                                                <tr>
                                                    <td>{{ $entry->brand->brand_name ?? '' }}</td>
                                                    <td>{{ $entry->coupon_qty }}</td>
                                                    <td>{{ $entry->coupon_amt }}</td>
                                                    <td>{{ number_format($entry->coupon_qty * $entry->coupon_amt, 2) }}
                                                    </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>
                                            @endforeach
                                        </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">
                                <x-admin-input id="remark_short" name="remark_short" label="Remark"
                                    value="{{ optional($coupons->first())->remark_short }}"
                                    placeholder="Enter short remark" type="text" />
                            </div>

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

                            <!-- Action Buttons -->
                            <div class="col-md-2 mb-3 text-md-right text-left">
                                <div class=" flex-column flex-md-row justify-content-md-end">
                                    <button type="button" class="btn btn-danger mb-2 mb-md-0"
                                        onclick="deleteAllEntries()">Delete</button>
                                    <a href="{{ route('admin.coupon_show') }}"
                                        class="btn btn-secondary mb-2 mb-md-0">Close</a>
                                    <button type="submit" class="btn btn-success">Update</button>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="entries" id="entries">
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('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>
        // Initialize entries from server data (passed from blade)
        let entries = @json($entries) || [];

        // Calculate total on qty or amount input change
        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);

        // Refresh the table rows based on entries array
        function refreshTable() {
            const tableBody = document.querySelector('#entry-table tbody');
            tableBody.innerHTML = '';

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

            entries.forEach((entry, index) => {
                const qty = parseFloat(entry.coupon_qty) || 0;
                const amt = parseFloat(entry.coupon_amt) || 0;
                const rowTotal = qty * amt;

                totalQty += qty;
                totalAmt += amt;
                totalValue += rowTotal;

                let row = `
        <tr>
            <td>${entry.brand_name}</td>
            <td>${entry.coupon_qty}</td>
            <td>${entry.coupon_amt}</td>
            <td>${rowTotal.toFixed(2)}</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);
        }



        // Load entry data into form inputs for editing
        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 = parseFloat(e.total_amt).toFixed(2);
            $('#brand_id').trigger('change');
            document.getElementById('edit_index').value = index;
        }

        // Delete an entry by index
        function deleteEntry(index) {
            entries.splice(index, 1);
            refreshTable();
        }

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

        // Add or update entry on clicking "Add" button
        document.getElementById('add-entry').addEventListener('click', function() {
            const brandSelect = document.getElementById('brand_id');
            const brand = brandSelect.options[brandSelect.selectedIndex];

            const coupon_qty = document.getElementById('coupon_qty').value.trim();
            const coupon_amt = document.getElementById('coupon_amt').value.trim();

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

            const entry = {
                brand_id: brand.value,
                brand_name: brand.text,
                coupon_qty: coupon_qty,
                coupon_amt: coupon_amt,
                total_amt: (parseFloat(coupon_qty) * parseFloat(coupon_amt)).toFixed(2)
            };

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

            // Reset form inputs
            document.getElementById('edit_index').value = '';
            brandSelect.value = '';
            $('#brand_id').trigger('change');
            document.getElementById('coupon_qty').value = '';
            document.getElementById('coupon_amt').value = '';
            document.getElementById('total_amt').value = '';

            refreshTable();
        });

        // Validate on form submit that there is at least one entry
        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;
            }
            document.getElementById('entries').value = JSON.stringify(entries);
        });

        // Initialize select2 plugin
        (function($) {
            $(function() {
                $('.select2').select2({
                    width: '100%'
                });
            });
        })(jQuery);

        // Initial table render on page load
        refreshTable();
    </script>
@endsection