@extends('layouts.app')

@section('title', __('accounting::lang.trial_balance'))

@section('content')

@include('accounting::layouts.nav')
<style>
    .balance-style {
        background: #f4f8f8 !important;
    }

    .table {
        border: 1px solid #f4f4f4;
    }

    th,td {
        text-align: center;
        border: 1px solid #e8e6e6;
    }

    .total-balanc{
        background: darkgray;
        font-weight: bold;
    }
</style>
<section class="content">
        
    <div class="col-md-4">
        <div class="form-group">
            {!! Form::label('select_location', __('lang.select_location') . ':') !!}
            <select class="form-control select2" name="location_id" id="location_id">
                @foreach ($business_locations as $key => $value)
                    <option value="{{ $key }}" @if(!empty($location_id) && $location_id == $key) selected @endif>{{ $value }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="col-md-5">
        <div class="form-group">
            {!! Form::label('date_range_filter', __('report.date_range') . ':') !!}
            {!! Form::text('date_range_filter', null, 
                ['placeholder' => __('lang_v1.select_a_date_range'), 
                'class' => 'form-control', 'readonly', 'id' => 'date_range_filter']) !!}
        </div>
    </div>

    <div class="col-md-12">
        
        <div class="box box-warning">
            <div class="box-header with-border text-center">
                <h2 class="box-title">@lang( 'accounting::lang.trial_balance')</h2>
                <!-- <p>{{@format_date($start_date)}} ~ {{@format_date($end_date)}}</p> -->
            </div>

            <div class="box-body">
                <table class="table table-stripped">
                    <thead>
                        <tr>
                            <th rowspan="2" class="total-balanc" style="vertical-align: middle;">@lang('accounting::lang.account')</th>
                            <th colspan="2" class="balance-style">@lang('accounting::lang.initial_balance')</th>
                            <th colspan="2">{{ @format_date($start_date) }} ~ {{ @format_date($end_date) }}</th>
                            <th colspan="2" class="balance-style">@lang('accounting::lang.end_balance')</th>
                        </tr>
                        <tr>
                            <th class="balance-style">@lang('accounting::lang.debit')</th>
                            <th class="balance-style">@lang('accounting::lang.credit')</th>
                        
                            <th>@lang('accounting::lang.debit')</th>
                            <th>@lang('accounting::lang.credit')</th>

                            <th class="balance-style">@lang('accounting::lang.debit')</th>
                            <th class="balance-style">@lang('accounting::lang.credit')</th>
                        </tr>
                    </thead>

                    @php
                        $total_debit = 0;
                        $total_credit = 0;
                    @endphp

                    <tbody>
                        @foreach($accounts as $account)
                            @php
                                $total_debit += $account->debit_balance;
                                $total_credit += $account->credit_balance;
                            @endphp
                            <tr>
                                <td class="total-balanc">{{ $account->name }}</td>

                                <td class="balance-style">@format_currency($account->initial_debit)</td>
                                <td class="balance-style">@format_currency($account->initial_credit)</td>
                            
                                <td>@format_currency($account->debit_balance)</td>
                                <td>@format_currency($account->credit_balance)</td>

                                <td class="balance-style">@format_currency($account->end_debit)</td>
                                <td class="balance-style">@format_currency($account->end_credit)</td>
                            </tr>
                        @endforeach
                    </tbody>

                    <tfoot>
                        @php
                            $total_initial_debit = $accounts->sum('initial_debit');
                            $total_initial_credit = $accounts->sum('initial_credit');

                            $total_end_debit = $accounts->sum('end_debit');
                            $total_end_credit = $accounts->sum('end_credit');
                        @endphp
                        <tr class="total-balanc">
                            <th>Total</th>
                            <th class="total_debit">@format_currency($total_initial_debit)</th>
                            <th class="total_credit">@format_currency($total_initial_credit)</th>

                            <th class="total_debit">@format_currency($total_debit)</th>
                            <th class="total_credit">@format_currency($total_credit)</th>

                            <th class="total_debit">@format_currency($total_end_debit)</th>
                            <th class="total_credit">@format_currency($total_end_credit)</th>
                        </tr>
                    </tfoot>
                </table>
            </div>

        </div>
    </div>

</section>


@stop

@section('javascript')

<script type="text/javascript">
    $(document).ready(function(){

        dateRangeSettings.startDate = moment('{{$start_date}}');
        dateRangeSettings.endDate = moment('{{$end_date}}');

        $('#date_range_filter').daterangepicker(
            dateRangeSettings,
            function (start, end) {
                $('#date_range_filter').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                apply_filter();
            }
        );
        $('#date_range_filter').on('cancel.daterangepicker', function(ev, picker) {
            $('#date_range_filter').val('');
            apply_filter();
        });

        $('#location_id').on('change', function() {
            apply_filter();
        });

        function apply_filter(){
            var location_id   = $('#location_id').val();
            var start = '';
            var end = '';

            if ($('#date_range_filter').val()) {
                start = $('input#date_range_filter')
                    .data('daterangepicker')
                    .startDate.format('YYYY-MM-DD');
                end = $('input#date_range_filter')
                    .data('daterangepicker')
                    .endDate.format('YYYY-MM-DD');
            }

            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('start_date', start);
            urlParams.set('end_date', end);
            urlParams.set('location_id', location_id);
            window.location.search = urlParams;
        }
    });

</script>

@stop