@extends('core::layouts.master')
@section('title')
    {{trans_choice('loan::general.collection_sheet',1)}}
@endsection
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h5>ប្រតិបត្ដិការផ្ទេរអតិថិជនពីមន្ត្រីឥណទាន មួយទៅមន្ដ្រីឥណទានមួយ
                        <a href="#" onclick="window.history.back()"
                            class="btn btn-outline-light bg-white d-none d-sm-inline-flex">
                            <em class="icon ni ni-arrow-left"></em><span>{{ trans_choice('core::general.back',1) }}</span>
                        </a>
                    </h5>
                </div>

                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a
                                    href="{{url('dashboard')}}">{{ trans_choice('dashboard::general.dashboard',1) }}</a>
                        </li>                       
                        <li class="breadcrumb-item active">ផ្ទេរអតិថិជន</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <section class="content" id="app">
        <div class="card">
            <div class="card-header with-border">
                <h3 class="card-title">
                    ជ្រើសរើសឈ្មោះមន្ដ្រីឥណទាន់ចាស់
                </h3>                
            </div>
            <div class="card-body">
                <form method="get" action="{{Request::url()}}" class="">
                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-6" style="margin-left:-30px;">
                            <div class="form-group">
                                <label class="control-label"
                                       for="branch_id">ឈ្មោះមន្ត្រីឥណទាន៖</label>
                                       <v-select label="name" :options="users"
                                        :reduce="user => user.id"                                       
                                        v-model="selected_loanofficer"
                                    >
                                    <template #search="{attributes, events}">
                                        <input
                                                autocomplete="off"
                                                class="vs__search @error('loan_officer_id') is-invalid @enderror"
                                                v-bind="attributes"   
                                                ref="refloan_officer_id"                                             
                                                v-on="events"
                                        />
                                    </template>
                                </v-select>
                                <input type="hidden" name="loan_officer_id"
                                    v-model="selected_loanofficer">
                                    @error('loan_officer_id')
                                    <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn bg-olive btn-flat" style="margin-top:29px;">{{trans_choice('core::general.filter',1)}}</button>
                            <a href="{{Request::url()}}" class="btn bg-purple  btn-flat pull-flat" style="margin-top:29px;">{{trans_choice('general.reset',1)}}!</a>
                        </div>
                    </div>
                    
                </form>

            </div>
            <!-- /.box-body -->

        </div>
        <!-- /.box -->
            <div class="card" style="          
                        width: 34cm;           
                        margin: auto;
                        padding:10px;
                        page-break-before: always;
                        ">
    
                <div class="card-body table-responsive p-0">
                    <table style="width:100%;">
                    
                        <!-- <tr style="margin-top:-10px;">
                            <td style="text-align:center;">                       
                                <span style="font-family: Khmer OS Muol Light,'Roboto', sans-serif !important;font-size:18px !important;">
                                    គុណភាព ផោន សប ឯ.ក
                                </span>
                            </td>                               
                        </tr>
                        <tr>                    
                            <td style="text-align:center;">
                                <span style="font-family: Khmer OS Muol Light,'Roboto', sans-serif !important;font-size:18px !important;margin-top:-15px;">
                                    KUNPHEAP PAWN SHOP
                                </span>
                            </td>                    
                        </tr>   -->
                        <tr>
                            <td>
                                <form method="get" action="{{ url('loan/transfer/store') }}" enctype="multipart/form-data">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label"
                                                    for="branch_id">ឈ្មោះមន្ត្រីឥណទានថ្មី៖</label>
                                                    <v-select label="name" :options="newCo"
                                                        :reduce="user => user.id"                                       
                                                        v-model="selected_loanofficer_new"
                                                    >
                                                    <template #search="{attributes, events}">
                                                        <input
                                                                autocomplete="off"
                                                                class="vs__search @error('Loan_officer_new') is-invalid @enderror"
                                                                v-bind="attributes"   
                                                                ref="refloan_officer_id"                                             
                                                                v-on="events"
                                                        />
                                                    </template>
                                                </v-select>
                                                <input type="hidden" name="Loan_officer_new"
                                                    v-model="selected_loanofficer_new">
                                                    @error('Loan_officer_new')
                                                    <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                            </div>
                                        </div>
                                        <input type="hidden" v-model="loan_officer_id" name="loan_officer_id">
                                        <input type="hidden" v-model="loan_transfer" name="loan_transfer">
                                        <div class="col-md-2">
                                            <label class="control-label"
                                                for="branch_id">អតិថិជនទាំងអស់</label>
                                            <label class="container" style="margin-right:25px;margin-top:6px;">
                                                <input type="checkbox" v-model="allSelected" @click="checkAll()">
                                                <span class="checkmark"></span>
                                            </label>                                        
                                        </div>
                                        <div class="col-md-2" style="margin-left:-176px;margin-top:46px;">
                                            <a href="{{url('loan/transfer/'.$co.'/print_transfer')}}"><i class="fas fa-print"></i>
                                            </a>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="submit" class="btn bg-olive btn-flat" style="margin-top:36px;margin-left:-160px;">ផ្ទេរអតិថិជន</button>
                                        </div> 
                                    </div>
                                </form>
                            </td>
                        </tr>
                        <tr>
                            <td>      
                            
                                <table class="table table-bordered table-condensed table-hover">
                                    <thead>
                                        <tr style="background-color: #D1F9FF;font-size:16px;font-family: 'Battambang', 'Roboto', sans-serif !important;">
                                            <th style="text-align:center">ល.រ</th>
                                            <th style="text-align:center">                                             
                                                ជ្រើសរើស
                                            </th>
                                            <th style="text-align:center">{{trans_choice('client::general.client',1)}}</th>                            
                                            <th style="text-align:center">គណនី</th>                                           
                                            <th style="text-align:center">ប្រាក់ដើម</th>
                                            <th style="text-align:center">ការប្រាក់</th>
                                            <th style="text-align:center">ប្រាក់ពិន័យ</th>
                                            <th style="text-align:center">សេវារដ្ឋបាល</th>
                                            <th style="text-align:center">សរុបទឹកប្រាក់ត្រូវបង់</th>
                                        </tr>
                                    </thead>   
                                    <tbody>
                                                                            @foreach($data as $key)
                                                                                         <tr style="font-size:14px;font-family: 'Battambang', 'Roboto', sans-serif !important;">
                                                <td style="text-align:center">{{ $i++ }}</td>   
                                                <td style="text-align:center">
                                                    <label class="container" style="margin-right:-25px;">
                                                        <input type="checkbox" :id="{{ $key->acc }}" :value="{{ $key->acc }}" v-model="loan_transfer" @change="check()" v-bind:checked="selected">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <!-- <input type="checkbox" id="account_number" name="account_number" value="{{ $key->acc }}"> -->
                                                </td>                            
                                                <td>
                                                    {{$key->client_name}}
                                                </td>
                                               
                                                <td style="text-align:center">{{ $key->account_number }}</td>                                               
                                                <td style="text-align:right">
                                                {{ number_format( $key->principal,2) }}
                                                </td>
                                                <td style="text-align:right">
                                                {{ number_format( $key->interest,2) }}

                                                        
                                                </td>
                                                <td style="text-align:right">
                                                       
                                                {{ number_format( $key->penalties,2) }}
                                                        
                                                </td>
                                                <td style="text-align:right">
                                                {{ number_format( $key->fees,2) }}
                                                    
                                                </td>
                                                <td style="text-align:right">
                                                        @if($key->currency_id=='2')
                                                            @if(substr($key->total_due,-2)<=49 && substr($key->total_due,-2)>=01)
                                                           
                                                            {{number_format(round($key->total_due+100,-2),0)}}
                                                            @else
                                                            {{number_format(round($key->total_due,-2),0)}}
                                                            @endif
                                                        @else
                                                            {{ number_format( $key->total_due,2) }}
                                                        @endif
                                                   
                                                </td>
                                            </tr>

                                        @endforeach
                                       
                                            <tr>
                                                <td colspan="4" style="text-align:right"><b>{{trans_choice('core::general.total',1)}}</b></td>
                                                <td style="text-align:right">
                                                {{number_format($principal,2)}}
                                                </td>
                                                <td style="text-align:right">
                                                    {{number_format($interest,2)}}

                                                </td>
                                                <td style="text-align:right">
                                                    {{number_format($penalties,2)}}
                                                    
                                                </td>
                                                <td style="text-align:right">
                                                    {{number_format($fees,2)}}
                                                  
                                                </td>
                                                <td style="text-align:right">
                                                    {{number_format($total_due,2)}}
                                                </td>
                                            </tr>
                                    </tbody>
                                </table>
                                            
                            </td>
                        </tr>               
                    
                    </table>   
                </div>
            </div>
    </section>
@endsection
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>
@section('scripts')
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                users: users,
                newCo:newCos,
                Loan_officer_new: parseInt("{{old('Loan_officer_new')}}"),
                loan_officer_id: parseInt("{{old('loan_officer_id',@$_GET['loan_officer_id'])}}"),
                selected_loanofficer:  parseInt("{{old('loan_officer_id',@$_GET['loan_officer_id'])}}"), 
                selected_loanofficer_new: [],          
                data:datas,
                loan_transfer : [],
                allSelected: false,
            },           
            methods: {  
                check(){
                    loan_transfer = this.loan_transfer;                    
                }, 
                checkAll(){
                    this.loan_transfer = [];
                    if (!this.allSelected) {
                        for (loans in this.data) {
                            this.loan_transfer.push(this.data[loans].acc);
                        }                        
                    }
                    
                }
            },
            created() {
                this.allSelected = false;
            },
            computed: {
                selected(){
                    return true;
                },                
            }
        })
    </script>
@endsection