@extends('layouts.master')

@section('title', 'Bank Reconcilation Report')

@section('content')

    <style>
        .ledger_caption {
            text-align: center;
            background: rgb(145, 159, 182);
            color: #ffffff;
            padding: 8px;
            font-weight: bold;
        }
    </style>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Bank Reconcilation Report</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Bank Reconcilation Report</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-fluid">
        <div class="card card-primary card-outline card-outline-tabs">
            <div class="col-md-12">
                <div class="col-lg-12">
                    <div class="row mt-2">
                        <div class="col-lg-3">
                            <label>Bank Account</label>
                            <select class="form-control select2" id="bank_chart_of_account_id" name="bank_chart_of_account_id">
                                <option value="">Select Bank Account</option>
                                @foreach($bank_chart_of_account as $value)
                                    <option value="{{$value->id}}">{{$value->account_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3">
                            <label>&nbsp;</label><br>
                            <input type="button" value="Search" class="btn btn-info" onclick="getBankReconcilation()">
                            <div class="btn-group">
                                <button type="button" class="btn btn-info">Export To </button>
                                <button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu" role="menu">
                                    <a class="dropdown-item" href="#" onclick="exportExcel()">Excel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row mt-3">
                        <div class="col-lg-12">
                            <div id="report_view"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

    <script>

        function getBankReconcilation() {   
            var csrf_token = $('meta[name="csrf-token"]').attr('content');
            var bank_chart_of_account_id = $("#bank_chart_of_account_id").val();

            $.ajax({
                type: 'post',
                url: '{{ url('/bank-reconcilation-report-body') }}',
                data: {
                    _token: csrf_token,
                    bank_chart_of_account_id: bank_chart_of_account_id
                },
                async: true,
                success: function(data) {
                    $("#report_view").html(data);
                },
                error: function(data) {
                    swlToster('error', "Something went wrong");
                }
            });
        }

    </script>

@endsection