@extends('app-new')

{{-- Web site Title --}}
@section('title') Accounts Overview :: @parent @stop

@section('content')
    @if (isset($status))
        <div class="pad margin no-print">
            <div class="alert alert-{{ $status['code'] }} alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
                <ul>
                    @foreach ($status['messages'] as $m)
                        <li>{{ $m }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <section class="content-header">
        <h1>Accounts Overview :: {{ $account->name }}</h1>
        <ol class="breadcrumb" style="padding-left: 0px !important; margin-left: -12px">
            <li><a href="/accounts"><i class="fa fa-dashboard"></i> Home &nbsp;  </a></li><li class="active">Accounts
            </li>
        </ol>

        <h3>
            <div class="pull-left">
                <div class="pull-right">
                    <a href="{{ URL::to('/account/' . $account->id . '/income/add') }}"
                        class="btn btn-sm  btn-primary iframe cboxElement"><span
                            class="glyphicon glyphicon-plus-sign"></span> Add Income</a>
                </div>
            </div>

        </h3>
        <br>

        <div class="box-tools" style="text-align: right">
            <a href="{{ url('/accounts') }}" class="btn btn-primary btn-sm">
                <span class="glyphicon glyphicon-backward"></span> {{ trans('admin/admin.back') }}
            </a>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-7">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Report Filter</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body clearfix">
                        <form method='get' style="display: flex; align-items: center;">
                            <div class="pull-left me-2">
                                <input type=text name="from" class="datepicker" data-date-format="yyyy-mm-dd" 
                                    value='{{ $from }}'>
                            </div>
                            <div class="pull-left me-2">
                                <input type=text name="to" class="datepicker" data-date-format="yyyy-mm-dd"
                                    value='{{ $to }}'>
                            </div>
                            <div class="pull-right">
                                <button type=submit class="btn btn-primary btn-sm"><span
                                        class="glyphicon glyphicon-filter"></span> Filter Data</button>
                            </div>
                        </form>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!-- general form elements -->
                <div class="box box-primary">
                    {{-- <div class="box-header">
						<ul class="nav nav-tabs" style="clear:both;">
							<li class="active"><a href="/account/{{$account->id}}/view">Credits</a></li>
							<li ><a href="/account/{{$account->id}}/debits">Debits</a></li>
							 <li><a href="/account/{{$account->id}}/transactions">Transactions</a></li>
						</ul>
					</div> --}}

                    @php
                        $currentUrl = request()->path();
                    @endphp

                    <div class="box-header mt-2">
                        <div class="btn-group" role="group">
                            <a href="/account/{{ $account->id }}/view"
                                class="btn btn-primary me-2 {{ Str::endsWith($currentUrl, 'view') ? 'active' : '' }}">Credits</a>

                            <a href="/account/{{ $account->id }}/debits"
                                class="btn btn-success me-2 {{ Str::endsWith($currentUrl, 'debits') ? 'active' : '' }}">Debits</a>

                            <a href="/account/{{ $account->id }}/transactions"
                                class="btn btn-secondary me-2 {{ Str::endsWith($currentUrl, 'transactions') ? 'active' : '' }}">Transactions</a>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-12 col-md-12">
                                <div class="row">
                                    <table id="table" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Amount</th>
                                                <th>Channel</th>
                                                <th>Ref. No</th>
                                                <th>Created By</th>
                                                <th>Created At</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

{{-- @section('styles') --}}
@push('head-script')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@endpush

{{-- <link rel="stylesheet" href="/assets/plugins/timepicker/bootstrap-timepicker.min.css" type='text/css'>
@stop --}}

{{-- Scripts --}}
{{-- @section('scripts') --}}
@push('footer-script')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script src="/assets/plugins/timepicker/bootstrap-timepicker.min.js"></script>
    <script type="text/javascript">
        // $(".datepicker").datepicker();
        $(document).ready(function() {

            var oTable;
            // $(".timepicker").timepicker({
            //     showMeridian: false,
            //     showInputs: false
            // });

            oTable = $('#table').DataTable({
                "order": [
                    [0, "desc"]
                ],
                "sDom": "<'row d-flex align-items-center'<'col-md-3'l><'col-md-6'a><'col-md-3'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
                //"sPaginationType": "bootstrap",
                "processing": true,
                "serverSide": true,
                "ajax": "{{ url('/account/' . $account->id . '/credits-data') }}",
                "columns": [{
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'channel',
                        name: 'channel'
                    },
                    {
                        data: 'reference_no',
                        name: 'reference_no'
                    },
                    {
                        data: 'created_by',
                        name: 'created_by'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }
                ],
                // "fnDrawCallback": function (oSettings) {
                //     $(".iframe").colorbox({
                //         iframe: true,
                //         width: "80%",
                //         height: "80%",
                //         onClosed: function () {
                //             window.location.reload();
                //         }
                //     });
                // }
            });
        });
    </script>
@endpush