@php Fun::lang() @endphp
@extends('adminlte::page')
@section('css')
    <style>
        .underline {
            color: #003eff;
            font-weight: bold;
        }

        .underline1 {
            color: #8a1f11;
            font-weight: bold;
        }

        tr.levels1 td:nth-child(2) {
            padding-left: 1rem !important;
        }
        tr.levels2 td:nth-child(2) {
            padding-left: 3rem !important;
        }
        tr.levels3 td:nth-child(2) {
            padding-left: 5rem !important;
        }
        tr.levels4 td:nth-child(2) {
            padding-left: 7rem !important;
        }
        tr.levels5 td:nth-child(2) {
            padding-left: 9rem !important;
        }
        tr.levels6 td:nth-child(2) {
            padding-left: 11rem !important;
        }

    </style>
@stop
@section('content')
    <div class="title-page">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li><a href="#">Accounting Report</a></li>
                <li><a href="#">Income Statement</a></li>
            </ul>
        </div>
    </div>
    <div class="page">
        <div class="top-content">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="title-add">
                        <div class="pull-left">
                            <h3>Income Statement</h3>
                        </div>
                        <div class="pull-right">
                        </div>
                    </div>
                </div>
                <form action="{{route('print.income-statement')}}" method="POST">
                    @csrf
                    {{method_field('POST')}}

                    <?php
                    $start  = new DateTime('first day of this month');
                    $from   = $start->format('d-m-Y');
                    $end    = new DateTime('last day of this month');
                    $to     = $end->format('d-m-Y');
                    ?>
                    <div class="row">
                        <div class="col-sm-12 toggle-div">
                            <div class="col-sm-12">
                                <hr>
                                <div class="col-sm-4">
                                    <label for="">Start Date</label>
                                    <div class="form-group">
                                        <input type="text" name="from_date" class="form-control date_picker start_date" value="{{$from}}">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label for="">End Date</label>
                                    <div class="form-group">
                                        <input type="text" name="to_date" class="form-control date_picker end_date" value="{{$to}}">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label for="">&nbsp;</label>
                                    <div class="form-group">
                                        <input type="hidden" value="{{$branch->branch_en}}" id="branch_en">
                                        <input type="hidden" value="{{$branch->branch_kh}}" id="branch_kh">
                                        <button type="button" class="btn-warning btn btn-md" onclick="search()"><i class="fa fa-search"></i> Search</button>
                                        <button type="button" class="btn btn-info btn-lg fa fa-print print_button"> Print</button>
                                        <button type="button" class="btn btn-success btn-lg fa fa-file-excel-o " onclick="tableToExcel('table_journal', 'income statement')"> Excel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="form-wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <div class="box-body table-responsive" id="Income_statement">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script type="text/javascript">
        $(document).ready(function() {
            search();
        });

        function search() {
            $.ajax({
                url: "{{ route('accounting-report.income-statement')}}",
                type: "get",
                dataType: "json",
                data: {
                    start_date: $('input[name="from_date"]').val(),
                    end_date: $('input[name="to_date"]').val()
                },
                beforeSend: function() {
                    $('#Income_statement').html('<p class="text-md text-center">Loading <i class="fa fa-spinner fa-spin"></i></p>');
                },
                success: function(response) {
                    $('#Income_statement').html(response['content']);
                }
            });
        }
        $(document).on('click', '.print_button', function() {
            let company_name_kh = $('#branch_kh').val();
            let company_name_en = $('#branch_en').val();
            let report_name = 'Report Income Statement';
            $('#Income_statement').printThis({
                importCSS: false,
                loadCSS: "{{ asset('assets/layouts/report.css') }}",
                afterPrint: function() {},
                header: `<div class="header pt_15 none_bg">
                        <div class="div2">
                            <img src="" alt="" class="logo">
                        </div>
                        <div class="div8">
                            <div class="title">
                                <h2>${company_name_kh}</h2>
                                <h2>${company_name_en}</h2>
                                <h3>${report_name}</h3>
                            </div>
                        </div>
                        <div class="div2">

                        </div>
                        <div class="div12 border-bottom">

                        </div>
                    </div>`,
            });
        });
    </script>
@endsection