@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a  href="{{ route('admin.dashboard') }}">Home</a></li>
                <li><a  href="{{route('admin.sales.index')}}">Account Statement</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="portlet">
            <!-- BEGIN PAGE HEADER-->
            
            <div class="portlet-title">
                <div class="caption">
                    <h2>Account Statement</h2>
                    <span class="subtitle"> View your bank or cash account details and account activity for given date range.</span>
                </div>
                <div class="actions success_actions " style="">

                    <div class="actions_dropdown  hidden">
                        <span>Actions</span>
                        <form action="{{ route('admin.account-statement-data') }}" method="POST">
                            @csrf
                            <input type="hidden" name="from_date" id="from_date" value="">
                            <input type="hidden" name="to_date" id="to_date" value="">
                            <input type="hidden" name="account_id_statement" id="account_id_statement" value="">
                            <ul class="actions_list">
                                <li>
                                    <button type="submit" class="" name="print_pdf" value="landscape">
                                        Landscape PDF
                                    </button>
                                </li>
                                <li>
                                    <button type="submit" class="" name="print_pdf" value="portrait">
                                        Portrait PDF
                                    </button>
                                </li>
                                <li>
                                    <button type="submit" class="" name="excel" value="excel">
                                        Export to Excel
                                    </button>
                                </li>
                            </ul>
                        </form>

                    </div>

                </div>
            </div>
            <!-- BEGIN PAGE BAR -->
            <div class="row">
                <div class="col-md-12">
                    <!--Page Top Filters Fields-->
                    <div class="row form-group" style="margin-left: 0">

                        <div class="caption col-md-2">
                            <select name="account_id" id="account_id" class="form-control select2 validate">
                                    <option></option>
                                    @foreach (  $data['accounts'] as $key=>$value )
                                    <option value="{{ $key }}" {{ ($data['selected_account'] == $key)? 'selected': '' }}>{{ $value }}</option>  
                                    @endforeach
                                    
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select
                                class="form-control select2 filter duration_by_day select2-hidden-accessible validate"
                                name="period_filter" tabindex="-1" id ="period_filter" aria-hidden="true" required>
                                <option value=""></option>
                                <option value="this_week" selected>This Week</option>
                                <option value="last_week">Last Week</option>
                                <option value="this_month">This month</option>
                                <option value="last_month">Last month</option>
                                <option value="this_quarter">This quarter</option>
                                <option value="last_quarter">Last quarter</option>
                                <option value="this_year">This year</option>
                                <option value="last_year">Last year</option>
                                <option value="custom">Custom</option>
                            </select>
                        </div>

                        <div class="caption col-md-2">
                            <div class="input-group">
                                <input name="startDate" id="startDate" class="form-control validate calender_popup_date_open" disabled
                                       value="{{ $data['from_date'] }}"
                                       type="text">

                                <span class="input-group-btn">
                                    <button class="btn default custom_calender custom_calender_date_open" type="button" style="margin: 0">
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <div class="caption col-md-2">
                            <div class="input-group">
                                <input name="endDate" id="endDate" class="form-control validate calender_popup_date_open" disabled
                                       value="{{ $data['to_date'] }}"
                                       type="text">

                                <span class="input-group-btn">
                                    <button class="btn default custom_calender custom_calender_date_open" type="button" style="margin: 0">
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </span>
                            </div>
                        </div>

                     
                        <div class="caption col-md-2">
                            <button class="theme_btn_round btn filter" type="button" name="account_satement_filter" value="load">
                                Filter
                            </button>
                        </div>
                    </div>
                    <!--THIS IS CONTENT DIV START-->
                    <div class="portlet-body flip-scroll">
                        <!-- BEGIN LIST OF ORDERS -->
                        <div class="col-md-12">
                            <div class="portlet">

                                <div class="portlet-body flip-scroll">
                                    <table class="table table-striped table-bordered table-hover table-condensed flip-content account_statement">
                                        <thead class="flip-content">
                                            <tr>
                                                <th class="text_center"> Date </th>
                                                <th class="text_center"> Description</th>
                                                <th class="text_center"> Type </th>
                                                <th class="text_center">Debit</th>
                                                <th class="text_center">Credit</th>
                                                <th class="text_center">Balance</th>
                                                <th style="position: relative; width: 25px;">
                                                    <img class="dots_menu_grey" style="width: inherit"
                                                         src="{{asset('assets/global/img/dots_menu_grey.png')}}">
                                                 </th>
                                            </tr>
                                        </thead>
                                        <tbody class="sales_invoices_body">
                                            <tr>
                                                <td class="text_center"><a href="sale_invoice/invoice_uuid" class="editable_name"></a></td>
                                                <td></td>
                                                <td class="text_center"></td>
                                                <td class="text_center"></td>
                                                <td class="text_right"></td>
                                                <td class="text_right"></td>
                                                <td class="text_right"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                        <!-- END LIST OF ORDERS -->
                        <div class="row bottom_balances" style="">
                            <div class="col-md-5"></div>
                            <div class="col-md-7">

                            


                                <div class="portlet-body">
                                    <div class="products box">
    
                                        <div class="header_product">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="col-md-6 products_row_header">Statement Summary
                                                    </div>
                                                    <div class="col-md-2 products_row_header text_right">
                                                        Debit
                                                    </div>
                                                    <div class="col-md-2 products_row_header text_right">Credit</div>
                                                    <div class="col-md-2 products_row_header text_right">Balance
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="products_wrap">
    
                                            <div class="products">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-6 products_row">Opening Balance</div>
                                                        <div class="col-md-2 products_row text_right">
                                                        </div>
                                                        <div class="col-md-2 products_row text_right" style="">
                                                        </div>
                                                        <div class="col-md-2 products_row text_right opb_amount">{{ number_format(0, $data['decimal_point']) }}</div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="products">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-6 products_row">Totals </div>
                                                        <div class="col-md-2 products_row text_right debit_total">{{ number_format(0, $data['decimal_point']) }}</div>
                                                        <div class="col-md-2 products_row text_right credit_total" style="">{{ number_format(0, $data['decimal_point']) }}</div>
                                                        <div class="col-md-2 products_row text_right balance_total">{{ number_format(0, $data['decimal_point']) }}</div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="products">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-6 products_row">Closing Balance as on
                                                            <span class="filter_head balancedate">{{ date('d-M-Y') }}</span></div>
                                                        <div class="col-md-2 products_row text_right">
                                                        </div>
                                                        <div class="col-md-2 products_row text_right" style="">
                                                        </div>
                                                        <div class="col-md-2 products_row text_right balance_total clb_amount">{{ number_format(0, $data['decimal_point']) }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="products">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-3 products_row">Movement</div>
                                                        <div class="col-md-3 products_row text_right">
                                                        </div>
                                                        <div class="col-md-3 products_row text_right" style="">
                                                        </div>
                                                        <div class="col-md-3 products_row text_right movementt">
                                                            <i class="fa fa-angle-double-up " style="color: #37c6d3">
                                                            </i> {{ number_format(0, $data['decimal_point']) }}</div>
                                                    </div>
                                                </div>
                                            </div>
    
    
                                        </div>
    
                                    </div>
                                    <!-- END LIST OF PRODUCTS -->
    
    
                                </div>


                            </div>
                        </div>
                    </div>
                    <!--THIS IS CONTENT DIV END-->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" >
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
       <h2>Do you want to delete?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>
<!-- //SWEET_ALERT END// -->
@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
<!-- DATE PICKER -->
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
<!-- DATE PICKER -->
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css"/>
<style>
    .products_row_header {
        float: left;
        padding: 12px 5px;
        border-right: 1px solid #8a8e94;
        color: #FFFFFF;
    }

    .products_row {
        float: left;
        padding: 12px 5px;
        position: relative;
    }

    .products {
        color: #4E4F4F;
        line-height: 22px;
        font-weight: 600;
    }

    .clb_amount {
        font-size: 18px;
    }

    .products_row_header:last-child {
        border-right: none;
    }

    .header_product {
        background: #636871;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }

    .products_wrap > .products:nth-of-type(2n+1) {
        background-color: #f5f6f7 !important;
    }

    .box {
        border: 1px solid #c4c6ca !important;
        width: 100%;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
        /*overflow: hidden;*/
        padding: 0;
    }
    #DataTables_Table_0 td:nth-child(5),#DataTables_Table_0 td:nth-child(6),#DataTables_Table_0 td:nth-child(7),#DataTables_Table_0 td:nth-child(4) {
        text-align: right;
    }
    #DataTables_Table_0 td:nth-child(1),#DataTables_Table_0 td:nth-child(2),#DataTables_Table_0 td:nth-child(3){
        text-align: center;
    }



</style>
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}" type="text/javascript"></script>
<script src="{{asset('js/general.js')}}"></script>
@include('admin.js.account-statement')
@stop