@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_create_daily_log.record_daily_record')
                        </h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">
                                    @lang('dashboard_create_daily_log.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
             
            <form id="form" action="{{route('dashboard.accountants_tree.store.daily_log')}}" 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_create_daily_log.date_of_journal')</label>
                                    <input type="date" required name="date_of_journal" class="form-control col-lg-6">
                                </div>
                                <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_create_daily_log.journal_number')</label>
                                    <input type="text" required name="journal_no" class="form-control col-lg-6">
                                </div>
                            </div>
                        </div>
                        <!-- Table -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="repeater">
                                            <div data-repeater-list="accounts">
                                                <div data-repeater-item class="row">
                                                    <div class="form-group col-lg-12">
                                                        <div class="row">
                                                            <div class="form-group col-lg-4">
                                                                <label
                                                                    for="account">@lang('dashboard_create_daily_log.account')</label>
                                                                <select class="form-control select2 logAccountsDropdown" name="account" onchange="logAccountChanged(this)">
                                                                    <option selected disabled value="{{ null }}" aria-required="">
                                                                        @lang('dashboard_create_daily_log.choose_an_account')
                                                                    </option>
                                                                    @foreach ($accounts as $account) 
                                                                   <option value="{{ $account->id }}" data-typeid="{{ $account->account_type_id }}" data-baseType="{{ $account->type->base_type}}">
                                                                   {{ $account->name }}</option>
                                                                  @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-lg-4">
                                                                <label
                                                                    for="debits">@lang('dashboard_create_daily_log.debits')(<span class="sign">+</span>)</label>
                                                                <input type="number" disabled name="debits" min="0" max="99999999"
                                                                    step="any" class="form-control" onchange="debitsChanged(this)" />
                                                            </div>
                                                            <div class="form-group col-lg-4">
                                                                <label
                                                                    for="credits">@lang('dashboard_create_daily_log.credits')(<span class="sign">-</span>)</label>
                                                                <input type="number" disabled name="credits" min="0" max="99999999"
                                                                    step="any" class="form-control"  onchange="creditsChanged(this)"/>
                                                            </div>
                                                            <div class="form-group col-lg-4">
                                                                <label
                                                                    for="description">@lang('dashboard_create_daily_log.description')</label>
                                                                <input type="text" name="description"
                                                                    class="form-control" />
                                                            </div>
                                                            <div class="form-group col-lg-3">
                                                                <label
                                                                    for="client_supplier">@lang('dashboard_create_daily_log.client/supplier')</label>
                                                                <select class="form-control select2" name="client_supplier">
                                                                    <option selected value="{{ null }}">
                                                                        @lang('dashboard_create_daily_log.choose_an_option')
                                                                    </option>
                                                                    @foreach ($payee as $pay)
                                                                    <option
                                                                        value="{{ $pay->id .','.$pay->type}}" data-typepay="{{$pay->type}}">
                                                                        {{$pay->first_name.' '.$pay->middle_name.' '.$pay->last_name}} @if($pay->type
                                                                        =='App\Client') (@lang('dashboard_banks.client')) @else
                                                                        (@lang('dashboard_banks.supplier')) @endif</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-lg-3">
                                                                <label
                                                                    for="productdesc">@lang('dashboard_create_daily_log.class')</label>
                                                                <select class="form-control select2" name="filter">
                                                                    <option selected value="{{ null }}">
                                                                        @lang('dashboard_create_daily_log.choose_class')
                                                                    </option>
                                                                    @foreach ($filters as $filter)
                                                                    <option value="{{ $filter->id }}">
                                                                        {{$filter->name}}
                                                                    </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-1 align-self-center">
                                                                <button type="button" data-repeater-delete
                                                                    class="btn btn-primary " aria-label="Profile">
                                                                    <i class="mdi mdi-delete-alert" aria-hidden="true"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-0"
                                               onclick="addNewRowPressed()" value="@lang('dashboard_create_daily_log.add')" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Description & Attachment-->
                        <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_create_daily_log.choose_file')</label>
                                            <div class="custom-file col-lg-4">
                                                <input type="file" class="custom-file-input form-control" name="file"
                                                    id="customFile">
                                                <label class="custom-file-label"
                                                    for="customFile">@lang('dashboard_create_daily_log.choose_file')</label>
                                                <p hidden id="uploaded-file"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Buttons -->
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <button type="submit" name="input_type" value="save" class="btn btn-info" id="saveButton"
                                            aria-label="save">
                                            @lang('dashboard_create_daily_log.save')<i
                                                class="mdi mdi-content-save-alert"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    @endsection

    @section('custom_script')
        <script>
            function addNewRowPressed(){
                setTimeout(() => {
                    $(".select2").select2()
                }, 500);
            }

            function debitsChanged(debitsInput){
                // hide the credits input
                let inputName = $(debitsInput).attr("name")
                let rowIndex = inputName.split("accounts[")[1].split("][debits]")[0]
                if ($(debitsInput).val() > 0){

                    disableCreditsInput(rowIndex)
                } else {
                    enableCreditsInput(rowIndex)
                }
                handleSaveButton()

            }
            function creditsChanged(creditsInput){
                // hide the debits input
                let inputName = $(creditsInput).attr("name")
                let rowIndex = inputName.split("accounts[")[1].split("][credits]")[0]
                if($(creditsInput).val()> 0){

                    disableDebitsInput(rowIndex)
                } else {
                    enableDebitsInput(rowIndex)
                    
                }
                handleSaveButton()

            }
            function logAccountChanged(accountDropdown)
            {

                

                let dropdownName = $(accountDropdown).attr("name")
                let rowIndex = dropdownName.split("accounts[")[1].split("][account]")[0]
                
                
                // get client/supplie rdropdown
                let clientSupplierDropdown = $("select[name='accounts["+rowIndex+"][client_supplier]']")
                let clientSupplierOptions = $(clientSupplierDropdown).children()

                // RESET
                // select null option in supplier/client
                $(clientSupplierDropdown).val($(clientSupplierDropdown).children(0).val()).change()
                // enable debits & credits
                $("input[name='accounts["+rowIndex+"][credits]']").removeAttr("disabled")
                $("input[name='accounts["+rowIndex+"][debits]']").removeAttr("disabled")

                let selectedAccountTypeId = $(accountDropdown).find("option:selected").attr("data-typeid")
                let filteredClientSupplierOptions =[$(accountDropdown).find("option:first")]
                if (selectedAccountTypeId == 3){ // client accopunt selected
                    /* enable all options */
                    for (let arrayIndex = 0; arrayIndex < clientSupplierOptions.length; arrayIndex++) {
                        let element = clientSupplierOptions[arrayIndex];
                        $(clientSupplierDropdown).find("option:eq("+arrayIndex+")").removeAttr("disabled")
                        
                    }

                    /* disable suppliers */
                    for (let arrayIndex = 0; arrayIndex < clientSupplierOptions.length; arrayIndex++) {
                        let element = clientSupplierOptions[arrayIndex];
                        
                         if ($(element).attr("data-typepay") != "App\\Client"){
                            $(clientSupplierDropdown).find("option:eq("+arrayIndex+")").attr("disabled", true)
                        } 
                        
                    }
                    
                } else {
                    /* enable all options */
                    for (let arrayIndex = 0; arrayIndex < clientSupplierOptions.length; arrayIndex++) {
                        let element = clientSupplierOptions[arrayIndex];
                        $(clientSupplierDropdown).find("option:eq("+arrayIndex+")").removeAttr("disabled")
                        
                    }

                    for (let arrayIndex = 0; arrayIndex < clientSupplierOptions.length; arrayIndex++) {
                        let element = clientSupplierOptions[arrayIndex];
                        
                         if ($(element).attr("data-typepay") != "App\\Supplier"){
                            $(clientSupplierDropdown).find("option:eq("+arrayIndex+")").attr("disabled", true)
                        } 
                        
                    }

                }

                // HANDLE SIGNS
                let selectedAccountBaseType = $("select[name='accounts["+rowIndex+"][account]']")
                    .find("option:selected")
                    .attr("data-baseType")

                    switch(selectedAccountBaseType){
                        case 'assets': // rightside
                        case 'expenses': // rightside
                            $("input[name='accounts["+rowIndex+"][debits]']").parent().find(".sign").html("+")
                            $("input[name='accounts["+rowIndex+"][credits]']").parent().find(".sign").html("-")
                        break;
                        case 'liabilities':  // leftSide
                        case 'copyrights': // leftSide
                        case 'revenues':
                            $("input[name='accounts["+rowIndex+"][debits]']").parent().find(".sign").html("-")
                            $("input[name='accounts["+rowIndex+"][credits]']").parent().find(".sign").html("+")
                        
                        break;
                    }


                handleSaveButton()
               
            }

            
            // Sum all Credits and debits for each row
            /*
                data-basetype =" assets , liabilities , copyrights , revenues , expenses
            */
            function handleSaveButton(){
                
                let debits = 0; 
                let credits = 0; 
                // get selected account basetype
                let accountsArray = $(".logAccountsDropdown")
                for (let index = 0; index < accountsArray.length; index++) {
                    
                    let selectedAccountBaseType = $("select[name='accounts["+index+"][account]']")
                    .find("option:selected")
                    .attr("data-baseType")
                     debits += Number($("input[name='accounts["+index+"][debits]']").val())
                     credits += Number($("input[name='accounts["+index+"][credits]']").val())
                            
                }
                

                // console.log("result: ", result);
                if (credits != debits ){
                    $("#saveButton").attr("disabled", true)
                } else {
                    $("#saveButton").removeAttr("disabled")

                }

                // if selected account is rights or income or ELTISAMAT .. credits - and debits +
                
            }


            function disableCreditsInput(rowIndex){
                
                let creditsInput = $("input[name='accounts["+rowIndex+"][credits]']")
                creditsInput.val(0).attr("disabled", true)
            }
            function disableDebitsInput(rowIndex){
                
                let debitsInput = $("input[name='accounts["+rowIndex+"][debits]']")
                debitsInput.val(0).attr("disabled", true)
           
            }


            function enableCreditsInput(rowIndex){
                
                let creditsInput = $("input[name='accounts["+rowIndex+"][credits]']")
                creditsInput.val(0).removeAttr("disabled")
            }
            function enableDebitsInput(rowIndex){
                
                let debitsInput = $("input[name='accounts["+rowIndex+"][debits]']")
                debitsInput.val(0).removeAttr("disabled")
           
            }

        </script>
    @endsection