@extends('layouts.app')
@section('title', 'Lender')

@section('content')
<div class="container-fluid mt-1">
	<x-setting_tabs/>
	<div class="col-lg-12">
        <div class="card ">
            <div class="card-body">
                <div class="p-0">
                    <table id="datatable" class="table table-bordered mb-0"  >
                        <thead>
                            <tr>
                                <th>Sl No</th>
                                <th>Client</th>
                                <th>Unique Id</th>
                                <th>Name</th>
                                <th>Lender Type</th>
                                <th>Servicing Platform</th>
                                <th>Escrow Processing</th>
                                <th>Address</th>
                                <th>State</th>
                                <th>County</th>
                                 <th>Zip </th>
                                <th>Zip (ZIP+4)</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                                                         @forelse($lenders_list as $lenders_dt)
                        	<tr>
                                <td>{{$i++}}</td>
                                <td>{{ isset($lenders_dt->getClient) ?$lenders_dt->getClient['client_name']: " " }}</td>

                                <td>{{ $lenders_dt->lender_uniqueid }}</td>
                                <td>{{ $lenders_dt->lender_name }}</td>
                                <td>{{ isset($lenders_dt->getLenderType) ?$lenders_dt->getLenderType['lender_type_name']: " " }}</td>
                                <td>{{ isset($lenders_dt->getservicePlatform) ?$lenders_dt->getservicePlatform['platform_name']: " " }}</td>
                                <td>{{ isset($lenders_dt->getEscrowProcessing) ?$lenders_dt->getEscrowProcessing['processing_name']: " " }}</td>
                                <td>{{ $lenders_dt->address_line1 }} {{ $lenders_dt->address_line2 }} {{ $lenders_dt->city }}</td>
                                <td>{{ isset($lenders_dt->getState) ?$lenders_dt->getState['state_name']: " " }} </td>
                                <td>{{ isset($lenders_dt->getCounty['county_name']) ?$lenders_dt->getCounty['county_name']: " " }} </td>
                                <td>{{ $lenders_dt->zip5 }} </td>
                                <td>{{ $lenders_dt->zip4 }} </td>
                                <td><img class="menuicon" onclick="edit('{{ $lenders_dt->id }}')" src="{{asset('app-assets/assets/images/edit.svg')}}" ></td>
                            </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addLenderModel">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
    	        <form method="post" name="addLenderFrm" id="addLenderFrm" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
    	            @csrf
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add Client</h5>
    					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    						<span aria-hidden="true">&times;</span>
    					</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="row">
                        	<div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Client <span class="mandatory"> * <span></label>
                                 <select required class="form-control" name="client_id" id="client_id">
                                    <option value="">Select Client</option>
                                    @foreach($client_list as $client_lt)
                                    <option value="{{$client_lt->id}}">{{$client_lt->client_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label"> Name<span class="mandatory">*<span></label>

                             	<input id="lender_name" name="lender_name" type="text" class="form-control" autocomplete="off" placeholder="Enter Lender Name"  required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z . ]*$">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Lender Type<span class="mandatory"> * <span></label>
                                 <select required class="form-control" name="lender_type" id="lender_type">
                                    <option value="">Select Type</option>
                                    @foreach($lender_types as $l_type)
                                    <option value="{{$l_type->id}}">{{$l_type->lender_type_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Servicing Platform</label>
                                 <select  class="form-control" name="servicing_platform" id="servicing_platform">
                                    <option value="">Select </option>
                                    @foreach($servies_plts as $servie)
                                    <option value="{{$servie->id}}">{{$servie->platform_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Escrow Processing</label>
                                 <select  class="form-control" name="escrow_processing" id="escrow_processing">
                                    <option value="">Select </option>
                                    @foreach($esc_proc_lst as $esc_type)
                                    <option value="{{$esc_type->id}}">{{$esc_type->processing_name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Address 1</label>
                                <input type="text" class="form-control" id="address_line1" name="address_line1" placeholder="Enter Address 1" >
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Address 2</label>
                                <input type="text" class="form-control" id="address_line2" name="address_line2" placeholder="Enter Address 2">
                            </div>

                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">City</label>
                                 <input type="text" class="form-control" name="city" id="city" value="">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">State</label>
                                <select  class="form-select form-control" name="state" id="state"  onchange="get_county(this.value)">
                                        <option value="">Select State</option>
                                            @foreach($states as $state)
                                            <option value="{{$state->id}}">{{$state->state_name}}</option>
                                            @endforeach
                                </select>
                            </div>

                         	<div class="col-lg-4">
                                <label for="name-input" class="col-form-label">County</label>
                                <select  class="form-select form-control" name="county" id="county" >
                                    <option value="">Select County</option>

                                </select>
                            </div>
                             <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Zip(5 digit) </label>
                                 <input type="text" class="form-control" name="zip5" id="zip5" value="">
                            </div>

                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Zip(ZIP+4)</label>
                                <input type="text" class="form-control" name="zip4" id="zip4" value="">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Lender Logo</label><br>
                               <input type="file" name="lender_logo" id="lender_logo" class="drospify" data-height="250" data-parsley-trigger="keyup" accept=".jpg,.png,.svg" data-parsley-fileextension='jpg,png,svg,jpeg' data-parsley-errors-container="#startTimeErrorContainer" data-parsley-trigger="change">
                                <div id="startTimeErrorContainer"></div>
                            </div>

                            <div class="col-lg-4">
                                <label for="active-input" class="col-form-label">Is Active ?</label><br>
                                <input type="checkbox" id="is_active" name="is_active" value="1" checked>
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Accounts Email ID</label><br>
                                <input type="email" class="form-control" name="accounts_mail" id="accounts_mail" value=""  data-parsley-trigger="keyup">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Contact Name</label><br>
                                <input type="text" class="form-control" name="contact_name" id="contact_name" value="">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Contact Email</label><br>
                                <input type="email" class="form-control" name="contact_email" id="contact_email" value="">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Contact Phone</label><br>
                                <input type="text" class="form-control" name="contact_phone" id="contact_phone" value="">
                            </div>
                             <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Color Code 1</label>
                                <input type="color" class="form-control" name="lender_colorcode" id="lender_colorcode" value="" >
                            </div>
                             <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Color Code 2</label>
                                <input type="color" class="form-control" name="lender_colorcode2" id="lender_colorcode2" value="" >
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Color Code 3</label>
                                <input type="color" class="form-control" name="lender_colorcode3" id="lender_colorcode3" value="" >
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="saveLender();">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
    	        </form>
            </div>
        </div>
    </div>

     <div class="modal fade" id="editLenderModel">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                    <div id="append_data"></div>

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

</div>
@endsection
@section('script')
<x-alert/>
<script type="text/javascript">

	$(document).ready(function() {
		$(".odtabs").not("#tab2").addClass('btn-outline-secondary');
		$("#tab2").addClass('btn-secondary');
	});

	 var table = $('#datatable').DataTable({
		responsive: true,
		dom: 'l<"toolbar">Bfrtip',
        buttons: [
            'excel'
        ],
		initComplete: function(){
		    $("div.toolbar").html('<button id="addLender" type="button" class="ml-2 tble_btn btn btn-primary" data-toggle="modal" data-target="#addLenderModel"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Lender</button><br />');
		},
	   'columnDefs': [ {
			'targets': [9],
			'orderable': false,
		}]
    });

    function get_county(stateid)
    {
        $.ajax({
                    url: "{{route('get_county', '')}}",
                    type: "POST",
                    data: {
                            "_token": "{{ csrf_token() }}",
                             stateid:stateid

                          },
                    success: function(html)
                    {
                        if (html)
                        {
                            $("#county").html("");
                            $("#county").html(html);
                        }
                    }
            });
    }

    function saveLender()
    {
        if ($("#addLenderFrm").parsley())
        {
            if ($("#addLenderFrm").parsley().validate()) {
            event.preventDefault();
            if ($("#addLenderFrm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('addLenderDt') }}",
                    data: new FormData($("#addLenderFrm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {

                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);

                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        }
        }
    }
    function edit(id)
    {

        var url = '/lenderEdit/'+id;
        $.ajax({
            url:url,
            dataType:'html',
            success:function(data)
            {
                $("#append_data").html('');
                $("#append_data").html(data);
                $('#editLenderModel').modal('show');
            }
        });
        return false;
    }
    function updateLender()
    {
        if ($("#updateLenderFrm").parsley())
        {
            if ($("#updateLenderFrm").parsley().validate()) {
            event.preventDefault();
            if ($("#updateLenderFrm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('updateLenderDt') }}",
                    data: new FormData($("#updateLenderFrm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {

                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);

                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        }
        }
    }
</script>
@endsection