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

.table thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1000;
}

</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">Purchase Challan Register</h3>

                </div>
                <div class="card-body">
                    <form class="" id="filter" method="post" action="{{route('admin.reports.purchase_challan_register')}}">
                        @csrf
                        <div class="row">
                            <div class="col-md-3">
                                <x-admin-input type="date" name="fromDate" id="from-date" value="{{date('Y-m-d')}}"></x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <x-admin-input type="date" name="toDate" id="to-date" value="{{date('Y-m-d')}}"></x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-success">OK</button>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive mt-1">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>Date</th>
                                <th>Bill No.</th>
                                <th>Party</th>
                                <th>Item</th>
                                <th>Qty</th>
                                <th>Free</th>
                                <th>Rate</th>
                                <th>Basic Amt.</th>
                                <th>Disc %</th>
                                <th>Disc Amt.</th>
                                <th>Tax %</th>
                                <th>Tax Amt.</th>
                                <th>Net Amt.</th>
                            </tr>
                            </thead>
                            <tbody id="table-list">

                            </tbody>
                            <tfoot>
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th class="text-center">Records <p class="mb-0" id="records">0</p></th>
                                <th class="text-center">Total Qty. <p class="mb-0" id="qty">0</p></th>
                                <th class="text-center">Free <p class="mb-0" id="free"></p></th>
                                <th></th>
                                <th class="text-center">Basic Amt. <p class="mb-0" id="basic">0</p></th>
                                <th></th>
                                <th class="text-center">Discount <p class="mb-0" id="discount">0</p></th>
                                <th></th>
                                <th class="text-center">Tax Amt. <p class="mb-0" id="tax">0</p></th>
                                <th class="text-center">Net Amt. <p class="mb-0" id="net">0</p></th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        (function ($) {
            $(function () {
                $('#filter').on('submit', function (e) {
                    e.preventDefault()
                    let url = $(this).attr('action')
                    const formdata = new FormData(this)
                    $.ajax({
                        url: url,
                        type: 'post',
                        contentType: false,
                        processData: false,
                        data: formdata,
                    }).then(function (res) {
                        return JSON.parse(res)
                    }).done(function (json) {
                        console.log(json)
                        let Trow = ''
                        let records = 0
                        let tQty = 0
                        let tFree = 0
                        let tBasic = 0
                        let tDiscAmt = 0
                        let tTaxAmt = 0
                        let tNetAmt = 0
                        json.forEach(function (row) {
                            records++
                            tQty += Number(row.qty)
                            tFree += Number(row.qty)
                            tBasic += Number(row.basic_amt)
                            tDiscAmt += Number(row.dis_amt)
                            tTaxAmt += Number(row.tax_amt)
                            tNetAmt += Number(row.net_amount)
                            Trow += '<tr>'
                            Trow += `
                            <td>${row.due_date}</td>
                            <td>${row.bill_no}</td>
                            <td>${row.account_name}</td>
                            <td>${row.product_name}</td>
                            <td>${row.qty}</td>
                            <td>${row.free}</td>
                            <td>${row.rate}</td>
                            <td>${row.basic_amt}</td>
                            <td>${row.dis_per}</td>
                            <td>${row.dis_amt}</td>
                            <td>${row.tax_per}</td>
                            <td>${row.tax_amt}</td>
                            <td>${row.net_amount}</td>
                           `
                            Trow += '</tr>'
                        })
                        $('#table-list').html(Trow)
                        $('#records').html(records)
                        $('#qty').html(tQty)
                        $('#free').html(tFree)
                        $('#basic').html(tBasic)
                        $('#discount').html(tDiscAmt)
                        $('#tax').html(tTaxAmt)
                        $('#net').html(tNetAmt)
                    })
                })
            })
        })(jQuery)
    </script>
@endsection