@extends('layouts.app')
@section('title', 'Middleware | Order Creation')
@section('content')
    <style>
        /* Loader */
        .content-loaded {
            display: none;
        }

        .frame {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 400px;
            margin-top: -200px;
            margin-left: -200px;
            border-radius: 2px;
            /* background: #ffffff; */
            color: #fff;
        }

        .center {
            position: absolute;
            width: 220px;
            height: 220px;
            top: 90px;
            left: 90px;
        }

        .dot-1 {
            position: absolute;
            z-index: 3;
            width: 30px;
            height: 30px;
            top: 95px;
            left: 95px;
            background: #fff;
            border-radius: 50%;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
            animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
        }

        .dot-2 {
            position: absolute;
            z-index: 2;
            width: 60px;
            height: 60px;
            top: 80px;
            left: 80px;
            background: #fff;
            border-radius: 50%;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
            animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
        }

        .dot-3 {
            position: absolute;
            z-index: 1;
            width: 90px;
            height: 90px;
            top: 65px;
            left: 65px;
            background: #fff;
            border-radius: 50%;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
            animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;
        }

        @-webkit-keyframes jump-jump-1 {

            0%,
            70% {
                box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes jump-jump-1 {

            0%,
            70% {
                box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @-webkit-keyframes jump-jump-2 {

            0%,
            40% {
                box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes jump-jump-2 {

            0%,
            40% {
                box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @-webkit-keyframes jump-jump-3 {

            0%,
            10% {
                box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes jump-jump-3 {

            0%,
            10% {
                box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
    </style>
    <div class="container-fluid mt-2">
        <div class="frame d-flex align-items-center justify-content-center" style="height: 100%; width: 100%;">
            <div class="center">
                <div class="dot-1"></div>
                <div class="dot-2"></div>
                <div class="dot-3"></div>
            </div>
        </div>
        <div class="col-md-12 pl-1 content-loaded">
            <form id="orderInputForm" enctype="multipart/form-data" data-parsley-validate>
                @csrf
                <div class="card">
                    <div class="form-group row mb-0 pb-0">
                        <h4 class="pl-2 p-3 mb-0 pb-0 form-group col-lg-8">BORROWER INFORMATION</h4>
                        <div class="form-group col-lg-2 p-3 mb-0 pb-3">
                            <select class="form-control" name="client" id="client" tabindex="-1" aria-hidden="true">
                                <option selected="" disabled="" value="">Select Client</option>
                                @foreach ($clientList as $client)
                                    <option value="{{ $client->id }}">{{ $client->client_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-lg-2 p-3 mb-0 pb-3">
                            <select id="service" name="service" type="text" class="form-control" autocomplete="off"
                                placeholder="Enter Service" data-parsley-trigger="focusout" data-parsley-trigger="keyup">
                                <option selected="" disabled="" value="">Select Service</option>
                                @foreach ($serviceList as $service)
                                    <option value="{{ $service->id }}">{{ $service->service_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="card-body" style="border-top:3px solid #0e7c31">
                        <div class="form-group row mb-3 pb-0">
                            <div class="col-6">
                                <h6 id="barrower_hide" style="color: orange">FIRST BORROWER INFORMATION</h6>
                                <h6 id="vendor_hide"style="color: orange">VENDOR INFORMATION</h6>
                            </div>
                            <div class="col-5 text-right ml-4">
                                <input type="checkbox" id="checkbox" name="is_vendor"><label
                                    style="font-size: 0.8rem !important;" class="mx-2" for="">Use Vendor</label>
                            </div>

                            <div class="form-group col-lg-4 mb-0 pb-0" id="vendor">
                                <label>Business Name<span style="color:green;">*</span></label>
                                <input type="text" name="business_name" id="business_name" class="form-control"
                                    value="" placeholder="Enter Business Name" maxlength="100"
                                    data-parsley-trigger="focusout keyup" data-parsley-pattern="^[A-Za-z ]*$"
                                    data-parsley-error-message="Only letters and spaces allowed (Max 100 Chars)">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0" id="first">
                                <label>First Name<span style="color:green;">*</span></label>
                                <input type="text" name="first_name" id="first_name" class="form-control" value=""
                                    placeholder="Enter First Name" maxlength="50" data-parsley-trigger="focusout keyup"
                                    data-parsley-pattern="^[A-Za-z ]*$"
                                    data-parsley-error-message="Only letters and spaces allowed (Max 50 Chars)">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0" id="second">
                                <label>Middle Name</label>
                                <input type="text" name="middle_name" id="middle_name" class="form-control"
                                    value="" placeholder="Enter Middle Name" maxlength="50"
                                    data-parsley-trigger="focusout keyup" data-parsley-pattern="^[A-Za-z ]*$"
                                    data-parsley-error-message="Only letters and spaces allowed (Max 50 Chars)">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0" id="third">
                                <label>Last Name<span style="color:green;">*</span></label>
                                <input type="text" name="last_name" id="last_name" class="form-control" value=""
                                    placeholder="Enter Last Name" maxlength="50" data-parsley-trigger="focusout keyup"
                                    data-parsley-pattern="^[A-Za-z ]*$"
                                    data-parsley-error-message="Only letters and spaces allowed (Max 50 Chars)">
                            </div>
                        </div>
                        <div class="form-group row mb-3 pb-0">
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>Address 1<span style="color:green;">*</span></label>
                                <textarea name="address1" id="address1" class="form-control" rows="2" placeholder="Address Line 1"
                                    maxlength="255" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+"
                                    data-parsley-error-message="Only letters, numbers, spaces and [ . , # & ' - ] (Max 255 Chars)"></textarea>
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>Address 2</label>
                                <textarea name="address2" id="address2" class="form-control" rows="2" placeholder="Address Line 2"
                                    maxlength="255" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+"
                                    data-parsley-error-message="Only letters, numbers, spaces and [ . , # & ' - ] (Max 255 Chars)"></textarea>
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>City<span style="color:green;">*</span></label>
                                <input type="text" name="city" id="city" class="form-control" value=""
                                    placeholder="Enter City" maxlength="100" data-parsley-trigger="focusout keyup"
                                    data-parsley-pattern="^[A-Za-z -]*$"
                                    data-parsley-error-message="Only letters, spaces and [ - ] allowed (Max 100 Chars)">
                            </div>
                        </div>
                        <div class="form-group row mb-3 pb-0">
                            <div class="form-group col-lg-4 mb-0 pb-0 mt-1">
                                <label>State<span style="color:green;">*</span></label>
                                <select class="form-control" name="state" id="state" autocomplete="off"
                                    aria-hidden="true">
                                    <option selected="" disabled="" value="">Select State</option>
                                    @foreach ($stateList as $state)
                                        <option value="{{ $state->id }}">{{ $state->short_code }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0 mt-1">
                                <label>County</label>
                                <select id="county" name="county" type="text" class="form-control"
                                    autocomplete="off" placeholder="Enter County" data-parsley-trigger="focusout"
                                    data-parsley-trigger="keyup">
                                    <option selected="" disabled="" value="">Select County</option>
                                </select>
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0 mt-1">
                                <label>ZIP Code<span style="color:green;">*</span></label>
                                <input type="text" name="zip_code" id="zip_code" class="form-control"
                                    value="" placeholder="Enter ZIP Code" maxlength="5">
                            </div>
                        </div>
                        <div class="form-group row mb-3 pb-0">
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>Parcel No</label>
                                <input name="parcel_no" id="parcel_no" class="form-control"
                                    placeholder="Enter Parcel No" maxlength="255">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0" id="ssn_hide">
                                <label>SSN</label>
                                <input name="ssn" id="ssn" class="form-control" maxlength="11"
                                    placeholder="000-00-0000">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>Phone#</label>
                                <input type="tel" name="phone" id="phone" class="form-control" value=""
                                    placeholder="(XXX) YYY-ZZZZ x123" maxlength="19">
                            </div>
                        </div>
                        <div class="form-group row mb-3 pb-0" id="second_borrower">
                            <h6 class="pl-2 col-12" style="color: orange">SECONDARY BORROWER INFORMATION</h6>
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>First Name</label>
                                <input type="text" name="first_name2" id="first_name2" class="form-control"
                                    value="" placeholder="Enter First Name" maxlength="50"
                                    data-parsley-trigger="focusout keyup" data-parsley-pattern="^[A-Za-z ]*$"
                                    data-parsley-error-message="Only letters and spaces allowed (Max 50 Chars)">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>Middle Name</label>
                                <input type="text" name="middle_name2" id="middle_name2" class="form-control"
                                    value="" placeholder="Enter Middle Name" maxlength="50"
                                    data-parsley-trigger="focusout keyup" data-parsley-pattern="^[A-Za-z ]*$"
                                    data-parsley-error-message="Only letters and spaces allowed (Max 50 Chars)">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>Last Name</label>
                                <input type="text" name="last_name2" id="last_name2" class="form-control"
                                    value="" placeholder="Enter Last Name" maxlength="50"
                                    data-parsley-trigger="focusout keyup" data-parsley-pattern="^[A-Za-z ]*$"
                                    data-parsley-error-message="Only letters and spaces allowed (Max 50 Chars)">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <h5 class="pl-2">PROPERTY INFORMATION</h5>
                    <div class="card-body" style="border-top:3px solid #0e7c31">
                        <span onclick="fetchBorrowerInfo()" class="btn btn-warning" id="same_borrower">Same as
                            Borrower</span>
                        <span onclick="fetchBorrowerInfo()" class="btn btn-warning" id="same_vendor">Same as
                            Vendor</span>
                        <div class="form-group row mb-3 pb-0">
                            <div class="form-group col-lg-12 mb-0 pb-0">
                                <label>Address<span style="color:red;">*</span></label>
                                <textarea name="address" id="address" class="form-control" rows="2" placeholder="Address" maxlength="255"
                                    data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+"
                                    data-parsley-error-message="Only letters, numbers, spaces and [ . , # & ' - ] (Max 255 Chars)"></textarea>
                            </div>
                        </div>
                        <div class="form-group row mb-3 pb-0">
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>City<span style="color:red;">*</span></label>
                                <input type="text" name="property_city" id="property_city" class="form-control"
                                    value="" placeholder="Enter City" maxlength="100"
                                    data-parsley-trigger="focusout keyup" data-parsley-pattern="^[A-Za-z -]*$"
                                    data-parsley-error-message="Only letters, spaces and [ - ] allowed (Max 100 Chars)">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>State<span style="color:red;">*</span></label>
                                <select class="form-control" name="property_state" id="property_state"
                                    aria-hidden="true">
                                    <option selected="" disabled="" value="">Select State</option>
                                    @foreach ($stateList as $state)
                                        <option value="{{ $state->id }}">{{ $state->short_code }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0">
                                <label>County</label>
                                <select id="property_county" name="property_county" type="text" class="form-control"
                                    autocomplete="off" placeholder="Enter County" data-parsley-trigger="focusout"
                                    data-parsley-trigger="keyup">
                                    <option selected="" disabled="" value="">Select County</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row mb-3 pb-0">
                            <div class="form-group col-lg-4 mb-0 pb-0 mt-1">
                                <label>ZIP Code<span style="color:red;">*</span></label>
                                <input type="text" name="property_zip_code" id="property_zip_code"
                                    class="form-control" value="" placeholder="Enter ZIP code" maxlength="5">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0 mt-1">
                                <label>Legal Attachment</label>
                                <input type="file" name="legal_document" id="legal_document" class="form-control"
                                    value="">
                            </div>
                            <div class="form-group col-lg-4 mb-0 pb-0 mt-1">
                                <label>Legal Description</label>
                                <textarea type="text" name="legal_desc" id="legal_desc" class="form-control" rows="2"
                                    placeholder="Enter Description"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card pt-3">
                    <div class="text-center form-group row mb-3 pb-0">
                        <div class="form-group col-lg-12 mb-0 pb-0">
                            <input type="Submit" name="Submit" onclick="createOrder()" id="ordersubmit"
                                class="btn btn-md btn-primary" maxlength="1000" onclick="alartInfo()">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/parsleyjs/2.9.2/parsley.min.js"></script>
    {{-- Js --}}
    <script type="text/javascript">
        $('#state').on('change', function() {
            var state_id = $("#state").val();
            $("#county").html('');
            $.ajax({
                url: "{{ url('getCounty') }}",
                type: "POST",
                data: {
                    state_id: state_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#county').html('<option value="">Select County</option>');
                    $.each(result.county, function(key, value) {
                        $("#county").append('<option value="' + value
                            .id + '">' + value.county_name + '</option>');
                    });
                }
            });
        });
        $('#property_state').on('change', function() {
            var state_id = $("#property_state").val();
            $("#property_county").html('');
            $.ajax({
                url: "{{ url('getCounty') }}",
                type: "POST",
                data: {
                    state_id: state_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#property_county').html('<option value="">Select County</option>');
                    $.each(result.county, function(key, value) {
                        $("#property_county").append('<option value="' + value
                            .id + '">' + value.county_name + '</option>');
                    });
                }
            });
        });

        $("input[name='ssn']").keyup(function() {
            var ssnValue = $(this).val().replace(/\D/g, "");
            $(this).val(ssnValue.replace(/^(\d{3})(\d{2})(\d{4})$/, "$1-$2-$3"));
        });

        $("input[name='property_zip_code']").blur(function() {
            var zipCodeValue = $(this).val().replace(/\D/g, "");
            var paddedZipCode = ("00000" + zipCodeValue).slice(-5);
            $(this).val(paddedZipCode);
        });

        $("input[name='zip_code']").blur(function() {
            var zipCodeValue = $(this).val().replace(/\D/g, "");
            var paddedZipCode = ("00000" + zipCodeValue).slice(-5);
            $(this).val(paddedZipCode);
        });

        $("input[name='phone']").keyup(function() {
            var phoneValue = $(this).val().replace(/\D/g, "");
            if (phoneValue.length > 10) {
                $(this).val(phoneValue.replace(/^(\d{3})(\d{3})(\d{4})(\d{1,4})$/, "($1) $2-$3 x$4"));
            } else {
                $(this).val(phoneValue.replace(/^(\d{3})(\d{3})(\d{4})$/, "($1) $2-$3"));
            }
        });


        function fetchBorrowerInfo() {
            $('#address').val($('#address1').val());
            $('#property_city').val($('#city').val());
            $('#property_state').val($('#state').val());
            var state_id = $("#state").val();
            $.ajax({
                url: "{{ url('getCounty') }}",
                type: "POST",
                data: {
                    state_id: state_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#property_county').html('<option value="">Select County</option>');
                    $.each(result.county, function(key, value) {
                        $("#property_county").append('<option value="' + value
                            .id + '">' + value.county_name + '</option>');
                    });
                    $('#property_county').val($('#county').val());
                }
            });
            $('#property_zip_code').val($('#zip_code').val());
        }


        function createOrder() {
            if ($("#orderInputForm").parsley()) {
                event.preventDefault();
                if ($("#orderInputForm").parsley().isValid()) {
                    $('#ordersubmit').prop('disabled', true);
                    $.ajax({
                        type: "POST",
                        cache: false,
                        async: false,
                        url: "{{ route('InsertOrder') }}",
                        data: new FormData($("#orderInputForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.msg == "Order Created Successfully") {
                                new PNotify({
                                    text: response.msg,
                                    type: 'success'
                                });
                                setTimeout(function() {
                                    location.reload();
                                }, 1000);
                            } else if (response.msg == "Check for Invalid Inputs") {
                                new PNotify({
                                    text: response.msg,
                                    type: 'warning'
                                });

                                $('#ordersubmit').prop('disabled', false);
                                return false;
                            } else if (response.msg == "Order Creation endup with Error") {
                                new PNotify({
                                    text: response.msg,
                                    type: 'error'
                                });
                                $('#ordersubmit').prop('disabled', false);
                                return false;
                            }
                        },
                        error: function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors, function(field_name, error) {
                                err = err + '<br>' + error;
                            });
                            new PNotify({
                                text: err,
                                type: 'error',
                                delay: 2000
                            });
                            setTimeout(function() {
                                $('#ordersubmit').prop('disabled', false);
                            }, 2000);
                        }
                    });
                }
            }
            return false;
        }


        $(document).ready(function() {
            var form = document.getElementById('orderInputForm');

            // Set autocomplete attribute for input fields
            var inputFields = form.querySelectorAll('input');
            inputFields.forEach(function(input) {
                input.setAttribute('autocomplete', 'off');
            });

            // Set autocomplete attribute for textarea fields
            var textareaFields = form.querySelectorAll('textarea');
            textareaFields.forEach(function(textarea) {
                textarea.setAttribute('autocomplete', 'off');
            });
        });

        $(document).ready(function() {
            $('.content-loaded').show();
            $('.frame').addClass('d-none');
        });

        $(document).ready(function() {
            $("#vendor").hide();
            $("#vendor_hide").hide();
            $("#same_vendor").hide();
            $("#checkbox").change(function() {
                if (this.checked) {
                    $("#first, #second, #third, #second_borrower, #barrower_hide").hide();
                    $("#vendor").show();
                    $("#vendor_hide").show();
                    $("#same_vendor").show();
                    $("#same_borrower").hide();
                    $("#ssn_hide").hide();
                } else {
                    $("#first, #second, #third, #second_borrower, #barrower_hide").show();
                    $("#vendor").hide();
                    $("#vendor_hide").hide();
                    $("#same_borrower").show();
                    $("#same_vendor").hide();
                    $("#ssn_hide").show();
                }
            });
            $("#checkbox").show();

        });
    </script>

@endsection