@extends('dashboard.components.main')
@section('content')

<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_sidebar.banking_cache')</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item active">@lang('dashboard.welcome') </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










        @if(Route::currentRouteName() == 'dashboard.banks.csv')
        <form action="{{ route('dashboard.banks.import.csv') }}" method="POST" enctype="multipart/form-data"
            class="form-horizontal ">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">@lang('dashboard_sidebar.import_csv')</h4>
                            {{-- <p class="card-title-desc">يرجى اتباع الخطوات لاستيراد معاملات بنكية من الملف</p> --}}

                            @csrf
                            <h3>@lang('buttons.upload_file') csv</h3>
                            <div class="row">



                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">@lang('csv.select_file_to_import') </label>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" name="csv" id="customFile" accept=".csv">
                                            <label class="custom-file-label" for="customFile">@lang('buttons.select_file')</label>
                                            <p hidden id="uploaded-file"></p>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="button-items my-2"  style="text-align: center">
                            <button type="submit" disabled id="submit-button"
                                class="btn btn-primary btn-lg waves-effect waves-light">@lang('buttons.upload')</button>

                        </div>
                    </div>
                </div>
            </div>
        </form>
        @endif
        {{-- {{ \Route::currentRouteName() }} --}}
        @if(Route::currentRouteName() !== 'dashboard.banks.csv')
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        @isset($enhance)
                        <form id="form" method="POST" action="{{ route('dashboard.banks.enhance.csv') }}" enctype="multipart/form-data" class="form-horizontal form-wizard-wrapper">
                            @csrf
                            <input type="hidden" name="enhance" value="inhance">
                            <h3>@lang('csv.enhance_title')</h3>

                            <h6 id="file-name"></h6>

                            <div class="row p-2">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label">@lang('dashboard_banks.date') </label>
                                        <small>dd/mm/yy</small>
                                        <select class="form-control select2" id="date" name="date" required>
                                            <option selected disabled value="{{ null }}">@lang('csv.select_equal') </option>
                                            @foreach ($headers as $head)

                                            <option value="{{ $head }}">{{ $head }} </option>
                                            @endforeach


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

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label">@lang('dashboard_banks.operation_description') </label>

                                        <select class="form-control select2" id="desc" name="description" required>
                                            <option selected disabled value="{{ null }}">@lang('csv.select_equal')</option>
                                            @foreach ($headers as $head)

                                            <option value="{{ $head }}">{{ $head }} </option>
                                            @endforeach


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

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" id="name_combained"> @lang('dashboard_banks.amount')</label>
                                        <select class="form-control select2" required name="spent_balance">
                                            <option selected disabled value="{{ null }}">@lang('csv.select_equal')</option>
                                            @foreach ($headers as $head)

                                            <option value="{{ $head }}">{{ $head }} </option>
                                            @endforeach


                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 ">
                                    <div class="form-group">
                                        <label class="control-label">@lang('dashboard_banks.received') @lang('dashboard_banks.amount')</label>
                                        <select class="form-control select2" disabled style="color: #dddddd" id="disabled_div"
                                            name="recived_balance">
                                            <option selected disabled value="{{ null }}">@lang('csv.select_equal') </option>
                                            @foreach ($headers as $head)

                                            <option value="{{ $head }}">{{ $head }} </option>
                                            @endforeach


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

                                <div class="col-md-6">
                                    <div class="mt-4 mt-lg-0">
                                        <h5 class="font-size-14 mb-4">@lang('csv.show_style')+ - </h5>
                                        <div class="custom-control custom-radio mb-2">
                                            <input type="radio" value="separated" id="customRadio1" name="view" 
                                                onclick="buttonvalue(this)" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio1">@lang('csv.csv_file') @lang('csv.show_split')
                                                </label>
                                        </div>
                                        <div class="custom-control custom-radio">
                                            <input type="radio" value="combined" id="customRadio2" name="view" checked
                                                onclick="buttonvalue(this)" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio2">@lang('csv.csv_file') @lang('csv.show_combined')
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label"> @lang('dashboard_banks.bank') </label>
                                            <select class="form-control select2" id="bank" name="bank" required>
                                                <option selected disabled value="{{ null }}">@lang('csv.select_equal') </option>
                                                @foreach ($banks as $bank)

                                                <option value="{{ $bank->id }}">{{ $bank->name }} </option>
                                                @endforeach


                                            </select>
                                        </div>
                                    </div>
                                </div>
                            
                            </div>
                            <div class="button-items" style="text-align: center">
                                <button type="submit"
                                    class="btn btn-primary btn-lg waves-effect waves-light">@lang('buttons.submit')</button>
    
                            </div>
                        </form>
                        @endisset
                        @isset($view)
                            
                        <h3>@lang('dashboard_banks.select') @lang('csv.operations')</h3>
                        <h6 id="file-name"></h6>
                        <form action="{{ route('dashboard.banks.moves') }}" method="POST" id="moves">
                            @csrf
                            <input type="hidden" name="bank_id" value="{{ $bank }}">

                        <div class="row">
                            <div class="col-md-12">
                                <table id="datatable" class="table table-bordered dt-responsive nowrap"
                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>@lang('dashboard_banks.operation_description')</th>
                                            <th>@lang('csv.operation')</th>
                                            <th>@lang('csv.operation_date')</th>
                                            @if($view == 'combined')
                                            <th id="both" >@lang('dashboard_banks.spent') @lang('csv.or') @lang('dashboard_banks.received')</th>
                                            @else
                                            <th id="recive" >@lang('dashboard_banks.received')</th>
                                            <th id="spent" >@lang('dashboard_banks.spent')</th>
                                            @endif
                                            <th>
                                                <div class="custom-control custom-checkbox mb-2">
                                                    <input type="checkbox" class="custom-control-input"
                                                        id="customCheck10"  onchange="checkAll(this)">
                                                    <label class="custom-control-label" for="customCheck10"></label>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>

                                    
                                    <tbody>
                                        @isset($data)
                                        @forelse ($data as $index=> $csv)
                                        {{-- {{ dd($csv->{$spent_balance}) }} --}}
                                        
                                        <tr bordercolor="red" >
                                            <td>{{ $index+1 }}</td>
                                            <td> <input type="hidden" name="moves[][description]" value="{{ $csv->{$description} }}"> {{ substr($csv->{$description},0,20) }} </td>
                                            {{-- <td> {{ $csv->{$spent_balance}  }} </td> --}}
                                            @if($view == 'combined')
                                            {{-- <td id="both_value" >{{ $csv->{$spent_balance} }} $</td> --}}
                                            <td  @if($csv->{$spent_balance} == null) style="border: solid 1px #3B5DE7" @endif> <input type="hidden" name="moves[{{ $index }}][amount]" value=" @if(substr($csv->{$spent_balance},0,1) == "-") {{ substr($csv->{$spent_balance},1) }}@else {{ $csv->{$spent_balance} }}@endif"> {{ $csv->{$spent_balance} }} @if($csv->{$spent_balance} == null) <small style="color: #3B5DE7; text-align:center">@lang('dashboard_banks.notAdded')</small> @endif </td>
                                            @else
                                            <td  @if($csv->{$spent_balance} == null && $csv->{$recived_balance} == null) style="border: solid 1px #3B5DE7" @endif> <input type="hidden" name="moves[{{ $index }}][amount]" value="@if($csv->{$spent_balance} != null)  @if(substr($csv->{$spent_balance},0,1) == "-") {{ substr($csv->{$spent_balance},1) }}@else {{ $csv->{$spent_balance} }}@endif @else  @if(substr($csv->{$recived_balance},0,1) == "-") {{ substr($csv->{$recived_balance},1) }}@else {{ $csv->{$recived_balance}  }}@endif @endif ">{{ $csv->{$spent_balance} ?? $csv->{$recived_balance}  }} @if($csv->{$spent_balance} == null && $csv->{$recived_balance} == null) <small style="color: #3B5DE7">@lang('dashboard_banks.notAdded')</small>  @endif</td>
                                            {{-- <td id="credit_value" >{{ $csv->{$spent_balance} ?? $csv->{$recived_balance}  }} $</td> --}}
                                            {{-- <td id="debit_value" >{{ $csv->{$recived_balance}  }} $</td> --}}
                                            @endif
                                            <td> <input type="hidden" name="moves[{{ $index }}][date]" value="{{ $csv->{$date} }}">{{ $csv->{$date} }} </td>
                                            {{-- <td>{{ $csv }}</td> --}}
                                            @if($view == 'combined')
                                            <td> <input type="hidden" name='moves[{{ $index }}][type]' value="@if(substr($csv->{$spent_balance},0,1) == "-")spent @else received @endif" > @if(substr($csv->{$spent_balance},0,1) == "-") - @else + @endif</td>
                                            @else
                                            <td> <input type="hidden" name='moves[{{ $index }}][type]' value="@if($csv->{$recived_balance} == null)spent  @else received @endif" >
                                                  @if((substr($csv->{$recived_balance},0,1) == "-") && ($csv->{$recived_balance} == null)) 
                                                 + @elseif( ($csv->{$spent_balance} == null)) + @endif</td>

                                            <td> @if((substr($csv->{$spent_balance},0,1) == "-") ) 
                                                 + @elseif( ($csv->{$recived_balance} == null)) - @endif</td>

                                            @endif
                                            <td>
                                                <div class="custom-control custom-checkbox mb-2">
                                                    <input type="checkbox" name="moves[{{ $index }}][check]" class="custom-control-input"
                                                    id="check{{$index}}" >
                                                    <label class="custom-control-label" for="check{{$index}}"></label>
                                                </div>
                                            </td>
                                        </tr>
                                        @empty

                                        <tr>nodata</tr>
                                        @endforelse
                                        @endisset

                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="button-items" style="text-align: center">
                            <button type="submit"
                            class="btn btn-primary btn-lg waves-effect waves-light">@lang('buttons.submit')</button>
                            
                        </div>
                    </form>
                        @endisset

                        {{-- <h3>تاكيد العملية</h3>
                        <div class="p-4">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="customCheck7">
                                <label class="custom-control-label" for="customCheck7">انا اوافق على استيراد المعاملات
                                    الى داخل المنصة </label>
                            </div>
                        </div> --}}

                    </div>
                </div>
            </div>
        </div>
        @endif
        <!-- end row -->


    </div>
    <!-- End Page-content -->
    {{-- @include('dashboard.components.footer') --}}
    @endsection
    @section('custom_script')

    <script>
        function buttonvalue(btnval) {
        if(btnval.value == 'combined'){

        $('#disabled_div option:first-child').removeAttr('disabled');
        $('#disabled_div').val($('#disabled_div option:first-child').val()).change();
        /* SALAH */
        /* remove required */
        $('#disabled_div').removeAttr('required')

            // $('#disabled_div').chidlren(0).removeAttr('disabled');
            // setTimeout(()=>{

            $('#disabled_div').attr('disabled',true).css('color','#dddddd');
            $("#name_combained").html("{{ __('dashboard_banks.amount') }}");
            // },500);
        }else{
            /* add required */
            $('#disabled_div').attr('required', true)
            $('#disabled_div').removeAttr('disabled').css('color','#495057');
            $("#name_combained").html("{{ __('dashboard_banks.amount') .' '.  __('dashboard_banks.expensed') }}");


        }
    }   

    function checkAll(element)
    {
        // console.log(element);
        var checks = document.querySelectorAll('input[type=checkbox]');
        if(element.checked ==true)
        {
        // console.log(checks);
            checks.forEach(el=>{
                el.checked = true;
            });
        }else{
            checks.forEach(el=>{
                el.checked = false;
            });

        }
    }

    // document.getElementById('moves').addEventListener('onsubmit',function(){
//  document.getElementById('datatable').DataTable().rows().data();
        
    // });

// jQuery(document).load(function() {

// jQuery('#datatable').DataTable({
         
//         "paging": false,
        
//     // console.log(table);
// });
// });




$(document).ready(function(){
    $("#datatable").dataTable().fnDestroy();
    $('#datatable').DataTable({"paging": false,});
    //get file name after operation label when reload page
    $("#file-name").html(sessionStorage.getItem("upload_name"));

    $('#submit-button').change(function(){
        $("#file-name").html(sessionStorage.getItem("upload_name"));
    });

$('input[type="file"]').change(function(e){

    var fileName = e.target.files[0].name;
    //save file name upload in session
    sessionStorage.setItem("upload_name", fileName);

    $("#uploaded-file").html(fileName).removeAttr('hidden');
    $("#submit-button").removeAttr('disabled');
    // alert('The file "' + fileName +  '" has been selected.');

});

});




    </script>
    @endsection