@extends('admin.layout.master')
@section('title', 'Daily Transaction Report')
@section('custom_style')
    <link href="{{ asset('assets/css/custom_print.css') }}" rel="stylesheet" />
    <style>
        #ledger_detail {
            --bs-offcanvas-width: 600px;
        }
    </style>
@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <div class="col-md-6 col-12 pl-0">
                <h4>Daily Transactions Report</h4>
            </div>
            <div class="col-6 d-flex justify-content-end checkbox">
                @include('inventory.global.report_print_excel_button')
            </div>
        </div>
        <div class="card-body">
            <div class="d-flex flex-wrap justify-content-center mb-1 mt-2">
                <div class="col-md-2">
                    <label>Start Date</label>
                    <input type="text" class="form-control date_picker" name="date_from" id="date_from"
                        placeholder="Select Start Date" value="{{ date('d-m-Y') }}" />
                </div>
                &nbsp;
                <div class="col-md-2">
                    <label>End Date</label>
                    <input type="text" class="form-control date_picker" name="date_to" id="date_to"
                        placeholder="Select Start Date" value="{{ date('d-m-Y') }}" />
                </div>
                &nbsp;
                <div class="col-1">
                    <label class="w-100">&nbsp;</label>
                    <button class="btn btn-primary w-100 btn-sm btn-block" id="btn_search" onclick="search()"
                        type="button">Search</button>
                </div>
            </div>
            <hr>
            <div class="common_excel_export" id="printThis">

            </div>
        </div>
    </div>
    @include('v2.inventory.daily_transaction_report.report_detail')
@endsection

@section('script')
    <script>
        const myCanvas = new bootstrap.Offcanvas('#ledger_detail');
        $(document).ready(function() {
            select2('select_2', 'Select', true);
            myCanvas.hide();
        });

        function loader(buttonId, title, status = true) {
            $("#" + buttonId).prop("disabled", status).text(title);
        }

        function search() {
            loader('btn_search', 'Processing...');
            $('#printThis').html(`<div class="col-md-12 text-center"><h6>Please wait...</h6></div>`);
            ajaxCallV2('/inventory/daily-transaction-report', 'GET', {
                date_from: $('#date_from').val(),
                date_to: $('#date_to').val(),
            }, function(success) {
                $('#loader').hide();
                $('#printThis').html(success);
                loader('btn_search', 'Search', false);
            });
        }

        function openModal(params) {
            const data = params;
            if (data['info'].child.length == 0) return;
            let html = "";

            data['info'].child.forEach((item, index) => {
                let debit = item.journals.filter((j) => j.date >= data['start_date'] && j.date <= data[
                    'end_date'] && j.type == 0).reduce((a, b) => a + b.amount, 0);
                let credit = item.journals.filter((j) => j.date >= data['start_date'] && j.date <= data[
                    'end_date'] && j.type == 1).reduce((a, b) => a + b.amount, 0);
                let openingDebit = item.journals_for_opening.filter((j) => j.date < data['start_date'] && j.type == 0).reduce((
                    a, b) => a + b.amount, 0);
                let openingCredit = item.journals_for_opening.filter((j) => j.date < data['start_date'] && j.type == 1).reduce((
                    a, b) => a + b.amount, 0);
                let opening = openingDebit - openingCredit;

                let closing = opening + debit - credit;
                if (data['info'].auto_code[0] == 2 || data['info'].auto_code[0] == 4) {
                    closing = closing * (-1);
                }

                html += `<tr>
                            <td>${++index}</td>
                            <td>${item.auto_code}</td>
                            <td>${item.name}</td>
                            <td class="text-end">${opening.toLocaleString()}</td>
                            <td class="text-end">${debit.toLocaleString()}</td>
                            <td class="text-end">${credit.toLocaleString()}</td>
                            <td class="text-end">${closing.toLocaleString()}</td>
                        </tr>`;
            });

            $('#detail_data').html(html);
            myCanvas.show();
        }
    </script>
@endsection