@extends('layouts.admin')
@section('title', 'Day Book | Mintavia Admin')


@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">Day Book List</h3>

                </div>
                <div class="card-body">
                    <form class="" id="filter" method="post" action="{{ route('admin.reports.daybook') }}">
                        @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>
                                <button type="button" onclick="document.getElementById('print-form').submit()"
                                    class="btn btn-primary">Print</button>
                            </div>
                        </div>
                    </form>
                    <form id="print-form" class="d-none" method="post" action="{{ route('admin.products.print') }}">
                        @csrf
                        <textarea class="d-none" name="print_data" id="print-data">[]</textarea>
                    </form>
                    <div class="table-responsive mt-1" style="max-height: 400px; overflow-y: auto;" id="table">
                        <table class="table table-sm table-striped table-bordered" id="datatable" style="border-collapse: collapse; width: 100%;">
                            <thead style="position: sticky; top: 0; z-index: 1; background-color: white;">
                                <tr>
                                    <th style="white-space: nowrap;">Date</th>
                                    <th style="white-space: nowrap;">Transaction Type</th>
                                    <th style="white-space: nowrap;">Account Name</th>
                                    <th style="white-space: nowrap;">Particulars</th>
                                    <th style="white-space: nowrap;">Dr. Amt</th>
                                    <th style="white-space: nowrap;">Cr. Amt</th>
                                </tr>
                            </thead>
                            <tbody id="table-list">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row ">
        <div class="col-3 ml-auto">
            <div class="card">
                <div class="card-body">
                    Total Dr. Amt.
                    <hr>
                    <div class="w-100 text-right" id="dr">0</div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card">
                <div class="card-body">
                    Total Cr. Amt.
                    <hr>
                    <div class="w-100 text-right" id="cr">0</div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        (function($) {
            let trcount = $('table thead tr th').length
            let myList = []
            let datatable
            let table = ''
            $(function() {
                table = $('#table').html()
                datatable = $('#datatable').DataTable({
                    "ordering": false,
                    "searching": false,
                    "lengthMenu": [100, 150],
                })
                $('#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 res
                    }).done(function(json) {
                        trcount = $('table thead tr th').length
                        let tr = ''
                        let $dr = 0
                        let $cr = 0
                        $('#table').html(table)
                        json.forEach(function(row) {

                            if (row.dr != '') {
                                $dr += Math.abs(Number(row
                                    .dr)) // ✅ negative value को + में जोड़ना
                            }
                            if (row.cr != '') {
                                $cr += Math.abs(Number(row
                                    .cr)) // ✅ negative value को + में जोड़ना
                            }

                            tr += `
                        <tr>
                            <td>${row.date}</td>
                            <td>${row.transaction_type}</td>
                            <td>${row.account_name}</td>
                            <td>Voucher No:${row.voucher_id ?? ''}${row.voucher_no ?? ''},${row.short_narration ?? ''}</td>
                            <td>${row.dr}</td>
                            <td>${row.cr}</td>
                        </tr>

                        `
                        })

                        $('#table-list').html(tr)
                        $('#dr').html($dr.toFixed(2)) // ✅ Only 2 decimals
                        $('#cr').html($cr.toFixed(2)) // ✅ Only 2 decimals
                        if (json.length == 0) {
                            tr = '<tr><td colspan="' + trcount +
                                '" class="text-center">No Data<td></tr>'
                            $('#table-list').html(tr)
                        }
                        datatable.destroy()
                        datatable = $('#datatable').DataTable({
                            "ordering": false,
                            "searching": false,
                            "lengthMenu": [100, 150],
                        })
                    })
                })
                let tr = '<tr><td colspan="' + trcount + '" class="text-center">No Data<td></tr>'
                $('#table-list').html(tr)
            })
        })(jQuery)
    </script>
@endsection