@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_accountants_tree.accounts_tree')</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">
                                    @lang('dashboard_accountants_tree.welcome_to_our_platform') </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
                <!-- Errors -->
                @include('dashboard.components.errors')
                <!-- Success Message -->
                @if (session()->has('message'))
                    <p class="alert alert-success text-center">
                        {{ session()->get('message') }}
                    </p>
                @endif
            <!-- Buttons -->
            <div class="row">

                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-row justify-content-center">
                                <a class="btn btn-primary mx-3 popup-form"
                                    href="#addAccount">@lang('dashboard_accountants_tree.add_account')</a>
                                <a class="btn btn-primary mx-3"
                                    href="{{ route('dashboard.accountants_tree.create.daily_log') }}">@lang('dashboard_accountants_tree.create_daily_log')</a>
                           {{--      <a class="btn btn-primary mx-3"
                                    href="{{ route('dashboard.reconcile_account') }}">@lang('dashboard_accountants_tree.reconcile_account')</a>
                            --}}
                         </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Table -->
            <div class="row">

                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="card-title">@lang('dashboard_accountants_tree.accounts') </h4>
                            <p class="card-title-desc">@lang('dashboard_accountants_tree.check_all_accounts_data')</p>


                            <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 data-priority="1">@lang('dashboard_accountants_tree.account_no')</th>
                                        <th data-priority="1">@lang('dashboard_accountants_tree.name')</th>
                                        <th data-priority="1">@lang('dashboard_accountants_tree.type')</th>
                                        <th data-priority="1">@lang('dashboard_accountants_tree.balance') </th>
                                        <th data-priority="1" style="width: 200px">
                                            @lang('dashboard_accountants_tree.action')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($accountsTree as $account)
                                    <tr>
                                        <td>{{$account->account_number}}</td>
                                        <td>{{$account->name}}</td>
                                        <td>{{$account->type->name}}</td>
                                        <td>{{$account->balance}}</td>
                                        <td>

                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-primary dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    @lang('dashboard_accountants_tree.action')
                                                    <i class="mdi mdi-chevron-down"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item"
                                                        href="{{ route('dashboard.accountants_tree.history',$account->id) }}">
                                                        @lang('dashboard_accountants_tree.History_of_account_transactions')</a>
                                                    <a class="popup-form dropdown-item" href="#editAccount{{$account->id}}">
                                                        @lang('dashboard_accountants_tree.Edit')</a>
                                                    <a class="popup-form dropdown-item" href="#">
                                                        @lang('dashboard_accountants_tree.Create_Report')</a>
                                                    <!-- Deactivate-->
                                                    <form action="#" method="POST">
                                                        @csrf
                                                        @method('PUT')
                                                        <button class="dropdown-item btn text-danger"
                                                            type="submit">@lang('dashboard_accountants_tree.Deactivate')</button>
                                                    </form>
                                                    {{--
                                                    <a class="popup-form dropdown-item" href="#">Deactivate</a>
                                                    --}}
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                <!-- Edit Account Popup -->
                  <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 700px" id="editAccount{{$account->id}}">
                    <div class="card-body">
                        <h4 class="mt-0 mb-2">@lang('dashboard_accountants_tree.edit_account')</h4>
                        <p class="card-title-desc">@lang('dashboard_accountants_tree.edit_account_data')</p>
    
                        <form action="{{ route('dashboard.accountants_tree.update',$account) }}" method="POST">
                           @csrf
                           @method('PUT')
                            <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                                <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.Account_Type')</h5>
                                <select class="select2 col-lg-8 editBankAccountId"
                                style="width: 300px" name="account_type_id">
                                    <option selected disabled>@lang('dashboard_accountants_tree.Select_account_type')</option>
                                     @foreach ($types as $type)
                                    <option {{ $account->account_type_id == $type->id ? "selected":"" }} value="{{ $type->id }}">{{ $type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
    
    
                            {{-- <div class="row d-none flex-row align-items-center ml-4 my-2 justify-content-start editBankAccountNumberContainer">
                                <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.bank_account_number')</h5>
                                <input type="text" name="bank_account_number" required 
                                class="form-control col-lg-6 editBankAccountNumber"
                                value="BANK ACCOUNT NUMBER">
                            </div> --}}

                            <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                                <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.name')</h5>
                                <input type="text" name="name" class="form-control col-lg-6"
                                value="{{old('name',$account->name) }}" >
                            </div>
    
                            <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                                <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.Description')</h5>
                                <input type="text" name="description" class="form-control col-lg-6"
                                value="{{old('description',$account->description) }}">
                            </div>
    
                            <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                                <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.Account_No')</h5>
                                <input type="text" name="account_number" class="form-control col-lg-6"
                                value="{{old('account_number',$account->account_number) }}">
                            </div>
    
                            <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                                <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.Branched_from')</h5>
    
                                <select class=" select2 " style="width: 300px" name="parent">
                                    <option disabled selected>@lang('dashboard_accountants_tree.Select_account')</option>
                                   
                                    @foreach ($parents as $parent)
                                    <option value="{{ $parent->id }}"
                                        {{ $account->parent == $parent->id ? "selected":"" }}>
                                        {{ $parent->name}}</option>
                                    @endforeach
                                </select>
    
                            </div>
    
                            <div class="row">
                                <div class="col-lg-12  my-2 d-flex justify-content-end">
                                    <div class="text-right">
                                        <button type="submit"
                                            class="btn btn-info">@lang('dashboard_accountants_tree.Save')</button>
                                         </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                                    @endforeach
                                </tbody>
                            </table>
<hr>

        <div class="d-flex flex-column my-4">
            <div class="d-flex flex-row justify-content-space">
                <p class="w-50">
                     Assets
                </p>
                <p>
                    {{ $assets }}
                </p>
            </div>
        </div>
        <div class="d-flex flex-column my-4">
            <div class="d-flex flex-row justify-content-space">
                <p class="w-50">
                     Expenses
                </p>
                <p>
                    {{ $expenses }}
                </p>
            </div>
        </div>
        <hr>


<div class="bg-warning d-flex flex-column my-4">
    <div class="d-flex flex-row justify-content-space">
        <p class="w-50 h6">
             Assests & EXpenses
        </p>
        <p class="h6">
            {{ $assets +  $expenses}}
        </p>
    </div>
</div>
        <hr>

        <div class="d-flex flex-column my-4">
            <div class="d-flex flex-row justify-content-space">
                <p class="w-50">
                     Liabilities
                </p>
                <p>
                    {{ $liabilities }}
                </p>
            </div>
        </div>
        <div class="d-flex flex-column my-4">
            <div class="d-flex flex-row justify-content-space">
                <p class="w-50">
                     Copyrights
                </p>
                <p>
                    {{ $copyrights }}
                </p>
            </div>
        </div>
        <div class="d-flex flex-column my-4">
            <div class="d-flex flex-row justify-content-space">
                <p class="w-50">
                     Revenues
                </p>
                <p>
                {{ $revenues }}
                </p>
            </div>
        </div>

        <hr>
        





<div class="bg-warning d-flex flex-column my-4">
            <div class="d-flex flex-row justify-content-space">
                <p class="w-50 h6">
                    Liabilities & Copyrights & Revenues
                </p>
                <p class="h6">
                    {{ $liabilities +  $copyrights +  $revenues}}
                </p>
            </div>
        </div>



                        </div>
                    </div>
                </div>
            </div>

            <!-- Add Account Popup -->
            <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 700px" id="addAccount">
                <div class="card-body">
                    <h4 class="mt-0 mb-2">@lang('dashboard_accountants_tree.Add_Account')</h4>
                    <p class="card-title-desc">@lang('dashboard_accountants_tree.Add_new_account_data')</p>

                    <form action="{{ route('dashboard.accountants_tree.store') }}" method="POST">
                       @csrf
                        <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                            <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.Account_Type')</h5>
                            <select required class="select2" style="width: 200px" name="account_type_id" id="addBankAccountId" required>
                                <option selected value="" disabled>@lang('dashboard_accountants_tree.Select_account_type')</option>
                                 @foreach ($types as $type)
                                <option value="{{ $type->id }}">{{ $type->name}}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="row d-none flex-row align-items-center ml-4 my-2 justify-content-start" id="bankAccountNumberContainer">
                            <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.bank_account_number')</h5>
                            <input type="text" name="bank_account_number" required class="form-control col-lg-6" id="bankAccountNumber">
                        </div>

                        <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                            <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.name')</h5>
                            <input required type="text" name="name" class="form-control col-lg-6">
                        </div>

                        <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                            <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.Description')</h5>
                            <input type="text" name="description" class="form-control col-lg-6">
                        </div>

                        <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                            <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.Account_No')</h5>
                            <input type="text" name="account_number" required class="form-control col-lg-6">
                        </div>

                        <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                            <h5 class="control-label col-lg-4">@lang('dashboard_accountants_tree.Branched_from')</h5>

                            <select class=" select2 " style="display:block;width: 200px" name="parent">
                                <option disabled selected>@lang('dashboard_accountants_tree.Select_account')</option>
                               
                                @foreach ($parents as $parent)
                                <option value="{{ $parent->id }}">{{ $parent->name}}</option>
                                @endforeach
                            </select>

                        </div>

                        <div class="row">
                            <div class="col-lg-12  my-2 d-flex justify-content-end">
                                <div class="text-right">
                                    <button type="submit"
                                        class="btn btn-info">@lang('dashboard_accountants_tree.Save')</button>
                                    
                                </div>
                            </div>
                        </div>
                    </form>
                </div>


            </div>
        </div>


        <!-- End Page-content -->
    @endsection
    
    @section('custom_script')
    <script>
        $('#addBankAccountId').change(function(){
            /* get account type */
            let selectedAccountType = $('#addBankAccountId option:selected').val();
            if (Number(selectedAccountType) == 2){ // bank
                /* show bank account number field */
                $('#bankAccountNumberContainer').removeClass('d-none')
                $('#bankAccountNumberContainer').addClass('d-flex ')
                /* add input required prop */
                $('#bankAccountNumber').prop('required', true)
            } else {
                /* hide bank account field */
                $('#bankAccountNumberContainer').addClass('d-none')
                $('#bankAccountNumberContainer').removeClass('d-flex ')
                /* disable input required prop */
                $('#bankAccountNumber').removeAttr('required')
            }
        })
         $('.editBankAccountId').change(function(){
             // console.log("Edit Bank CHANGED");
            /* get account type */
            let selectedAccountType = $(this).find('option:selected').val();
            // console.log("selectedAccountType: ", selectedAccountType);
            if (Number(selectedAccountType) == 2){ // bank
                /* show bank account number field */
                $(this).parent().parent().find('.editBankAccountNumberContainer').removeClass('d-none')
                $(this).parent().parent().find('.editBankAccountNumberContainer').addClass('d-flex ')
                /* add input required prop */
                $(this).parent().parent().find('.editBankAccountNumber').prop('required', true)
            } else {
                /* hide bank account field */
                $(this).parent().parent().find('.editBankAccountNumberContainer').addClass('d-none')
                $(this).parent().parent().find('.editBankAccountNumberContainer').removeClass('d-flex ')
                /* disable input required prop */
                $(this).parent().parent().find('.editBankAccountNumber').removeAttr('required')
            }
        })

        $(document).ready(function(){
            $('.editBankAccountId').each(function(index, dropdown){
                // console.log(dropdown);
                $(dropdown).change()
            })
        })
    </script>
    @endsection