@extends('layouts.app')
@section('title', 'Order')
@section('content')
<style>
    /* .select2 .parsley-errors-list filled {
        margin-top: 42px;
        margin-bottom: -60px;
    } */
    /* .select2 .parsley-errors-list.filled + span.select2 {
margin-bottom: 30px;
}

.select2 .parsley-errors-list.filled + span.select2 span.select2-selection--single {
    background: #FAEDEC !important;
    border: 1px solid #E85445;
} */

</style>
<div class="container-fluid mt-1">
    <div class="codl-lg-12 ">
        <div class="col-lg-12" >
            <div class="card" >
                <div class="card-body">
                    <div class="p-0">
                        <form method="post" name="orderAdd" id="orderAdd" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate data-parsley-trigger="keyup" data-parsley-trigger="focusout"   action="{{route('ordersubmit')}}">
                            @csrf
                            <!-- Modal Header -->
                            <div class="row col-lg-12 pl-4">
                                <h5 class="modal-title" id="exampleModalLabel">Add Order </h5>
                            </div>
                            <!-- Modal body -->
                            <div class="card p-2 card_top_orenge " >
                                <div class="card-body">
                                    <div class="row ">
                                        <div class="col-lg-1">
                                            <label for="unique-id-input" class="col-form-label">Order Unique Id </label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="order_unique_id" id="order_unique_id" type="text" class="form-control" value="{{$orderUniqueId}}" readonly />
                                        </div>
                                        @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
                                        <div class="col-lg-1 pr-0">
                                            <label for="name-input" class="col-form-label">Customer Name<span class="text-danger"> * <span></label>
                                        </div>
                                        <div class="col-lg-3">
                                            <select required class="form-control select " name="customer_id" id="customer_id" onchange="get_cust_client(this.value)">
                                                <option value="">Select Customer</option>
                                                @forelse($cust_list as $cust)
                                                <option value="{{$cust->id}}"> {{$cust->customer_name}}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </div>
                                        @else
                                         <input type="hidden" name="customer_id" id="customer_id" value="{{Auth::user()->customer_id}}">
                                        @endif
                                        <div class="col-lg-1 pr-0">
                                            <label for="address-input" class="col-form-label">Customer Order Id</label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="customer_order_id" value="" id="customer_order_id" type="text" class="form-control" placeholder="Enter Customer Order Id"  data-parsley-trigger="keyup"  />
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col-lg-1">
                                            <label for="city-input" class="col-form-label">Client <span class="text-danger"> * <span></label>
                                        </div>
                                        <div class="col-lg-3">
                                             @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
                                                <select required class="form-control select" name="client_id" id="client_id">
                                                    <option value="">Select Client</option>
                                                   <!--  @forelse($client_list as $clt)
                                                    <option value="{{$clt->id}}"> {{$clt->client_name}}</option>
                                                    @empty
                                                    @endforelse -->
                                                </select>
                                            @else
                                                <select required class="form-control select" name="client_id" id="client_id">
                                                        <option value="">Select Client</option>
                                                        @forelse($client_list as $clt)
                                                        <option value="{{$clt->id}}"> {{$clt->client_name}}</option>
                                                        @empty
                                                        @endforelse
                                                    </select>

                                            @endif
                                        </div>
                                        <div class="col-lg-1">
                                            <label for="state-input" class="col-form-label">Product<span class="text-danger"> * <span></label>
                                        </div>
                                        <div class="col-lg-3">
                                            <select required class="form-control" name="product_name_id" id="product_name_id" >
                                                <option value="">Select Product</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-1">
                                            <label for="state-input" class="col-forwm-label px-0 mx-0" style="width: 114%;text-align: left;">Received Date<span class="text-danger"> * <span></label>
                                        </div>
                                        <div class="col-lg-3" id='order_received_datetime'>
                                            <input class="form-control date-picker" name="order_received_datetime" id="order_received_datetime" type="text"/>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col-lg-1">
                                            <label for="phone-no-input" class="col-form-label"> Borrower Name </label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="borrower_name" id="borrower_name" type="text" value="" class="form-control" placeholder="Enter Borrower Name"  data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z .][A-Za-z .]*$"/>
                                        </div>
                                        <div class="col-lg-1">
                                            <label for="email-input" class="col-form-label"> Borrower SSN </label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="borrower_ssn" id="borrower_ssn" type="text" class="form-control" placeholder="Enter Borrower SSN" data-parsley-trigger="keyup" />
                                        </div>
                                        <div class="col-lg-1 pr-0">
                                            <label for="active-input" class="col-form-label">Co-borrower Name </label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="co_borrower_ssn" id="co_borrower_ssn" type="text" class="form-control" placeholder="Enter Co-borrower Name" data-parsley-trigger="keyup" />
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col-lg-1">
                                            <label for="phone-no-input" class="col-form-label"> Address <span class="text-danger"> * <span></label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="address" id="address" type="text" value="" class="form-control" placeholder="Enter Address" required  />
                                        </div>
                                        <div class="col-lg-1">
                                            <label for="email-input" class="col-form-label">City </label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="city" value="" id="city" type="text" class="form-control" placeholder="Enter City" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z_ ]*$" />
                                        </div>
                                        <div class="col-lg-1  pr-0">
                                            <label for="email-input" class="col-form-label"> Co-borrower SSN </label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="co_borrower_ssn" id="co_borrower_ssn" type="text" class="form-control" placeholder="Enter Co-borrower SSN" data-parsley-trigger="keyup" />
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col-lg-1">
                                            <label for="active-input" class="col-form-label">State <span class="text-danger"> * <span></label>
                                        </div>
                                        <div class="col-lg-3">
                                            <select required class="form-control select2" name="state" id="edit_state"  onchange="get_county(this.value)" data-parsley-errors-container="#state-errors" data-parsley-trigger="keyup">
                                                <option value="">Select State</option>
                                                @foreach($states as $state)
                                                <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                                                @endforeach
                                            </select>
                                            <div id="state-errors"></div>
                                        </div>
                                        <div class="col-lg-1">
                                            <label for="county_select" class="col-form-label"> County <span class="text-danger"> * <span></label>
                                        </div>
                                        <div class="col-lg-3">
                                            <select required class="form-control select2" name="county" id="county" data-parsley-errors-container="#county-errors" data-parsley-trigger="keyup">
                                                <option value="">Select County</option> 
                                            </select>
                                            <div id="county-errors"></div>
                                        </div>
                                        <div class="col-lg-1">  
                                            <label for="email-input" class="col-form-label">Zip </label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="zip" value="" id="zip" type="text" class="form-control" placeholder="Enter Zip" data-parsley-trigger="keyup" data-parsley-type-message ="This value should be a valid number"/>
                                        </div>
                                    </div>
                                    <div class="row mt-1">
                                        <div class="col-lg-1">
                                            <label for="active-input" class="col-form-label">Loan Amount</label>
                                        </div>
                                        <div class="col-lg-3">
                                            <input name="loan_amount" id="loan_amount" type="text" class="form-control" placeholder="Enter Loan Amount " />
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col-lg-1">
                                            <label for="active-input" class="col-form-label">Description</label>
                                        </div>
                                        <div class="col-lg-10">
                                            <textarea  name="description" id="description" type="text" class="form-control" placeholder="Enter Description" ></textarea>
                                        </div>
                                    </div>
                                    <div class=" text-center pt-2">
                                      
                                          <a href="{{route('orderlist')}}"><button type="button" class="btn btn-danger"  >Close</button></a>
                                        <input type="submit" value="Submit" name="submit" id="submit" class="btn btn-primary" >
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(function() {
    @if(Session::has('success'))
    new PNotify({
        title: 'Success',
        delay: 500,
        text:  "{{Session::get('success')}}",
        type: 'success'
    });
    @endif
    @if ($errors->any())
        var err = "";
        @foreach ($errors->all() as $error)
        new PNotify({
            title: 'Error',
            text: "{{$error}}",
            delay: 800,
            type: 'error'
        });
        @endforeach
    @endif
    CKEDITOR.replace('description');
});
$(document).ready(function(){
    $('.select2').on('change', function() {
        $('#county-errors').empty();
        $('#state-errors').empty();
    });
    $('select[name="client_id"]').on('change', function() {
        var clientID = $(this).val();
        var customer_id = $("#customer_id").val();
        if(clientID) {
            $.ajax({
                url: '/getproduct',
                data: { id:clientID ,customer_id:customer_id, _token: '{{csrf_token()}}'},
                type: "GET",
                dataType: "json",
                success:function(data) {                      
                    $('select[name="product_name_id"]').empty();
                    $('select[name="product_name_id"]').append('<option value="">Select Product</option>');
                    $.each(data, function(key, value) {
                        $('select[name="product_name_id"]').append('<option value="'+ value.id +'">'+ value.getproductname['product_name'] +'</option>');
                    });
                }
            });
        }
        else
        {
            $('select[name="product_name_id"]').empty();
        }
    });

    $("#product_name_id").on('click', function(){
        // alert();
        var id =  $(this).val();
        var url = '{{ route("getproductdetail") }}';
        $.ajax({
            type: "post",
            url: url,
            data: { id:id , _token: '{{csrf_token()}}'},
            dataType:'json',
            success: function(response)
            {
                console.log(response);
                var res =response.data;
                if(res != null)
                {
                    
                    CKEDITOR.instances['description'].setData(res.requirements);
                }
            }
        });
    });
});
function get_cust_client(id)
{
    // console.log(id);
    // var id =  $(this).val();
        var url = '{{ route("getclientdetail") }}';
        $.ajax({
            type: "post",
            url: url,
            data: { id:id , _token: '{{csrf_token()}}'},
            dataType:'json',
            success: function(data)
            {
                 $('select[name="client_id"]').empty();
                 $('select[name="client_id"]').append('<option value=" ">Select Client</option>');
                   
                    $.each(data, function(key, value) {
                        $('select[name="client_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                    });
            }
        });
    
}

function get_county(stateid)
{
    var stateid = stateid;
    var url = '{{ route("getcountydetail") }}';
    $.ajax({
        type: "post",
        url: url,
        data: { stateid:stateid , _token: '{{csrf_token()}}'},
        success: function(html)
        {
            if (html)
            {
                $("#county").html("");
                $("#county").html(html);
            }
        }
    });
}

$(function() {
    $('input[name="order_received_datetime"]').daterangepicker({
        singleDatePicker: true,
        startDate: new Date(),
        maxDate: new Date(),
        showDropdowns: true,
        timePicker: true,
        timePicker24Hour: true,
        timePickerIncrement: 10,
        autoUpdateInput: true,
        locale: {
            format: 'MM/DD/YYYY HH:mm:ss'
        },
    });
});
</script>
@endsection