@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">ادارة البنوك والنقدية</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item active"> @lang('dashboard_clients.welcome_platform')</li>
                        </ol>
                    </div>

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

        <div class="card">
            <div class="card-body">
               <h4 class="card-title mb-4">@lang('reports.filter') </h4>
                <form action="{{ route('dashboard.moves.match.all',$move->id) }}" method="GET">
                <div class="row">


                                               <div class="col-lg-4">
                          <div class="form-group">
                        <label class="control-label"> التاريخ من </label>
                   <div class="input-group">
                            <input type="date" class="form-control dateFrom" name="date_from" >
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                                </div>

                                           <div class="col-lg-4">
                          <div class="form-group">
                        <label class="control-label">التاريخ الى</label>
                   <div class="input-group">
                            <input type="date" class="form-control dateTo"name="date_to" >
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                                </div>

                                      <div class="col-lg-12">
                                    <div class="text-right">
                                        <button type="submit" class="btn btn-primary">تنفيذ العملية</button>
                                    </div>
                                </div>

                            </div>
                        </form>







            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">


                        <div class="row">

                            <div class="col-lg-6">

                                <h3> اختيار المعاملات المتشابهة</h3>
                            </div>
                            <div class="col-lg-6">

                                <div style="text-align: left">
                                    <h1>
                                        <b>

                                            ${{ $amount }}
                                        </b>
                                    </h1>
                                </div>
                            </div>
                        </div>
                        <b>{{ $bank_name }}</b>
                        <p>{{ $date }}</p>

                        <form action="{{ route('dashboard.moves.assign.match.all',$move) }}" method="POST" id="moves">
                            @csrf
                            @method('PUT')

                            {{-- <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>تاريخ المعاملة</th>
                                                <th>نوع المعاملة</th>
                                                <th >المدفوع له/اليه</th>
                                                <th>مبلغ المعاملة</th>


                                            </tr>
                                        </thead>


                                        <tbody>
                                            @forelse ($moves as $index=> $move)
                                            <tr>
                                                <td>{{ $index+1 }}</td>
                                                <input type="hidden" name="moves[{{ $index }}][match_amount_id]" value="{{ $move->id }}">
                                                <td>{{ $move->date }}</td>
                                                <td>{{ $move->type }}</td>
                                                <td>@if($move->type() == 'Supplier' && $move->type() != null)
                                                    {{ '(Supplier) ' . optional($move->moveable)->company_name }}@elseif($move->type()!= null)
                                                    {{ '(Client) ' . optional($move->moveable)->name }}@endif</td>
                                                <td id="child_amount{{ $index }}">{{ $move->amount }}</td>

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

                                            <tr>
                                               <td colspan="5" style="text-align: center">

                                                   @lang('dashboard.no_data')
                                                </td>
                                            </tr>
                                            @endforelse


                                        </tbody>

                                    </table>
                                </div>
                            </div>
                            @if($moves->count() >0)
                            <div class="col-lg-3">
                                <b>Selected Amount</b>
                                <p style="display: inline"
                                    id="selected_amount">0</p>
                            </div>
                            <div class="col-lg-3">
                                <b>Original Amount</b>
                                <p style="display: inline"
                                    id="orignal_amount">
                                    {{ $amount }}</p>

                            </div>
                            <div class="col-lg-3">
                                <b>Difference Amount</b>
                                <p style="display: inline"
                                    id="difference_amount">
                                    {{ $amount }}</p>

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

                            </div>
                            @endif
                        </form>



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


    </div>
    @endsection
    @section('custom_script')

    <script>


       $(document).ready(function(){
    // $("#datatable").dataTable().fnDestroy();
    // $('#datatable').DataTable({"paging": false,});

            var checks = $(".checks").change(function(){
                // console.log(checks);
                var amo = 0;

                for(var i=0; i< checks.length;i++){
                    // console.log(checks[i].checked);
                    if(checks[i].checked){
                    var index = checks[i].id.split('check')[1];
                    // console.log(index);
                        var child = $("#child_amount"+index);
                        // console.log(child.html());
                        amo += parseFloat(child.html());
                    }
                }
                if(amo == "{{ $amount }}")
                {
                    $("#disabled_button").removeAttr('disabled');
                    $("#difference_amount").html(0).css('color','green');
                    // $("#selected_amount").html(amo);

                }
                else{
                    $("#disabled_button").attr('disabled',true);
                    $("#difference_amount").html("{{ $amount }}" - amo).css('color','red');

                }
                    $("#selected_amount").html(amo);
                // if()
            });
            // console.log(checks);
       });

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

    //     }
    // }

// jQuery('#datatable').DataTable({

//         "paging": false,

// });


    </script>
    @endsection