@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">
                            {{$account->name}}</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">
                                    @lang('dashboard_bank_account_history.welcome_to_our_platform')</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            <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_bank_account_history.account_name')</label>
                                <input type="text" name="" class="form-control col-lg-4" disabled value="{{$account->name}}">
                                <div class="mx-4 d-flex flex-column justify-content-center align-items-start mt-md-3 mx-md-1">
                                    <p class="h4 mb-0">{{$account->balance}}</p>
                                    @lang('dashboard_bank_account_history.ending_balance')
                                </div>
                                <div class="d-flex justify-content-end col-lg-3">
                                    {{-- <button
                                        class="btn btn-primary mt-2">@lang('dashboard_bank_account_history.reconcile_account')</button> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <!-- Table -->
                            <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th scope="col" class="text-dark">
                                            <b>@lang('dashboard_bank_account_history.date')</b></th>
                                        <th scope="col" class="text-dark"><b>
                                                @lang('dashboard_bank_account_history.reference')</b></th>
                                        <th scope="col" class="text-dark"><b>
                                                @lang('dashboard_bank_account_history.account')</b></th>
                                        <th scope="col" class="text-dark">
                                            <b>@lang('dashboard_bank_account_history.description')</b></th>
                                        <th scope="col" class="text-dark">
                                            <b>@lang('dashboard_bank_account_history.class')</b></th>
                                        <th scope="col" class="text-dark">
                                            <b>@lang('dashboard_bank_account_history.payment')</b></th>
                                        <th scope="col" class="text-dark">
                                            <b>@lang('dashboard_bank_account_history.desposite')</b></th>
                                        <th scope="col" class="text-dark"><b></b></th>
                                        
                                        
                                        <th scope="col" class="text-dark">
                                            <b>@lang('dashboard_bank_account_history.balance')</b></th>
                                        <th scope="col" class="text-dark">
                                            <b>@lang('dashboard_bank_account_history.action')</b></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($movements as $movement)
                                    <tr>
                                        <td scope="col" class="text-dark">
                                            <p class="date value">{{$movement->movement_date}}</p>
                                        </td>
                                        <td scope="col" class="text-dark">
                                            <!-- Show a single row in the sales table -->
                                            @if ($movement->movement_type=='sales_invoice'||$movement->movement_type=='sales_refund'||$movement->movement_type=='price_offer'||$movement->movement_type=='sales_order'||$movement->movement_type=='voucher_cash'||$movement->movement_type=='pay_sales_invoice'||$movement->movement_type=='sales_advance_payment'||$movement->movement_type=='notice_credit')
                                            <a class="ref value" href="{{ route('dashboard.invoices.index',['transType'=>$movement->movement_type,'number'=>$movement->reference]) }}">{{$movement->reference}}</a>
                                            
                                            @elseif ($movement->movement_type=='purchase_invoice'||$movement->movement_type=='cash_expense'||$movement->movement_type=='buy_order'||$movement->movement_type=='register_check'||$movement->movement_type=='notice_debt'||$movement->movement_type=='refund_supplier'||$movement->movement_type=='supplier_advance_payment'||$movement->movement_type=='pay_purchase_invoice')
                                            <a class="ref value" href="{{ route('dashboard.suppliers.expenses',['transType'=>$movement->movement_type,'number'=>$movement->reference]) }}">{{$movement->reference}}</a>
                                            
                                            @elseif ($movement->movement_type=='split'||$movement->movement_type=='deposit'||$movement->movement_type=='expensed'||$movement->movement_type=='cheque'||$movement->movement_type=='transfer')
                                            <a class="ref value" href="{{ route('dashboard.banks.index',['reference'=>$movement->reference]) }}">{{$movement->reference}}</a>
                                            
                                            @else
                                            <p>{{$movement->reference}}</p>
                                            @endif
                                            <p class="type value">   @lang('dashboard_movement_type.'.$movement->movement_type)</p>
                                        </td>
                                        <td scope="col" class="text-dark">
                                            <p class="payee value">{{$movement->payeeable->name}}</p>
                                        </td>
                                        <td scope="col" class="text-dark">
                                            <p class="description value">{{$movement->description}}</p>
                                        </td>
                                        <td scope="col" class="text-dark">
                                            <p class="class value">{{@$movement->filter->name}}</p>
                                        </td>
                                        <td scope="col" class="text-dark">
                                            <p class="payment value">{{$movement->spent}}</p>
                                        </td>
                                        <td scope="col" class="text-dark">
                                            <p class="deposite value">{{$movement->received}}</p>
                                        </td>
                                        <td scope="col" class="text-dark">
                                            <input disabled type="checkbox" class="is-reconciled" title="Is Revised?" @if($movement->is_revision) checked @endif>
                                            {{-- @if($movement->is_reconcile)
                                            <div class="from-csv-file">
                                                <p class="text-success" title="Reconclied">R</p>
                                            </div>
                                            @endif --}}
                                        </td> <!-- check box and green boxes if come from .csv-->
                                        {{-- <td scope="col" class="text-dark">
                                            <p class="tax value">{{@$movement->tax->name}}</p>
                                            <p class="tax value">@if($movement->tax)(%{{@$movement->tax->percentage}})@endif</p>
                                        </td> --}}
                                        <td scope="col" class="text-dark">
                                            <p class="balance value">{{$movement->balance}}</p>
                                        </td>
                                        <td scope="col" class="text-dark">
                                            <div class="d-flex flex-row justify-content-center">
                                                <button
                                                    class="btn btn-info ml-1 popup-form editInputsButton" href="#editTransaction{{$movement->id}}">@lang('dashboard_bank_account_history.Edit')</button>
                                                {{-- <button
                                                    class="btn btn-danger ml-1 deleteRowButton">@lang('dashboard_bank_account_history.Delete')</button> --}}
                                            </div>
                                        </td>
                                        <!-- Edit Popup -->
                                        <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 700px" id="editTransaction{{$movement->id}}">
                                            <div class="card-body">
                                                <h4 class="mt-0 mb-2">@lang('dashboard_accountants_tree.Edit') @lang('dashboard_accountants_tree.transaction')</h4>
                                                <p class="card-title-desc">@lang('dashboard_accountants_tree.edit_trans_data')</p>
                                                <form action="{{route('dashboard.accountants_tree.update.history')}}" method="POST">
                                                   @csrf
                                                   @method('PUT')
                                                   <input type="hidden" name="id" value="{{$movement->id}}">
                                                <div class="row">
                                                    <div class="form-group mx-2 col-lg-4">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.date')</p>
                                                        <p class="form-control date-input input">{{$movement->movement_date}}</p>
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-3">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.reference')</p>
                                                        <input type="text" name="reference" class="form-control ref-input input" value="{{$movement->reference}}">
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-4">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.type')</p>
                                                        <input disabled type="text" class="form-control ref-input input" value="{{$movement->movement_type}}">                                                 
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-4">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.payee')</p>
                                                        <input disabled type="text" class="form-control ref-input input" value="{{$movement->account->name}}">                                                                                                   
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-3">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.payment')</p>
                                                        <input disabled type="number" min="0" max="99999999" step="any"
                                                        class="form-control payment-input input" value="{{$movement->spent}}">
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-3">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.desposite')</p>
                                                        <input disabled type="number" min="0" max="99999999" step="any"
                                                        class="form-control deposite-input input" value="{{$movement->received}}">
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-4">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.tax')</p>
                                                        <input disabled type="text" class="form-control ref-input input" value="{{@$movement->tax->name}}">                                                 
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-3">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.balance')</p>
                                                        <p class="balance-input input text-dark form-control mb-0">{{$movement->balance}}</p>
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-3">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.is_revised')</p>
                                                        <input name="is_revision" type="checkbox" @if($movement->is_revision) checked @endif>
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-3">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.filter')</p>
                                                        <select name="filter_id" id="" class="class-input select2">
                                                            <option>@lang('dashboard_bank_account_history.no_select')</option>
                                                            @foreach ($filters as $filter)
                                                            <option {{ $movement->filter_id == $filter->id ? "selected":"" }} value="{{ $filter->id }}">{{ $filter->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group mx-2 col-lg-12">
                                                        <p class="control-label">@lang('dashboard_bank_account_history.description')</p>
                                                        <textarea type="text" name="description" style="resize: none"
                                                        class="form-control description-input input">{{$movement->description}}</textarea>                                                
                                                    </div>
                                                        <div class="col-lg-12  my-2 d-flex justify-content-end">
                                                                <button type="submit"
                                                                class="btn btn-primary ml-1">@lang('dashboard_bank_account_history.Save')</button>
                                                            <button type="button"
                                                                class="btn btn-danger ml-1 cancelButton">@lang('dashboard_bank_account_history.Cancel')</button>
                                                        </div>
                                                </div>
                                                </form>
                                            </div>
                                        </div>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('custom_script')
        <script>
            $('.cancelButton').click(function(){
                $('.mfp-close').click()
            })
        </script>
    @endsection