@extends('layouts.admin')
@section('title', 'Product | Mintavia Admin')
<style>
    .table-responsive {
        max-height: 550px;
        /* Adjust height as needed */
        overflow-y: auto;
    }

    .table thead th {
    vertical-align: top;
    padding-top: 0;
    padding-bottom: 10px;
}




    /* ✅ Row hover highlight */
    .table tbody tr:hover {
        background-color: #f1f9ff;
        /* हल्का नीला background */
        transform: scale(1.02);
        /* हल्का zoom effect */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* shadow add */
        transition: all 0.2s ease-in-out;
        position: relative;
        z-index: 10;
        /* hover row ऊपर दिखे */
    }

    /* सिर्फ Party वाला column बड़ा होगा */
    .col-party {
        min-width: 220px;
        max-width: 350px;
        white-space: nowrap;
        /* नाम एक ही लाइन में दिखेगा */
    }

    .col-date {
        min-width: 110px;
        max-width: 110px;
        white-space: nowrap;
        /* नाम एक ही लाइन में दिखेगा */
    }

    .pagination {
        justify-content: flex-end;
    }

    .page-item.disabled .page-link {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .page-link {
        cursor: pointer;
    }
</style>


@section('content')
    <div class="row">
        <div class="col-12">
            @if (isset($message) && $message)
                @switch($message['status'])
                    @case('success')
                        <script>
                            window.onload = function() {
                                toastr.success("{{ $message['message'] }}")
                            }
                        </script>
                    @break

                    @case('error')
                        <script>
                            window.onload = function() {
                                toastr.error("{{ $message['message'] }}")
                            }
                        </script>
                    @break
                @endswitch
            @endif
            <div class="card card-primary" wire:init="loadPosts">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Sale Register</h3>

                </div>
                <div class="card-body">
                    <form class="" id="export" method="get" action="{{ route('admin.reports.sale_register') }}">
                    </form>
                    <form class="" id="filter" method="post" action="{{ route('admin.reports.sale_register') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-2">
                                <x-admin-input type="date" name="fromDate" id="from-date"
                                    value="{{ date('Y-m-d') }}"></x-admin-input>
                            </div>
                            <div class="col-md-2">
                                <x-admin-input type="date" name="toDate" id="to-date"
                                    value="{{ date('Y-m-d') }}"></x-admin-input>
                            </div>
                            <div class="col-md-1">
                                <button class="btn btn-success">OK</button>
                            </div>

                            <div class="col-md-1">
                                <button class="btn btn-success" id="export-pdf-btn">Export PDF</button>
                            </div>

                            <div class="col-2">
                                <input type="text" name="bill_no" id="bill_no" class="search-query form-control"
                                    placeholder="Bill NO" />
                            </div>
                            <div class="col-2">
                                <input type="text" name="account_name" id="account_name"
                                    class="search-query form-control" placeholder="Prty Name" />
                            </div>
                            <div class="col-2">
                                <input type="text" name="global_search" id="global_search"
                                    class="search-query form-control" placeholder="Search" />
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-3">
                            <div>
                                <span id="pagination-info">Showing 0 to 0 of 0 entries</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="mr-3">
                                    <select id="per-page" class="form-control form-control-sm">
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="75">75</option>
                                        <option value="100">100</option>
                                        <option value="125">125</option>
                                        <option value="150">150</option>
                                        <option value="175">175</option>
                                        <option value="200">200</option>
                                        <option value="500">500</option>
                                        <option value="1000">1000</option>
                                    </select>
                                </div>
                                <div id="pagination-controls">
                                    <!-- Pagination buttons will be dynamically added here -->
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive mt-1">
                        <table class="table table-sm table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th class="col-date" style="vertical-align: top;">Date</th>
                                    <th style="vertical-align: top;">Bill No.</th>
                                    <th class="col-party" style="vertical-align: top;">Party</th>
                                    <th style="vertical-align: top;">Bs Amt.</th>
                                    <th style="vertical-align: top;">Dis Amt.</th>
                                    <th style="vertical-align: top;">after dis Amt.</th>
                                    <th style="vertical-align: top;">Tax Amt.</th>
                                    <th style="vertical-align: top;">Gross Amt.</th>
                                    <th style="vertical-align: top;">Bill Disc. %</th>
                                    <th style="vertical-align: top;">Bill Disc.Amt.</th>
                                    <th style="vertical-align: top;">Basic Tax %</th>
                                    <th style="vertical-align: top;">Basic Tax Amt</th>
                                    <th style="vertical-align: top;">Bill Net Amount</th>
                                    <th style="vertical-align: top;">Packaging Charges</th>
                                    <th style="vertical-align: top;">Tax Packaging</th>
                                    <th style="vertical-align: top;">Paking Tax Amt</th>
                                    <th style="vertical-align: top;">Trans.Charg.</th>
                                    <th style="vertical-align: top;">Trans.Tax</th>
                                    <th style="vertical-align: top;">Trans.Tax Amt</th>
                                    <th style="vertical-align: top;">Add.Charg.</th>
                                    <th style="vertical-align: top;">Net Amount</th>
                                    <th style="vertical-align: top;">Adv. Cash</th>
                                    <th style="vertical-align: top;">Bal.Amt.</th>
                                    <th style="vertical-align: top;">Remark (Short)</th>
                                    <th style="vertical-align: top;">Remark (Long)</th>
                                    <th style="vertical-align: top;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="table-list">
                                <!-- AJAX se data yahan load hoga -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="3"><strong>Total:</strong></td>
                                    <td id="basic">0.00</td>
                                    <td id="discount">0.00</td>
                                    <td id="tax">0.00</td>
                                    <td></td>
                                    <td></td>
                                    <td id="bill_discount_amount">0.00</td>
                                    <td id="basic_per">0.00</td>
                                    <td></td>
                                    <td id="basic_tax_amt">0.00</td>
                                    <td id="bill_net_amount">0.00</td>
                                    <td id="packaging_charges">0.00</td>
                                    <td></td>
                                    <td></td>
                                    <td id="transport_charges">0.00</td>
                                    <td></td>
                                    <td id="transport_tax_amt">0.00</td>
                                    <td id="bill_additional_charges">0.00</td>
                                    <td id="net">0.00</td>
                                    <td id="advance">0.00</td>
                                    <td id="balance">0.00</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
@section('js')
    <script>
        function formatDate(dateStr) {
            if (!dateStr) return '';
            let d = new Date(dateStr);
            let day = ("0" + d.getDate()).slice(-2);
            let month = ("0" + (d.getMonth() + 1)).slice(-2);
            let year = d.getFullYear();
            return `${day}-${month}-${year}`;
        }

        (function($) {
            $(function() {
                // Session storage se data restore karna
                if (sessionStorage.getItem('tableData')) {
                    $('#table-list').html(sessionStorage.getItem('tableData'));
                    let recordData = JSON.parse(sessionStorage.getItem('recordData'));
                    $('#records').text(recordData.records);
                    $('#basic').text(recordData.basic);
                    $('#discount').text(recordData.discount);
                    $('#tax').text(recordData.tax);
                    $('#net').text(recordData.net);
                    $('#bill_additional_charges').text(recordData.additional);
                    $('#advance').text(recordData.advance);
                    $('#balance').text(recordData.balance);
                }

                // Function to load data for a specific page
                function loadPage(page = 1) {
                    let url = $('#filter').attr('action');
                    const formdata = new FormData($('#filter')[0]);
                    let perPage = $('#per-page').val() || 25;
                    formdata.append('page', page);
                    formdata.append('per_page', perPage); // Add page parameter

                    $.ajax({
                        url: url,
                        type: 'post',
                        contentType: false,
                        processData: false,
                        data: formdata,
                        dataType: 'json'
                    }).done(function(json) {
                        console.log(json);
                        let Trow = '';
                        let records = json.data.length;
                        let tBasic = 0;
                        let tDiscAmt = 0;
                        let tTaxAmt = 0;
                        let tNetAmt = 0;
                        let tAdditional = 0;
                        let tAdvance = 0;
                        let tBalance = 0;

                        json.data.forEach(function(row) {
                            tBasic += Number(row.basic_amt) || 0;
                            tDiscAmt += Number(row.dis_amt) || 0;
                            tTaxAmt += Number(row.tax_amt) || 0;
                            tNetAmt += Number(row.net_amount) || 0;
                            tAdditional += Number(row.bill_additional_charges) || 0;
                            tAdvance += Number(row.advance) || 0;
                            tBalance += Number(row.balance) || 0;

                            let purchase_register_url =
                                "{{ route('admin.reports.sale_register_item') }}?bill_id=" +
                                (row.id || row.bill_no);
                            let edit_url = "{{ route('admin.sale.edit', ':id') }}"
                                .replace(':id', row.id || row.bill_no);

                            Trow += `<tr>
                                <td>${formatDate(row.date)}</td>
                                <td>${row.bill_no || ''}</td>
                                <td>${row.account_name || ''}</td>
                                <td>${row.basic_amount || ''}</td>
                                <td>${row.discount_amount || ''}</td>
                                 <td>${row.after_discount_amount || ''}</td>
                                <td>${row.tax_amt || ''}</td>
                                <td>${row.gross_amount || ''}</td>
                                <td>${row.bill_discount_per || ''}</td>
                                <td>${row.bill_discount_amount || ''}</td>
                                <td>${row.basic_tax_per || ''}</td>
                                <td>${row.basic_tax_amt || ''}</td>
                                <td>${row.net_amount || ''}</td>
                                <td>${row.packaging_charges || ''}</td>
                                <td>${row.tax_packaging || ''}</td>
                                <td>${row.packaging_tax_amt || ''}</td>
                                <td>${row.transport_charges || ''}</td>
                                <td>${row.tax_transport || ''}</td>
                                <td>${row.transport_tax_amt || ''}</td>
                                <td>${row.bill_additional_charges || ''}</td>
                                <td>${row.total_net_amt || ''}</td>
                                <td>${row.advance || ''}</td>
                                <td>${row.balance || ''}</td>
                                <td>${row.remark || ''}</td>
                                <td>${row.remark_long || ''}</td>
                                <td>
                                    <a href="${purchase_register_url}" class="btn btn-warning">E</a>
                                    <a href="${edit_url}">
                                        <button class="btn btn-success btn-sm">
                                            <i class="fa fa-pencil-alt"></i>
                                        </button>
                                    </a>
                                </td>
                            </tr>`;
                        });

                        $('#table-list').html(Trow);
                        $('#records').html(json.total);
                        $('#basic').html(tBasic.toFixed(2));
                        $('#discount').html(tDiscAmt.toFixed(2));
                        $('#tax').html(tTaxAmt.toFixed(2));
                        $('#net').html(tNetAmt.toFixed(2));
                        $('#bill_additional_charges').html(tAdditional.toFixed(2));
                        $('#advance').html(tAdvance.toFixed(2));
                        $('#balance').html(tBalance.toFixed(2));

                        // Update pagination info
                        $('#pagination-info').text(
                            `Showing ${(json.current_page - 1) * json.per_page + 1} to ${Math.min(json.current_page * json.per_page, json.total)} of ${json.total} entries`
                        );


                        // Render pagination controls
                        let paginationHtml = '';
                        if (json.last_page > 1) {
                            paginationHtml += `<nav><ul class="pagination">`;
                            // Previous button
                            paginationHtml += `<li class="page-item ${json.current_page === 1 ? 'disabled' : ''}">
                                <a class="page-link" href="#" data-page="${json.current_page - 1}">Previous</a>
                            </li>`;
                            // Page numbers
                            for (let i = 1; i <= json.last_page; i++) {
                                paginationHtml += `<li class="page-item ${i === json.current_page ? 'active' : ''}">
                                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                                </li>`;
                            }
                            // Next button
                            paginationHtml += `<li class="page-item ${json.current_page === json.last_page ? 'disabled' : ''}">
                                <a class="page-link" href="#" data-page="${json.current_page + 1}">Next</a>
                            </li>`;
                            paginationHtml += `</ul></nav>`;
                        }
                        $('#pagination-controls').html(paginationHtml);

                        // Store data in sessionStorage
                        sessionStorage.setItem('tableData', Trow);
                        sessionStorage.setItem('recordData', JSON.stringify({
                            records: json.total,
                            basic: tBasic.toFixed(2),
                            discount: tDiscAmt.toFixed(2),
                            tax: tTaxAmt.toFixed(2),
                            net: tNetAmt.toFixed(2),
                            additional: tAdditional.toFixed(2),
                            advance: tAdvance.toFixed(2),
                            balance: tBalance.toFixed(2)
                        }));
                    });
                }

                // Load first page on page load
                loadPage(1);

                // Handle pagination clicks
                $(document).on('click', '.page-link', function(e) {
                    e.preventDefault();
                    let page = $(this).data('page');
                    if (page) {
                        loadPage(page);
                    }
                });

                // Export PDF button
                $("#export-pdf-btn").on('click', function(e) {
                    e.preventDefault();
                    let fromDate = $('#from-date').val();
                    let toDate = $('#to-date').val();
                    let billNo = $('#bill_no').val();
                    let accountName = $('#account_name').val();

                    let exportForm = $('#export');
                    exportForm.empty();
                    exportForm.append(`<input type="hidden" name="fromDate" value="${fromDate}">`);
                    exportForm.append(`<input type="hidden" name="toDate" value="${toDate}">`);
                    exportForm.append(`<input type="hidden" name="bill_no" value="${billNo}">`);
                    exportForm.append(
                        `<input type="hidden" name="account_name" value="${accountName}">`);
                    exportForm.append(`<input type="hidden" name="export_type" value="pdf">`);
                    exportForm.submit();
                });

                // Filter form submission
                $('#filter').on('submit', function(e) {
                    e.preventDefault();
                    loadPage(1); // Reset to first page on filter
                });

                // Real-time search
                $(document).on('keyup', '#bill_no, #account_name, #global_search', function() {
                    loadPage(1); // Reset to first page on search
                });

                // Reload table whenever per-page changes
                $(document).on('change', '#per-page', function() {
                    loadPage(1); // reset to first page
                });

                // Save per-page
                $('#per-page').on('change', function() {
                    sessionStorage.setItem('perPage', $(this).val());
                    loadPage(1);
                });

                // On page load, restore per-page
                if (sessionStorage.getItem('perPage')) {
                    $('#per-page').val(sessionStorage.getItem('perPage'));
                }


            });
        })(jQuery);
    </script>
@endsection
@endsection