@extends('layouts.master')
@section('css')
    <style>
        .group-name,
        .ledger-view:hover {
            cursor: pointer;
        }
    </style>
@endsection
@section('title')
    Cash Flow Group Summary
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <div class="col-md-6 flex-grow-1">
                        <small>Group Summary</small>
                        <h5 class="card-title mb-0 flex-grow-1"><b>{{ $group->name }}</b></h5>
                    </div>
                    <div class="col-md-6">
                        <button id="back-btn" type="button" class="btn btn-soft-primary waves-effect waves-light"
                            style="float: right;"><i class="las la-angle-double-left"></i> Go Back</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label for="fromDate">From Date</label>
                            <input class="form-control" id="from_date" type="date" name="from_date"
                                value="{{ $fromDate }}">
                        </div>
                        <div class="col-md-3">
                            <label for="toDate">To Date</label>
                            <input class="form-control" id="to_date" type="date" name="to_date"
                                value="{{ $toDate }}">
                        </div>
                        <div class="col-md-3 col-sm-6 mb-2">
                            <label class="label">Cash/Bank</label>
                            <select class="form-select" name="flow_type" id="flow_type">
                                <option value="all" {{ app('request')->input('flow_type') == 'all' ? 'selected' : '' }}>
                                    All</option>
                                <option value="bank" {{ app('request')->input('flow_type') == 'bank' ? 'selected' : '' }}>
                                    Bank</option>
                                <option value="cash" {{ app('request')->input('flow_type') == 'cash' ? 'selected' : '' }}>
                                    Cash</option>
                            </select>
                        </div>
                        <div class="col-md-1 text-end" style="margin-top: 29px;">
                            <button type="button" name="filter" id="filter" class="btn btn-sm btn-primary"><i
                                    class="ri-search-line fs-6"></i></button>
                            <button type="button" name="refresh" id="refresh" class="btn btn-sm btn-danger"><i
                                    class="ri-refresh-line fs-6"></i></button>
                        </div>
                    </div>
                    <table id="fixed-header" class="table table-bordered dt-responsive nowrap table-striped align-middle"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th>Particulars</th>
                                <th style="width: 250px;">Inflow</th>
                                <th style="width: 250px;">Outflow</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($group->children as $subGroup)
                                @if ($type == 'inflow')
                                    @if ($subGroup->inflow == 0)
                                        @continue
                                    @else
                                        <tr>
                                            <td><b><a class="group-name inflow"
                                                        data-id="{{ $subGroup->id }}">{{ $subGroup->name }}</a></b>
                                            </td>
                                            <td>{{ number_format($subGroup->inflow, 2) }}</td>
                                            <td></td>
                                        </tr>
                                    @endif
                                @else
                                    @if ($subGroup->outflow == 0)
                                        @continue
                                    @else
                                        <tr>
                                            <td><b><a class="group-name outflow"
                                                        data-id="{{ $subGroup->id }}">{{ $subGroup->name }}</a></b>
                                            </td>
                                            <td></td>
                                            <td>{{ number_format($subGroup->outflow, 2) }}</td>
                                        </tr>
                                    @endif
                                @endif
                            @endforeach
                            @foreach ($group->ledgers as $ledger)
                                @if ($type == 'inflow')
                                    @if ($ledger->inflow == 0)
                                        @continue
                                    @else
                                        <tr>
                                            <td><a class="ledger-view"
                                                    data-id="{{ $ledger->id }}">{{ $ledger->name }}</a>
                                            </td>
                                            <td>{{ $ledger->inflow }}
                                            </td>
                                            <td>
                                            </td>
                                        </tr>
                                    @endif
                                @else
                                    @if ($ledger->outflow == 0)
                                        @continue
                                    @else
                                        <tr>
                                            <td><a class="ledger-view"
                                                    data-id="{{ $ledger->id }}">{{ $ledger->name }}</a>
                                            </td>
                                            <td>
                                            </td>
                                            <td>{{ $ledger->outflow }}
                                            </td>
                                        </tr>
                                    @endif
                                @endif
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Total</th>
                                <th>{{ number_format($groupInflow, 2) }}</th>
                                <th>{{ number_format($groupOutflow, 2) }}</th>
                            </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/js/moment.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        let flowTypeParam;
        $(document).ready(function() {
            var currentURL = window.location.href.split('?')[1];
            var urlSearchParams = new URLSearchParams(currentURL);
            var fromDateParam = urlSearchParams.get("from_date");
            var toDateParam = urlSearchParams.get("to_date");
            flowTypeParam = urlSearchParams.get("flow_type");
            if (fromDateParam && toDateParam) {
                $('#from_date').val(fromDateParam);
                $('#to_date').val(toDateParam);
            }

            $('#filter').click(function(e) {
                e.preventDefault();
                let from_date = $('#from_date').val();
                let to_date = $('#to_date').val();
                //check dates not null
                if (from_date != '' && to_date != '') {
                    window.location = window.location.href.split('?')[0] + '?from_date=' + from_date +
                        '&to_date=' + to_date + '&flow_type=' + $('#flow_type').val();
                } else if (flowTypeParam != 'all') {
                    window.location = window.location.href.split('?')[0] + '?flow_type=' +
                        $('#flow_type').val();
                } else {
                    alert('Both Date is required');
                }
            });

            $('#refresh').click(function(e) {
                e.preventDefault();
                window.location = window.location.href.split('?')[0];
            });
        });
        const queryString = window.location.search;
        let fromDate;
        let toDate;
        if (queryString != "") {
            const urlParams = new URLSearchParams(queryString);
            fromDate = urlParams.get('from_date');
            toDate = urlParams.get('to_date');
        }

        $(document).on('click', '.inflow, .outflow', function() {
            let groupId = $(this).data('id');
            let type = $(this).hasClass('inflow') ? 'inflow' : 'outflow';
            let url = '/admin/cash-flow/' + groupId + '/' + type;
            if (from_date.value != '' && to_date.value != '') {
                url += '?from_date=' + from_date.value + '&to_date=' + to_date.value + '&flow_type=' +
                    flowTypeParam;
            } else if (flowTypeParam != 'all') {
                url += '?flow_type=' + flowTypeParam;
            }
            $(this).attr('href', url);
        });

        $(document).on('click', '.ledger-view', function() {
            let legerId = $(this).data('id');
            let url = '/admin/ledger-cash-flow/' + legerId;
            if (queryString != "" && fromDate != "" && toDate != "") {
                url += '?from_date=' + fromDate + '&to_date=' + toDate + '&flow_type=' + flowTypeParam;
            }
            $(this).attr('href', url);
        });

        $('#back-btn').click(function(e) {
            e.preventDefault();
            window.location = '/admin/cash-flow?from_date=' + fromDate + '&to_date=' + toDate + '&flow_type=' +
                flowTypeParam;
        });
    </script>
@endsection