@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="page-title mb-0 font-size-18">@lang('dashboard_reconcile_account.account_settlement')</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">@lang('dashboard_reconcile_account.welcome_to_our_platform')</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            <form id="form" action="" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                                    <label class="control-label col-lg-3 text-dark">@lang('dashboard_reconcile_account.choose_an_account')</label>
                                    <select class="form-control select2 col-lg-4" name="account" id="accountSelector">
                                        <option selected disabled>@lang('dashboard_reconcile_account.choose_an_account')</option>
                                        <option value="1"> @lang('dashboard_reconcile_account.account') 1</option>
                                        <option value="2"> @lang('dashboard_reconcile_account.account') 2</option>
                                        <option value="3"> @lang('dashboard_reconcile_account.account') 3</option>
                                    </select>
                                </div>
                                <div class="row d-flex flex-row align-items-center ml-4 my-3 justify-content-start">
                                    <label class="control-label col-lg-3 text-dark">@lang('dashboard_reconcile_account.last_balance_opening_settlement')</label>
                                    <p class="h4 text-dark col-lg-4"><b>$1200</b></p>
                                </div>
                                <div class="row d-flex flex-row align-items-center ml-4 my-3 justify-content-start">
                                    <label class="control-label col-lg-3 text-dark">@lang('dashboard_reconcile_account.settlement_date')</label>
                                    <input type="date" class="form-control col-lg-4" id="settlementDate">
                                </div>
                                <div class="row d-flex flex-row align-items-center ml-4 my-3 justify-content-start">
                                    <label class="control-label col-lg-3 text-dark">@lang('dashboard_reconcile_account.balance_at_last_settlement')</label>
                                    <p class="h4 text-dark col-lg-4"><b>$1000</b></p>
                                </div>
                                <div class="row d-flex flex-row justify-content-center">
                                    <button type="button" class="btn btn-success"
                                        id="showSettlementTableButton">@lang('dashboard_reconcile_account.settlement')</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- table -->
                <div class="row settlementTableContainer d-none">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">@lang('dashboard_reconcile_account.transaction') </h4>
                                <p class="card-title-desc">@lang('dashboard_reconcile_account.check_all_transaction_for_selected_account')</p>
                                <table id="datatable-buttons"
                                    class="table table-striped table-bordered dt-responsive nowrap settlementTable"
                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                            <th class="d-none">ID</th>
                                            <th data-priority="1">@lang('dashboard_reconcile_account.date')</th>
                                            <th data-priority="1">@lang('dashboard_reconcile_account.type')</th>
                                            <th data-priority="1">@lang('dashboard_reconcile_account.document_number').</th>
                                            <th data-priority="1">@lang('dashboard_reconcile_account.account')</th>
                                            <th data-priority="1">@lang('dashboard_reconcile_account.description')</th>
                                            <th data-priority="1">@lang('dashboard_reconcile_account.addition_or_withdrawal')</th>
                                            <th data-priority="1">@lang('dashboard_reconcile_account.for')</th>
                                            <th data-priority="1">@lang('dashboard_reconcile_account.from')</th>
                                            <th data-priority="1"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="d-none transactionID">123</td>
                                            <td>12/13/2020</td>
                                            <td>Type 1</td>
                                            <td>123456</td>
                                            <td>@lang('dashboard_reconcile_account.account') 1</td>
                                            <td>@lang('dashboard_reconcile_account.testing')</td>
                                            <td>+</td>
                                            <td>@lang('dashboard_reconcile_account.account') 2</td>
                                            <td>@lang('dashboard_reconcile_account.account') 3</td>
                                            <td><input type="checkbox" class="checkbox"></td>
                                        </tr>
                                        <tr>
                                            <td class="d-none transactionID">456</td>
                                            <td>12/14/2020</td>
                                            <td>Type 2</td>
                                            <td>567890</td>
                                            <td>@lang('dashboard_reconcile_account.account') 2</td>
                                            <td>@lang('dashboard_reconcile_account.testing') 2</td>
                                            <td>-</td>
                                            <td>@lang('dashboard_reconcile_account.account') 1</td>
                                            <td>@lang('dashboard_reconcile_account.account') 2</td>
                                            <td><input type="checkbox" class="checkbox"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div> <!-- End of the card -->
                    </div>
                </div> <!-- End of the row -->
                <div class="row reconcileAccountContainer d-none">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body d-flex justify-content-center">
                                <button type="button" class="btn btn-primary" id="reconcileAccount">@lang('dashboard_reconcile_account.reconcile_account')</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    @endsection
    @section('custom_script')
        <script>
            $(document).ready(function() {
                /* choose the null option of the accountSelector at the begining of the page loading */
                $('#accountSelector').val($('#accountSelector').children(0).val())
                /* hide the table at the begining of the page */
                hideTableContainer();
                /* get the current date and put tin the settlementDate */
                $('#settlementDate').val(getCurrentDate())

                $('#showSettlementTableButton').click(function() {
                    /* check the selected account */
                    if ($('#accountSelector').val() !== null) {
                        /* show the table */
                        showTableContainer()
                        /* show reconcile button */
                        showReconcileButton()
                    }
                })
                /* hide table at accountSelector chaged  */
                $('#accountSelector').change(function() {
                    /* hide the table */
                    hideTableContainer()
                    /* hide reconcile button */
                    hideReconcileButton()
                })

                /* get checked rows when pressing the reconcileAccount button */
                $('#reconcileAccount').click(function(){
                    let selectedTransactions = [];
                    $('.checkbox').each(function(index,el){
                        if($(this).is(":checked")){
                            let transactionID = Number($(this).parent().parent().find('.transactionID').html())
                            selectedTransactions.push(transactionID)
                        }
                    })
                    console.log(selectedTransactions)
                })
                /******************
                 HELPING FUNCTIONS
                *******************/

                function getCurrentDate(){
                    let today = new Date()
                    let todayYear = today.getFullYear()
                    let todayMonth = today.getMonth() +1 // +1 to get the current month
                    let todayDay = today.getDate()
                    let todayDate = todayYear +'-'+todayMonth+'-'+todayDay
                    return todayDate
                }
                /* Show settlementTable */
                function showTableContainer() {
                    $('.settlementTableContainer').removeClass('d-none')
                }
                /* Hide settlementTable */
                function hideTableContainer() {
                    $('.settlementTableContainer').addClass('d-none')
                }
                /* Show settlementTable */
                function showReconcileButton() {
                    $('.reconcileAccountContainer').removeClass('d-none')
                }
                /* Hide settlementTable */
                function hideReconcileButton() {
                    $('.reconcileAccountContainer').addClass('d-none')
                }
            })

        </script>
    @endsection