@extends('layouts.app')
@section('title', 'Middleware | legalVestingForm')
@section('content')
@include('app.certforms.certStyle')
<style>
    .ck-powered-by-balloon{
        display : none !important;
    }
    .ck-editor__editable{
        min-height : 4.5rem !important;
    }

    .ck.ck-toolbar__items {
        font-size: 12px !important;
    }

    /* Optionally, you can adjust the padding or margins for individual toolbar items */
    .ck.ck-toolbar__item {
        padding: 4px 8px !important;
    }

    /* Apply styles for the toolbar button */
    .ck.ck-toolbar>.ck-toolbar__items>:not(.ck-toolbar__line-break) {
        margin: 0px !important;
    }

    .parsley-errors-list li {
        font-size: 10px; /* Change this value to your desired font size */
    }

    .editinfo-container {
        margin: 0 auto; /* Center the container */
        overflow-x: auto;
        overflow-y: auto; /* Enable vertical scrolling if content exceeds container height */
        max-height: 600px; /* Set your desired max height */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: #999999 #f0f0f0; /* Firefox */
    }

    .editinfo-container::-webkit-scrollbar {
        width: 6px; /* Set your desired scrollbar width */
    }

    .editinfo-container::-webkit-scrollbar-thumb {
        background-color: #888888; /* Set your desired thumb color */
        border-radius: 3px;
    }

    .editinfo-container::-webkit-scrollbar-track {
        background-color: #f0f0f0; /* Set your desired track color */
        border-radius: 3px;
    }
</style>
@if (isset($order->output))
    <style>
        h6 {
            font-size: .7rem !important;
        }
    </style>
@endif
{{-- show history modal --}}
@php
    $output = json_decode($order->output);
@endphp
<div id="supdoc">
    <div class="modal fade" id="historymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
        style="display: none;">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" style="min-height:70vh;">
                <div class="modal-header">
                    <h4 class="modal-title" style="font-weight: 500;">Order History</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                </div>
                <div class="modal-body" style="min-height:70vh;overflow:auto">
                    <table class="table table-bordered" style="width:100%">
                        <thead class="text-center">
                            <tr>
                                <th width="5%">Sl.No</th>
                                <th>Status</th>
                                <th>User</th>
                                <th>Comments</th>
                                <th>Date Time</th>
                            </tr>
                        </thead>
                        <tbody id="status_history" class="text-center">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="json_">
    <div class="modal fade" id="json_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
        style="display: none;">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" style="min-height:70vh;">
                <div class="modal-header">
                    <h4 class="modal-title" style="font-weight: 500;">Json Stucture</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                </div>
                <div class='modal-body' style='overflow-y:scroll;'>
                    <style>
                        /* Default style for line break */
                        .line-break {
                            white-space: pre-wrap;
                            word-break: break-word;
                        }

                        /* Style for smaller screens */
                        @media (max-width: 768px) {
                            .line-break {
                                white-space: normal;
                                word-break: normal;
                            }
                        }
                    </style>
                    <code> <pre class='line-break text-primary'>{{ $input_json }}</pre></code>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- <div id="legal_">
    <div class="modal fade" id="legal_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
        style="display: none;">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" style="min-height:70vh;">
                <div class="modal-header">
                    <h4 class="modal-title" style="font-weight: 500;">Legal Description</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                </div>
                <div class="modal-body pdf_body" style="min-height:70vh;overflow:auto">

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


<div class="page-content pr-5 pl-5">
    <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="card" style="border-top: 4px solid blue">
            @if(in_array($order->status, [4, 5, 6, 10, 11, 12]))
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-2">
                        <span style="white-space:nowrap">
                            <div class="font16"> <strong><i  style="font-size: 15px" class="fa fa-paperclip pr-2" onclick="showAttached({{$order->id}}, {{$order->status}})"></i></strong>
                            <strong>Status: <span class="flash">{{$orderData['status_type']}}</span></strong></div>
                        </span>
                    </div>
                    <div class="col-lg-10">
                        <div class="font16" style="display: inline-flex;"><strong> Reason: </strong>&nbsp;<span onclick="showclr({!!  $statusHistory[count($statusHistory) - 1]->id !!})" class="elipclass font16" style="cursor:pointer;color:blue"> <u>{!!  $statusHistory[count($statusHistory) - 1]->comments !!}</u></span></div>
                    </div>
                </div>
            </div>
            @endif
       </div>

                {{-- Show Attachment --}}
                <div class="modal fade" id="showAttach" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel"></h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body text-center">
                                <table id="attachmentsTable" class="table table-bordered nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                            <th style="width:5%" class="text-center">Sl No</th>
                                            <th style="width:10%" class="text-center">Status</th>
                                            <th style="width:30%" class="text-wrap text-center">Comments</th>
                                            <th style="width:30%" class="text-wrap text-center">Client Comments</th>
                                            <th style="width:10%" class="text-wrap text-center">View / Download</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
           {{--Show Attachments end  --}}
        <div class="row content-loaded no-gutters">
            <section class="flex col-lg-12">

                {{-- PDF --}}
                @if(isset($order->output))
                <div class="col" id="docdisplaydiv" style="border:1px solid #ccc;display:block">
                    <div id="pdfs">
                        <table width="100%" id="ordersummary"
                            class="table table-striped table-centered table-bordered mb-0">
                            @foreach ($supportingdocs as $index => $linked_pdf)

                            @if ($index % 3 === 0)
                            @if ($index > 0)
                            </tr>
                            @endif
                            <tr>
                                @endif
                                <td id="removesupportingfile{{$linked_pdf->id}}" width="25%"
                                    style="padding:5px 5px!important;cursor:pointer;border:none;white-space:nowrap; font-size: 0.65rem !important;"
                                    onclick="openSupportingDoc({{$linked_pdf->id}}, 'newWindow');">
                                    <i class="far fa-file-pdf" style="color:red"></i> <span
                                        id="setfilenamebold{{$linked_pdf->id}}">{{$linked_pdf->pdf_file}}</span>
                                </td>
                                @endforeach
                            </tr>
                        </table>
                    </div>
                    <div id="pdf-container" class="pt-2">
                        <iframe src="{{ route('pdf.show', ['folder' => 'LV_Form_Output@@' . $order->id, 'filename' => 'Certificate.pdf']) }}" type="application/pdf" width="100%" height="100%"></iframe>
                    </div>
                </div>
                @endif
                {{--  --}}
                <div class="col" id="detailsdisplaydiv" style="flex-basis: calc(500% - 50px);">
                    @if(isset($order->output))
                    <div class="card">
                        <div class="card-body" style="border-top: 4px solid #eb6d07">
                            <table style="width:75%">
                                <tbody>
                                    <tr>
                                        <td><button style="width:120px" id="sectiontab_1"
                                                class="btn btn-sm btn-primary"
                                                onclick="toggle_basic_info()"><strong> Form </strong></button></td>
                                        <td><button style="width:120px" id="sectiontab_2"
                                                class="btn btn-sm btn-info"
                                                onclick="toggle_docs_info()"><strong>Clarification/Docs</strong></button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif
                    <div class="p-0 pb-0 mt-0 mb-2">
                        <table width="100%">
                            <tbody>
                                <tr>
                                    <td width="35%" align="left"><a onclick="showhistory({{$order->id}});"><i style="font-size:14px; cursor: pointer;"
                                        class="p-1 fa fa-history" title="History"></i></a> <b class="flash">Order Type: {{ $orderData['service_name'] }}
                                        </b>
                                    </td>
                                    <td width="20%" style="font-size:12px;font-weight:600" align="right"><span
                                        id="current_order_status">Status: {{ $orderData['status_type'] }}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card" id="sectiondiv_1">
                        <div class="card-body" style="border-top:4px solid #22b783">
                            <div id="accordion1">

                                <form id="legal_vesting_form" action="" method="POST">
                                    <input type="hidden" name="order_id" value="{{ $order->id }}">
                                    <div class="row" id="editordeinfo">
                                        <div class="col-lg-11">
                                            <table id="order_utilities_infotable" width="100%">
                                                <tbody>
                                                    <tr class="order_table_row">
                                                        <th id="order_name" width="25%"></th>
                                                        <td width="25%">
                                                            <span id="order_name_val"></span>
                                                        </td>
                                                        <th id="order_address" width="25%"></th>
                                                        <td width="25%">
                                                            <span id="order_address_val"></span>
                                                        </td>
                                                    </tr>
                                                    <tr class="order_table_row">
                                                        <th width="25%">City:</th>
                                                        <td width="25%">
                                                            <span id="city"></span>
                                                        </td>
                                                        <th width="25%">State:</th>
                                                        <td width="25%">
                                                            <span id="state"></span>
                                                        </td>
                                                    </tr>
                                                    <tr class="order_table_row">
                                                        <th width="25%">County:</th>
                                                        <td width="25%">
                                                            <span id="county"></span>
                                                        </td>
                                                        <th width="25%">Zip Code:</th>
                                                        <td width="25%">
                                                            <span id="zip_code"></span>
                                                        </td>
                                                    </tr>
                                                    <tr class="order_table_row">
                                                        <th width="25%">Client Order ID:</th>
                                                        <td width="25%">
                                                            <span id="order_no"></span>
                                                        </td>
                                                        <th width="25%">Federal Number:</th>
                                                        <td width="25%">
                                                            <span id="federal_service_id"></span>
                                                        </td>
                                                    </tr>
                                                    <tr class="order_table_row">
                                                        <th width="25%">Phone:</th>
                                                        <td width="25%">
                                                            <span id="phone"></span>
                                                        </td>
                                                        <th width="25%">Property Address:</th>
                                                        <td width="25%">
                                                            <span id="property_address"></span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-lg-1">
                                                <div class="my-4">
                                                    <svg onclick="viewjson()" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; cursor: pointer;" xml:space="preserve" class=""><g><path d="M406.069 105.931H300.138V0z" style="" fill="#bdc3c7" data-original="#bdc3c7"></path><path d="M35.31 406.069H512V194.207H35.31z" style="" fill="#9777a8" data-original="#9777a8" class=""></path><path d="M203.034 379.586c-24.338 0-44.138-19.8-44.138-44.138 0-4.873 3.955-8.828 8.828-8.828s8.828 3.955 8.828 8.828c0 14.601 11.882 26.483 26.483 26.483s26.483-11.882 26.483-26.483-11.882-26.483-26.483-26.483c-24.338 0-44.138-19.8-44.138-44.138 0-24.338 19.8-44.138 44.138-44.138s44.138 19.8 44.138 44.138c0 4.873-3.955 8.828-8.828 8.828-4.873 0-8.828-3.955-8.828-8.828 0-14.601-11.882-26.483-26.483-26.483s-26.483 11.882-26.483 26.483 11.882 26.483 26.483 26.483c24.338 0 44.138 19.8 44.138 44.138s-19.8 44.138-44.138 44.138" style="" fill="#ffffff" data-original="#ffffff" class=""></path><path d="M35.31 406.069V194.207h370.759v-88.276H300.138V0H0v512h406.069V406.069z" style="" fill="#ecf0f1" data-original="#ecf0f1" class=""></path><path d="M97.103 379.586c-19.474 0-35.31-15.837-35.31-35.31 0-4.873 3.955-8.828 8.828-8.828s8.828 3.955 8.828 8.828c0 9.737 7.918 17.655 17.655 17.655s17.655-7.918 17.655-17.655V238.345c0-4.873 3.955-8.828 8.828-8.828s8.828 3.955 8.828 8.828v105.931c-.001 19.474-15.838 35.31-35.312 35.31M308.966 238.345c-9.737 0-17.655 7.918-17.655 17.655v88.276c0 9.737 7.918 17.655 17.655 17.655h8.828c9.737 0 17.655-7.918 17.655-17.655V256c0-9.737-7.918-17.655-17.655-17.655h-8.828zm8.827 141.241h-8.828c-19.474 0-35.31-15.837-35.31-35.31V256c0-19.474 15.837-35.31 35.31-35.31h8.828c19.474 0 35.31 15.837 35.31 35.31v88.276c0 19.474-15.836 35.31-35.31 35.31zM476.69 379.586a8.825 8.825 0 0 1-7.486-4.149l-71.962-115.138v110.46c0 4.873-3.955 8.828-8.828 8.828s-8.828-3.955-8.828-8.828V229.517a8.82 8.82 0 0 1 6.391-8.483c3.787-1.077 7.839.459 9.922 3.805l71.962 115.138v-110.46c0-4.873 3.955-8.828 8.828-8.828 4.873 0 8.828 3.955 8.828 8.828v141.241a8.82 8.82 0 0 1-6.391 8.483 8.854 8.854 0 0 1-2.436.345" style="" fill="#ffffff" data-original="#ffffff" class=""></path></g></svg>
                                                </div>
                                                <div class="my-4" id="legal_hide">
                                                        <svg onclick="openlegalDoc({{$order->id}}, 'newWindow');" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" x="0" y="0" viewBox="0 0 64 64" style="enable-background:new 0 0 512 512; cursor: pointer;" onclick="legal_view()" xml:space="preserve" class=""><g><g fill="#293a4c"><path d="M24 60.5c-.23 0-.459-.053-.67-.158l-16-8A1.5 1.5 0 0 1 6.5 51V21a1.5 1.5 0 0 1 2.17-1.342l16 8A1.5 1.5 0 0 1 25.5 29v30a1.5 1.5 0 0 1-1.5 1.5zM9.5 50.073l13 6.5V29.927l-13-6.5z" fill="#293a4c" opacity="1" data-original="#293a4c" class=""></path><path d="M24 60.5a1.5 1.5 0 0 1-.988-2.629l16-14a1.5 1.5 0 1 1 1.975 2.258l-16 14a1.494 1.494 0 0 1-.986.371z" fill="#293a4c" opacity="1" data-original="#293a4c" class=""></path><path d="M56 54.5c-.23 0-.459-.053-.67-.158l-16-8A1.5 1.5 0 0 1 38.5 45V28.51a1.5 1.5 0 0 1 3 0v15.563l13 6.5V23.927l-5.17-2.585a1.5 1.5 0 0 1 1.34-2.684l6 3A1.5 1.5 0 0 1 57.5 23v30a1.501 1.501 0 0 1-1.5 1.5zM12.649 54.82a1.502 1.502 0 0 1-1.358-2.136c1.625-3.472 2.25-4.347 2.648-4.745.751-.75 1.726-1.075 2.587-1.362.572-.19 1.164-.388 1.413-.638.13-.13.276-.326.456-.555.93-1.192 2.485-3.186 5.264-3.835 1.111-.271 2.34-.279 3.635-.02 2.896.575 5.245 3.7 6.978 9.286a1.5 1.5 0 0 1-2.865.89c-1.324-4.268-3.037-6.904-4.699-7.234-.865-.172-1.655-.173-2.352-.004-1.762.411-2.822 1.77-3.597 2.762-.27.347-.502.635-.698.832-.75.75-1.726 1.075-2.587 1.362-.572.19-1.164.388-1.413.638-.041.046-.523.626-2.052 3.895a1.5 1.5 0 0 1-1.36.864z" fill="#293a4c" opacity="1" data-original="#293a4c" class=""></path><path d="M45.312 49.16a1.5 1.5 0 0 1-1.488-1.701c.213-1.578.504-2.563.946-3.196.647-.933 1.558-1.588 2.363-2.165.66-.476 1.286-.925 1.638-1.428.412-.59.476-1.427.539-2.238.045-.599.09-1.164.273-1.694.67-1.92 2.8-2.997 6.328-3.206a1.494 1.494 0 0 1 1.586 1.41 1.5 1.5 0 0 1-1.408 1.585c-2.452.145-3.512.736-3.673 1.198-.056.159-.088.59-.115.937-.08 1.04-.19 2.466-1.071 3.728-.645.922-1.55 1.57-2.347 2.144-.667.479-1.296.931-1.65 1.442-.008.011-.234.386-.437 1.885a1.5 1.5 0 0 1-1.484 1.3zM7.999 33.64a1.5 1.5 0 0 1-.074-2.998c1.098-.055 3.054-.32 3.828-1.476.45-.673 1.142-2.09 1.883-4.997a1.5 1.5 0 0 1 2.907.741c-.689 2.702-1.44 4.639-2.295 5.922-1.13 1.691-3.265 2.661-6.173 2.806-.026.002-.051.002-.076.002z" fill="#293a4c" opacity="1" data-original="#293a4c" class=""></path></g><circle cx="32" cy="17" r="4.239" fill="#ff5f00" opacity="1" data-original="#ff5f00" class=""></circle><path fill="#ff5f00" d="M32 3.5c-7.444 0-13.5 6.056-13.5 13.5 0 12.9 12.056 19.76 13.5 19.76S45.5 29.9 45.5 17c0-7.444-6.056-13.5-13.5-13.5zm0 20.74c-3.992 0-7.24-3.248-7.24-7.24S28.009 9.76 32 9.76s7.24 3.248 7.24 7.24-3.248 7.24-7.24 7.24z" opacity="1" data-original="#ff5f00" class=""></path></g></svg></a>
                                                </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    @if(isset($order->output))
                    <div class="card">
                        <form id="order_form" action="{{ route('submitLegalVestingData') }}" method="POST" data-parsley-validate>
                            <div class="card-body editinfo-container" style="border-top:4px solid #a83281">
                                <div id="acordian_1" class="orderbody">
                                    <div class="card mb-2">
                                        <div class="card-header custom-accordion" id="info_loan">
                                            <div class="p-1 pointer" data-toggle="collapse" data-target="#loan_info"
                                                aria-expanded="true" aria-controls="loan_info">
                                                <b> Order Information </b>
                                            </div>
                                        </div>
                                        <div id="loan_info" class="collapse show" aria-labelledby="heading_1"
                                            data-parent="#acordian_1" style="">
                                            <div class="card-body">
                                                {{-- <input type="hidden" name="json_data" id="json_data" value=""> --}}
                                                    <div id="orderedit">
                                                        <div class="row mb-2">
                                                            <div class="col-lg-11">
                                                                <h6>Property Address</h6>
                                                                <div class="border" id="orderinfo_property_address"> {!! str_ireplace('&nbsp;', ' ',$output->legal_vesting_data->OrderInformation->property_address) ?? '' !!} </div><div id="word-count"></div>
                                                            </div>
                                                            <div class="row col-lg-12">
                                                                <div class="col-lg-4">
                                                                    <h6>File Order No</h6>
                                                                    <input type="text" class="form-control " name="file_order_no" id="file_order_no" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>Product Name</h6>
                                                                    <input type="text" class="form-control " name="product_name" id="product_name" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>Borrower Names</h6>
                                                                    <input type="text" class="form-control " name="borrower_names" id="borrower_names" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>City</h6>
                                                                    <input type="text" class="form-control " name="orderinfo_city" id="orderinfo_city" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>State</h6>
                                                                    <input type="text" class="form-control " name="orderinfo_state" id="orderinfo_state" maxlength="100" >
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>County</h6>
                                                                    <input type="text" class="form-control " name="orderinfo_county" id="orderinfo_county" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                            </div>

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

                                <div id="general_info_ed" class="orderbody  order_info">
                                    <div class="card mb-2 hide_general">
                                        <div class="collapse show " aria-labelledby="heading_1"
                                            data-parent="#nfip_community_jurisdiction" style="">

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#search_info" aria-expanded="true"
                                                            aria-controls="search_info">
                                                            <b>Search Information </b>
                                                        </div>
                                                    </div>
                                                    <div id="search_info" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-6">
                                                                                <h6>Search Date</h6>
                                                                                <input type="date" class="form-control" name="search_date" id="search_date" >
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <h6>Effective Date</h6>
                                                                                <input type="date" class="form-control" name="effective_date" id="effective_date" >
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <h6>Name Searched</h6>
                                                                                <input type="text" class="form-control" name="names_searched" id="names_searched" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <h6 class="text-wrap">Address/Parcel Searched</h6>
                                                                                <input type="text" class="form-control" name="address_parcel" id="address_parcel"  maxlength="255">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#assessment_info" aria-expanded="true"
                                                            aria-controls="assessment_info">
                                                            <b>Assessment Information </b>
                                                        </div>
                                                    </div>
                                                    <div id="assessment_info" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <h6>Comments</h6>
                                                                        <div class="border" id="comment_editor1"> {!! str_ireplace('&nbsp;', ' ',$output->legal_vesting_data->AssessmentInformation->comments) ?? '' !!} </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#current_owner_vesting" aria-expanded="true"
                                                            aria-controls="current_owner_vesting">
                                                            <b>Current Owner Vesting</b>
                                                        </div>
                                                    </div>
                                                    <div id="current_owner_vesting" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-6">
                                                                                <h6>Current Owner Info</h6>
                                                                                <div class="border"  id="current_ov"> {!! str_ireplace('&nbsp;', ' ',$output->legal_vesting_data->CurrentOwnerVesting->current_ov) ?? '' !!}  </div>
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <h6>Comments</h6>
                                                                                <div class="border"  id="comment_ov"> {!! str_ireplace('&nbsp;', ' ',$output->legal_vesting_data->CurrentOwnerVesting->comments) ?? '' !!}  </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse" data-target="#vesting_code" aria-expanded="true"
                                                            aria-controls="vesting_code">
                                                            <b>Vesting Deed</b>
                                                        </div>
                                                    </div>
                                                    <div id="vesting_code" class="collapse show" aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-6">
                                                                                <h6>Deed Type</h6>
                                                                                <input type="text" class="form-control" name="deed_type" id="deed_type" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <h6>Dated Date</h6>
                                                                                <input type="date" class="form-control" name="dated_date" id="dated_date" >
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <h6>Instrument No</h6>
                                                                                <input type="text" class="form-control" name="instrument_no" id="instrument_no" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <h6>Recorded Date</h6>
                                                                                <input type="date" class="form-control" name="recorded_date" id="recorded_date" >
                                                                            </div>
                                                                            <div class="col-lg-4">
                                                                                <h6>Grantor</h6>
                                                                                <input type="text" class="form-control" name="grantor" id="grantor" maxlength="255" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-4">
                                                                                <h6>Grantee</h6>
                                                                                <input type="text" class="form-control" name="grantee" id="grantee" maxlength="255" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-4">
                                                                                <h6>Book Page</h6>
                                                                                <input type="text" class="form-control" name="book_page" id="book_page" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-\\ /]+" data-parsley-error-message="letters, spaces and [ . , # & ' - /] (Max 100 Chars)">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-12">
                                                                        <div class="row">
                                                                            <div class="col-lg-12">
                                                                                <h6>Comments</h6>
                                                                                <div class="border"  id="comment_vd"> {!! str_ireplace('&nbsp;', ' ',$output->legal_vesting_data->VestingDeed->comments) ?? '' !!}  </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#for_preamble" aria-expanded="true"
                                                            aria-controls="for_preamble">
                                                            <b>For Preamble</b>
                                                        </div>
                                                    </div>
                                                    <div id="for_preamble" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-6">
                                                                                <h6>City/Township/Parish</h6>
                                                                                <input type="text" class="form-control" name="city_township_parish" id="city_township_parish" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-/]+" data-parsley-error-message="letters, spaces and [ . , # & ' - /] (Max 100 Chars)">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="notes" class="orderbody">
                                                <div class="card mb-2 mx-2 mt-2">
                                                    <div class="card-header custom-accordion" id="utilities_other_18">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#additonal_notes" aria-expanded="true"
                                                            aria-controls="additonal_notes">
                                                            <b>Additional Notes </b> <img src="" alt="" class="float-right"
                                                                height="15px" id="additionalnotes">
                                                        </div>
                                                    </div>
                                                    <div id="additonal_notes" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#additonal_notes">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row other_18_utilities" id="other_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-12">
                                                                                <div class="border" id="an_comments_editor"> {!! str_ireplace('&nbsp;', ' ',$output->legal_vesting_data->AdditionalNotes) ?? '' !!} </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            <div id="other_18_info" class="orderbody">
                                                <div class="card mb-2 mx-2 mt-2">
                                                    <div class="card-header custom-accordion" id="utilities_other_18">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#legal_description" aria-expanded="true"
                                                            aria-controls="legal_description">
                                                            <b>Legal Description </b> <img src="" alt="" class="float-right"
                                                                height="15px" id="legal_description">
                                                        </div>
                                                    </div>
                                                    <div id="legal_description" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#other_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row other_18_utilities" id="other_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-12">
                                                                                <div class="border"  id="legal_desc_editor"> {!! str_ireplace('&nbsp;', ' ',$output->legal_vesting_data->LegalDescription) ?? '' !!}  </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                {{--ETA info --}}
                                <div id="etainfoaccordion">
                                    <div class="card mb-0" id="eta_info">
                                        <div class="card-header maineta custom-accordion" id="headingetainfo">
                                            <div class="p-1 pointer" data-toggle="collapse" data-target="#collapseeta"
                                                aria-expanded="true" aria-controls="headingetainfo">
                                                <b> Other Info </b>
                                            </div>
                                        </div>
                                        <div id="collapseeta" class="collapse show" aria-labelledby="headingetainfo" data-parent="#etainfoaccordion">
                                            <div class="card-body" id="eta_card">
                                                <form id="other_status_form" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="orderid" value="{{$order->id}}">
                                                    <input type="hidden" name="uid" value="{{Session::get('uid')}}">
                                                    <div class="row">
                                                        <div class="font16 ml-auto"> <strong><i  style="font-size: 15px" class="fa fa-paperclip pr-2" onclick="showAttached({{$order->id}}, {{$order->status}})"></i></strong></div>
                                                    </div>
                                                    <div class="row">

                                                        <div class="col-lg-2  mt-2">
                                                            <label> Status:</label>
                                                        </div>
                                                        <div class="col-lg-4 p-0">
                                                            <select  name="other_status" id="other_status" class="form-control" required onchange="get_etafields(this.id);">
                                                                <option disabled selected value="">Select</option>
                                                                <option value="4"> Follow Up </option>
                                                                <option value="5"> Clarification Required </option>
                                                                <option value="10"> Cancelled </option>
                                                                <option value="11"> Pending </option>
                                                                <option value="12"> On Hold </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-2">
                                                        <div class="col-lg-2  mt-2">
                                                            <label>Comments:</label>
                                                        </div>
                                                        <div class="col-lg-8 mb-0 p-0">
                                                            <textarea required id="other_status_comments" class="form-control" rows="2" name="other_status_comments" placeholder="" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-2" id="etadiv">
                                                    </div>
                                                    <div class="row">
                                                        <button class="btn btn-xs btn-primary p-1 mt-3 ml-3" type="submit" name="other_status_submit" id="other_status_submit" value="submit" style="cursor: pointer;">Submit</button>
                                                    </div>
                                                    <div class="col-lg-12 m-0 p-0 mt-3">
                                                        @foreach ($statusHistory as $history)
                                                        <table class="other_status" width="100%" class="p-0 m-0" >
                                                            <tr>
                                                                <td width="15%">
                                                                    <b style="color:#f08411">User:</b>{!! ucfirst($history->first_name) !!} {!! ucfirst($history->last_name) !!}</td>
                                                                <td width="15%" align="left">
                                                                    <b style="color:#f08411">Status:</b> {{$history->status}} </td>
                                                                @if($history->status_id == 4 || $history->status_id == 12)
                                                                <td width="20%" align="right">
                                                                    <b style="color:#f08411">Follow Up:</b> {!! isset($history->followup_date) ? date("m/d/Y", strtotime($history->followup_date)) : "" !!} </td>
                                                                <td width="20%" align="right">
                                                                    <b style="color:#f08411">ETA:</b> {!! isset($history->eta_date) ? date("m/d/Y", strtotime($history->eta_date)) : "" !!} </td>
                                                                @endif
                                                                <td width="30%" align="right">
                                                                    <b style="color:#f08411">Date:</b> {!! isset($history->updated_at) ? date("m/d/Y h:i:s A", strtotime($history->updated_at)) : "" !!} </td>
                                                            </tr>
                                                            <tr class="status_comments">
                                                                <td class="comm" id="comm_{{$history->id}}" colspan="5">{!! $history->comments !!}</td>
                                                            </tr>
                                                        </table>
                                                        <hr class="p-1 m-0">
                                                        @endforeach
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="pt-1 m-0" style="border-top:3px solid #3e3952">
                                </div>

                                {{-- Supporting Docs --}}
                                <div id="supportingdocaccordion">
                                    <div class="card">
                                        <div class="card-header mainsupdocs" id="headingsupportingdocinfo">
                                            <div class="p-1 pointer" data-toggle="collapse"
                                                data-target="#collapsesupportingdoc" aria-expanded="true"
                                                aria-controls="headingsupportingdocinfo">
                                                <b> Supporting Docs</b>
                                            </div>
                                        </div>
                                        <div id="collapsesupportingdoc" class="collapse show"
                                            aria-labelledby="headingsupportingdocinfo"
                                            data-parent="#supportingdocaccordion">
                                            <div class="card-body" id="supportingdoc_card">
                                                <div class="support_docs">
                                                    <em style="cursor:pointer" class="mdi mdi-drag-variant text-white"></em>
                                                    <input onchange="selectallullis()" type="checkbox" name="selectallulli" id="selectallulli" value="" />
                                                    <u>Select All PDF's</u>
                                                </div>
                                                <div class="row mb-0 pb-0 mt-2" id="dispsup">
                                                    <ul class="sortable m-1 p-1" id="sortabletable">
                                                        @foreach ($supportingdocs as $linked_pdf)
                                                        @if(!str_starts_with($linked_pdf->pdf_file, "Certificate"))
                                                        <li id="{{$linked_pdf->id}}">
                                                            <i style="cursor:pointer" class="mdi mdi-drag-variant"></i>
                                                            <input type="checkbox"
                                                                onchange="display_merge_link({{$linked_pdf->id}})"
                                                                value="{{$linked_pdf->id}}"
                                                                id="selectpdf{{$linked_pdf->id}}" name="selectpdf[]" />
                                                            <a style="cursor:pointer;color:blue"
                                                                onclick="openSupportingDoc({{$linked_pdf->id}}, 'newWindow')">
                                                                <u><i
                                                                        class="dripicons-paperclip">{{$linked_pdf->pdf_file}}</i></u>
                                                            </a>
                                                            &nbsp;
                                                            @if(str_starts_with($linked_pdf->pdf_file, "Merged_Certificate"))
                                                            <a style="cursor:pointer;" class="text-danger"
                                                                onclick="delete_supporting_doc({{$linked_pdf->id}}, 1)">
                                                                <u><i class="dripicons-trash"></i></u>
                                                            </a>
                                                            @else
                                                            <a style="cursor:pointer;" class="text-danger"
                                                                onclick="delete_supporting_doc({{$linked_pdf->id}}, 0)">
                                                                <u><i class="dripicons-trash"></i></u>
                                                            </a>
                                                            @endif
                                                        </li>
                                                        @endif
                                                        @endforeach
                                                    </ul>
                                                </div>
                                                <button style="display:none;cursor:pointer"
                                                    class="btn btn-xs p-0 m-0 btn-primary pl-1 pr-1 mt-2 display_merge_pdf"
                                                    onclick="generate_singlepdf()" type="button" id="mergepdfs"
                                                    name="mergepdfs"> Merge Pdf's
                                                    With Cert <em class="mdi mdi-source-merge"></em>
                                                </button>
                                                @foreach ($supportingdocs as $linked_pdf)
                                                @if (str_starts_with($linked_pdf->pdf_file, "Merged"))
                                                <button class="btn btn-xs p-0 m-0 btn-warning pl-1 pr-1 mt-2" onclick="openSupportingDoc({{ $linked_pdf->id }}, 'download', '{{ $order->id . "_merged_docs" }}')"
                                                    type="button" id="mergepdfsdownload" name="mergepdfsdownload">
                                                Download <em class="mdi mdi-cloud-download"></em>
                                            </button>

                                                @endif
                                                @endforeach
                                                <span id="processingpdf"></span>
                                                <form id="supportingdoc_infoform" class="supportingdoc_upload"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="row mt-1">
                                                        <div class="col-lg-3 mb-0 pb-0">
                                                            <label> Supporting Docs </label>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-0 pb-0 mt-1 addsupdocs" id="supportingdocsdiv_1">
                                                        <div class="col-lg-12 mb-0 pb-0">
                                                            <input required type="file" id="refdocs_1" name="refdocs[]"
                                                                multiple data-height="75" height="100px"
                                                                class="form-controlfile suppdoc dropify"
                                                                accept="application/pdf, .jpg, .jpeg, .png">
                                                        </div>
                                                    </div>
                                                    <div class="mt-1" id="addsupportingvalues"></div>
                                                    <div class="row mt-1">
                                                        <div class="col-lg-12">
                                                            <button class="btn btn-xs btn-primary p-1" type="submit"
                                                                id="supdocssubmit" name="supdocssubmit"
                                                                value="1">Submit</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row text-center mt-2">
                                        <div class="col-lg-4"></div>
                                        <div class="col-lg-4">
                                            <select style="height:27px !important;" align="center" required
                                                name="orderstatus" id="order_status" class="form-control">
                                                    @foreach ($status_change as $status_select)
                                                        @if ($status_select->id == $order->status)
                                                        <option selected value="{{ $status_select->id }}">
                                                            {{ $status_select->status }}</option>
                                                        @else
                                                        <option value="{{ $status_select->id }}">
                                                            {{ $status_select->status }}</option>
                                                        @endif
                                                    @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4"></div>
                                    </div>
                                    <div class="row text-center">
                                        <div class="col-lg-12 mb-2">
                                            <input type="button" name="submit" class="btn btn-gradient-danger mt-3 mr-1"
                                                id="infosubmit" value="Submit"
                                                onclick="ordersubmit({{$order->id}});" />
                                        </div>
                                    </div>
                                </div>
                                {{-- End supporting Docs --}}
                                <div class="row justify-content-center mb-3" id="cert_submit">
                                    <button class="btn btn-primary" id="order_submit" type="submit">Update Certificate</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    @else
                    <div class="card">
                        <form id="order_form" action="{{ route('submitLegalVestingData') }}" method="POST" data-parsley-validate>
                            <div class="card-body" style="border-top:4px solid #a83281">
                                <div id="acordian_1" class="orderbody">
                                    <div class="card mb-2">
                                        <div class="card-header custom-accordion" id="info_loan">
                                            <div class="p-1 pointer" data-toggle="collapse" data-target="#order_info"
                                                aria-expanded="true" aria-controls="order_info">
                                                <b> Order Information </b>
                                            </div>
                                        </div>
                                        <div id="order_info" class="collapse show" aria-labelledby="heading_1"
                                            data-parent="#acordian_1" style="">
                                            <div class="card-body">
                                                {{-- <input type="hidden" name="json_data" id="json_data" value=""> --}}
                                                    <div id="orderedit">
                                                        <div class="row mb-2">
                                                            <div class="col-lg-4">
                                                                <h6>Property Address</h6>
                                                                <div class="border" id="orderinfo_property_address">  </div>

                                                            </div>
                                                            <div class="row col-lg-8">
                                                                <div class="col-lg-4">
                                                                    <h6>File Order No</h6>
                                                                    <input type="text" class="form-control " name="file_order_no" id="file_order_no" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>Product Name</h6>
                                                                    <input type="text" class="form-control " name="product_name" id="product_name" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>Borrower Names</h6>
                                                                    <input type="text" class="form-control " name="borrower_names" id="borrower_names" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>City</h6>
                                                                    <input type="text" class="form-control " name="orderinfo_city" id="orderinfo_city" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>State</h6>
                                                                    <input type="text" class="form-control " name="orderinfo_state" id="orderinfo_state" maxlength="100" >
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <h6>County</h6>
                                                                    <input type="text" class="form-control " name="orderinfo_county" id="orderinfo_county" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                </div>
                                                            </div>

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

                                <div id="nfip_community_jurisdiction" class="orderbody order_info">
                                    <div class="card mb-2">
                                        <div class="collapse show" aria-labelledby="heading_1"
                                            data-parent="#nfip_community_jurisdiction" style="">

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#search_info" aria-expanded="true"
                                                            aria-controls="search_info">
                                                            <b>Search Information </b>
                                                        </div>
                                                    </div>
                                                    <div id="search_info" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-3">
                                                                                <h6>Search Date</h6>
                                                                                <input type="date" class="form-control" name="search_date" id="search_date" >
                                                                            </div>
                                                                            <div class="col-lg-3">
                                                                                <h6>Effective Date</h6>
                                                                                <input type="date" class="form-control" name="effective_date" id="effective_date" >
                                                                            </div>
                                                                            <div class="col-lg-3">
                                                                                <h6>Name Searched</h6>
                                                                                <input type="text" class="form-control" name="names_searched" id="names_searched" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-3">
                                                                                <h6>Address/Parcel Searched</h6>
                                                                                <input type="text" class="form-control" name="address_parcel" id="address_parcel" maxlength="255" >
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#assessment_info" aria-expanded="true"
                                                            aria-controls="assessment_info">
                                                            <b>Assessment Information </b>
                                                        </div>
                                                    </div>
                                                    <div id="assessment_info" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <h6>Comments</h6>
                                                                        <div class="border" id="comment_editor1">  </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#current_owner_vesting" aria-expanded="true"
                                                            aria-controls="current_owner_vesting">
                                                            <b>Current Owner Vesting</b>
                                                        </div>
                                                    </div>
                                                    <div id="current_owner_vesting" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-6">
                                                                                <h6>Current Owner Info</h6>
                                                                                <div class="border" id="current_ov">  </div>

                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <h6>Comments</h6>
                                                                                <div class="border" id="comment_ov">  </div>

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#vesting_deed" aria-expanded="true"
                                                            aria-controls="vesting_deed">
                                                            <b>Vesting Deed</b>
                                                        </div>
                                                    </div>
                                                    <div id="vesting_deed" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-8">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-3">
                                                                                <h6>Deed Type</h6>
                                                                                <input type="text" class="form-control" name="deed_type" id="deed_type" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-3">
                                                                                <h6>Dated Date</h6>
                                                                                <input type="date" class="form-control" name="dated_date" id="dated_date" >
                                                                            </div>
                                                                            <div class="col-lg-3">
                                                                                <h6>Instrument No</h6>
                                                                                <input type="text" class="form-control" name="instrument_no" id="instrument_no" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z0-9\s\.,#&'-]+" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-3">
                                                                                <h6>Recorded Date</h6>
                                                                                <input type="date" class="form-control" name="recorded_date" id="recorded_date" >
                                                                            </div>
                                                                            <div class="col-lg-4">
                                                                                <h6>Grantor</h6>
                                                                                <input type="text" class="form-control" name="grantor" id="grantor" maxlength="255" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-4">
                                                                                <h6>Grantee</h6>
                                                                                <input type="text" class="form-control" name="grantee" id="grantee"  maxlength="255" data-parsley-trigger="focusout keyup" data-parsley-pattern="[A-Za-z\s\.,#&'-]+" data-parsley-error-message="letters, spaces and [ . , # & ' - ] (Max 100 Chars)">
                                                                            </div>
                                                                            <div class="col-lg-4">
                                                                                <h6>Book Page</h6>
                                                                                <input type="text" class="form-control" name="book_page" id="book_page" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="^[A-Za-z0-9\s\.,#&'-/]+$" data-parsley-error-message="letters, numbers, spaces and [ . , # & ' - /] (Max 100 Chars)">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="row">
                                                                            <div class="col-lg-12">
                                                                                <h6>Comments</h6>
                                                                                <div class="border" id="comment_vd">  </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="water_18_info" class="orderbody">
                                                <div class="card mb-0 mx-2 mt-2">
                                                    <div class="card-header custom-accordion">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#for_preamble" aria-expanded="true"
                                                            aria-controls="for_preamble">
                                                            <b>For Preamble</b>
                                                        </div>
                                                    </div>
                                                    <div id="for_preamble" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#water_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row water_18_utilities" id="water_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-3">
                                                                                <h6>City/Township/Parish</h6>
                                                                                <input type="text" class="form-control" name="city_township_parish" id="city_township_parish" maxlength="100" data-parsley-trigger="focusout keyup" data-parsley-pattern="^[A-Za-z\s\.,#&'-/]+$" data-parsley-error-message="letters, spaces and [ . , # & ' - /] (Max 100 Chars)">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr class="pt-1 m-0 mx-2" style="border-top:3px solid #3e3952">
                                            </div>

                                            <div id="other_18_info" class="orderbody">
                                                <div class="card mb-2 mx-2 mt-2">
                                                    <div class="card-header custom-accordion" id="utilities_other_18">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#additional_note" aria-expanded="true"
                                                            aria-controls="additional_note">
                                                            <b>Additional Notes </b> <img src="" alt="" class="float-right"
                                                                height="15px" id="additionalnotes">
                                                        </div>
                                                    </div>
                                                    <div id="additional_note" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#other_18_info">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row other_18_utilities" id="other_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-12">
                                                                                <div class="border" id="an_comments_editor">  </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="Description" class="orderbody">
                                                <div class="card mb-2 mx-2 mt-2">
                                                    <div class="card-header custom-accordion" id="utilities_other_18">
                                                        <div class="p-1 pointer" data-toggle="collapse"
                                                            data-target="#legal_description" aria-expanded="true"
                                                            aria-controls="legal_description">
                                                            <b>Legal Description </b> <img src="" alt="" class="float-right"
                                                                height="15px" id="legal_description">
                                                        </div>
                                                    </div>
                                                    <div id="legal_description" class="collapse show"
                                                        aria-labelledby="heading_1" data-parent="#Description">
                                                        <div class="card-body">
                                                            <div id="Utilitiesedit2">
                                                                <div class="row other_18_utilities" id="other_18_utilities">
                                                                    <div class="col-lg-12">
                                                                        <div class="row mb-2">
                                                                            <div class="col-lg-12">
                                                                                <div class="border" id="legal_desc_editor"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center mb-3">
                                <button class="btn btn-primary" id="order_submit" type="submit">Generate Certificate</button>
                            </div>
                        </form>
                    </div>
                    @endif
            </section>
        </div>
    </div>
</div>

<script src="{{asset('assets/js/jquery-3.6.0.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script src="{{asset('assets/js/jquery-ui.js')}}"></script>
<script src="{{asset('assets/js/split.min.js')}}"></script>
<script src="{{asset('assets/js/split.min.js')}}"></script>
<script src="{{asset('assets/vendor/ckeditor5_baloon/build/ckeditor.js')}}"></script>
<script>
    var legalDocument = @json($order->input['PropertyData']['legal_document'] ?? null);
        // console.log(legalDocument);
</script>

<script>
// Keep track of CKEditor instances
const editorInstances = {};

// Function to create CKEditor instance
function createEditorInstance(editorId, maxLength) {
    const container = document.querySelector(editorId);
    let charCountElement;

    return BalloonEditor
        .create(container, {
            wordCount: {
                onUpdate: stats => {
                    // Check if the editor is in focus before updating count
                    if (charCountElement && container.contains(document.activeElement)) {
                        const currentLength = stats.characters;
                        charCountElement.textContent = `Characters: ${currentLength} / ${maxLength}`;
                    }
                }
            },
            data: {
                onInput: (event, data) => {
                    // Enforce character limit
                    const plainTextContent = data.editor.getData().replace(/<[^>]*>/g, '');
                    const currentLength = plainTextContent.length;

                    if (currentLength > maxLength) {
                        // Truncate the content to the maximum length
                        const truncatedContent = plainTextContent.substring(0, maxLength);
                        data.editor.setData(truncatedContent);

                        // Update char-count element
                        updateCharCountElement(editorId, data.editor, maxLength);
                    }
                }
            }
        })
        .then(editor => {
            editorInstances[editorId] = editor;

            // Add focus event listener
            editor.ui.view.editable.element.addEventListener('focus', () => {
                // Create char-count element on focus
                charCountElement = createCharCountElement(editorId, maxLength);
            });

            // Add blur event listener to remove char-count element on blur and trim data
            editor.ui.view.editable.element.addEventListener('blur', () => {
                removeCharCountElement(editorId, maxLength);
            });
        })
        .catch(error => {
            console.error(error);
        });
}

// Function to remove char-count element on blur and trim data
function removeCharCountElement(editorId, maxLength) {
    const charCountElementId = `${editorId}-char-count`;
    const charCountElement = document.getElementById(charCountElementId);

    // Remove char-count element on blur
    if (charCountElement && charCountElement.parentNode) {
        const editor = editorInstances[editorId];
        if (editor) {
            const currentContent = editor.getData();
            // Strip HTML tags and get plain text content
            const plainTextContent = stripHtmlTags(currentContent);
            // Truncate the content to the maximum length
            const trimmedContent = plainTextContent.substring(0, maxLength);

            // Update char-count element without modifying the editor's content
            updateCharCountElement(editorId, trimmedContent, maxLength);
        }

        // Remove char-count element after updating data
        charCountElement.parentNode.removeChild(charCountElement);
    }
}

function updateCharCountElement(editorId, content, maxLength) {
    const charCountElementId = `${editorId}-char-count`;
    const charCountElement = document.getElementById(charCountElementId);

    if (charCountElement) {
        const currentLength = content.length;
        charCountElement.textContent = `Characters: ${currentLength} / ${maxLength}`;
    }
}

function createCharCountElement(editorId, maxLength) {
    const editorContainer = document.querySelector(editorId);
    const charCountElementId = `${editorId}-char-count`;

    // Check if char-count element already exists
    let charCountElement = document.getElementById(charCountElementId);

    if (!charCountElement) {
        // Get the initial character count from the editor content (excluding HTML tags)
        const initialContent = editorInstances[editorId]?.getData();
        const initialLength = initialContent ? stripHtmlTags(initialContent).length : 0;

        charCountElement = document.createElement('div');
        charCountElement.id = charCountElementId;
        charCountElement.textContent = `Chars: ${initialLength} / ${maxLength}`;
        charCountElement.style.opacity = '0.5'; // Set opacity to 0.5
        charCountElement.style.color = 'grey'; // Set color to grey
        charCountElement.style.float = 'right'; // Align to the right
        editorContainer.parentNode.insertBefore(charCountElement, editorContainer.nextSibling);
    }

    return charCountElement;
}

// Helper function to strip HTML tags from a string
function stripHtmlTags(html) {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return doc.body.textContent || "";
}


    // Function to get CKEditor data
    function getEditorData(editorId) {
        const editor = editorInstances[editorId];
        return editor ? editor.getData() : null;
    }

    // Function to initialize CKEditor instances
    function initializeEditors() {
        // Create promises for CKEditor instances with maximum lengths
        const commentEditorPromise = createEditorInstance('#comment_editor1', 500);
        const anCommentsEditorPromise = createEditorInstance('#an_comments_editor', 1000);
        const legalDescEditorPromise = createEditorInstance('#legal_desc_editor', 3000);
        const comment_vdPromise = createEditorInstance('#comment_vd', 300);
        const current_ovPromise = createEditorInstance('#current_ov', 300);
        const comment_ovPromise = createEditorInstance('#comment_ov', 300);
        const orderinfo_property_addressPromise = createEditorInstance('#orderinfo_property_address', 300);

        // Wait for all promises to resolve
        return Promise.all([commentEditorPromise, anCommentsEditorPromise, legalDescEditorPromise, comment_vdPromise, current_ovPromise, comment_ovPromise, orderinfo_property_addressPromise]);
    }

    // Submit form function
    function submitForm() {
        $('.content-loaded').hide();
        $('.frame').removeClass('d-none');
        // Get data from CKEditor instances
        const commentEditorData = getEditorData('#comment_editor1');
        const anCommentsEditorData = getEditorData('#an_comments_editor');
        const legalDescEditorData = getEditorData('#legal_desc_editor');
        const comment_vdData = getEditorData('#comment_vd');
        const current_ovData = getEditorData('#current_ov');
        const comment_ovData = getEditorData('#comment_ov');
        const orderinfo_property_addressData = getEditorData('#orderinfo_property_address');

        // Submit the form
        var formData = $("#order_form").serialize();
        var jsonData = {};
        // Serialize form data into JSON
        formData.split("&").forEach(function (pair) {
            pair = pair.split("=");
            jsonData[pair[0]] = decodeURIComponent(pair[1] || "");
        });

        jsonData["assessment_info_data"] = commentEditorData;
        jsonData["additional_notes_data"] = anCommentsEditorData;
        jsonData["legal_desc_data"] = legalDescEditorData;
        jsonData["comment_vd"] = comment_vdData;
        jsonData["current_ov"] = current_ovData;
        jsonData["comment_ov"] = comment_ovData;
        jsonData["orderinfo_property_address"] = orderinfo_property_addressData;

        // AJAX request
        $.ajax({
            type: "POST",
            url: "{{ route('submitLegalVestingData') }}",
            data: {
                _token: '{{csrf_token()}}',
                json_data: JSON.stringify(jsonData),
                order_id : {{ $order->id }}
            },
            success: function (response) {
                location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }

    // Initialize CKEditor instances when the page is loaded
    document.addEventListener('DOMContentLoaded', function () {
        initializeEditors()
            .then(() => {
                console.log('CKEditor instances initialized');
            })
            .catch(error => {
                console.error(error);
            });
    });

    // Attach submit event listener to the form
    document.getElementById('order_form').addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent the default form submission
        // Use existing CKEditor instances and then submit the form
        submitForm();
    });

    @if(isset($order->output))
    $(document).ready(function () {
        const GUTTER_SIZE = 50;
        const gutterStyle = dimension => ({
            'flex-basis': `${GUTTER_SIZE}px`,
        });

        const elementStyle = (dimension, size) => ({
            'flex-basis': `calc(${size}% - ${GUTTER_SIZE}px)`,
        })

        Split(['#docdisplaydiv', '#detailsdisplaydiv'], {
            sizes: [500, 500],
            minSize: 100,
            elementStyle,
            gutterStyle
        });
    });
    @endif



    $(document).ready(function () {
        $('#map_change_yes').click(function () {
            $('#date').prop('readonly', false);
            $('#case_no').prop('readonly', false);
        });

        $('#map_change_no').click(function () {
            $('#date').val('');
            $('#case_no').val('');
            $('#date').prop('readonly', true);
            $('#case_no').prop('readonly', true);
        });
    });

    $(document).ready(function () {
        var orderData = @json($order->input);

        try {
            orderData = JSON.parse(orderData);
        } catch (e) {
            console.error('Error parsing JSON:', e);
            return;
        }

        if (orderData && orderData.BorrowerInfo && orderData.BorrowerInfo.FirstBorrowerInfo) {
            var borrowerInfo = orderData.BorrowerInfo.FirstBorrowerInfo;

            if (borrowerInfo.business_name != null && borrowerInfo.business_name != "") {
                $('#order_name').html("Business Name:");
                $('#order_address').html("Business Address:");
                $('#order_name_val').text(borrowerInfo.business_name);
                var borrowerAddress = (borrowerInfo.address1 || '') + ' ' + (borrowerInfo.address2 || '');
                $('#order_address_val').text(borrowerAddress.trim());

            } else {
                $('#order_name').html("Borrower Name:");
                $('#order_address').html("Borrower Address:");
                var borrowerName = (borrowerInfo.first_name || '') + ' ' + (borrowerInfo.middle_name || '') + ' ' + (borrowerInfo.last_name || '');
                $('#order_name_val').text(borrowerName.trim());
                var borrowerAddress = (borrowerInfo.address1 || '') + ' ' + (borrowerInfo.address2 || '');
                $('#order_address_val').text(borrowerAddress.trim());
            }

            $('#city').text(borrowerInfo.city || '');
            $('#state').text(borrowerInfo.state || '');
            $('#county').text(borrowerInfo.county || '');
            $('#zip_code').text(borrowerInfo.zip_code || '');
            $('#order_no').text(orderData.OrderInfo.client_order_id || '');
            $('#federal_service_id').text(orderData.OrderInfo.federal_service_id || '');
            $('#phone').text(borrowerInfo.phone || '');
            $('#property_address').text(orderData.PropertyData.address || '');

        }

        @if($order->output)
        var orderOutput = @json($order->output);
        try {
            orderOutput = JSON.parse(orderOutput);
            orderOutput = orderOutput.legal_vesting_data;
        } catch (e) {
            console.error('Error parsing JSON:', e);
            return;
        }

        if (orderOutput && orderOutput.OrderInformation) {
            if (orderOutput.OrderInformation) {
                var OrderInformation = orderOutput.OrderInformation;
                $('#file_order_no').val(OrderInformation.file_order_no || '');
                $('#product_name').val(OrderInformation.product_name || '');
                $('#borrower_names').val(OrderInformation.borrower_names || '');
                $('#orderinfo_property_address').text(OrderInformation.property_address || '');
                $('#orderinfo_city').val(OrderInformation.city || '');
                $('#orderinfo_state').val(OrderInformation.state || '');
                $('#orderinfo_county').val(OrderInformation.county || '');
                // $('#city_state_county').val(OrderInformation.city_state_county || '');
            }

            if (orderOutput.SearchInformation) {
                var SearchInformation = orderOutput.SearchInformation;
                $('#search_date').val(SearchInformation.search_date || '');
                $('#effective_date').val(SearchInformation.effective_date || '');
                $('#names_searched').val(SearchInformation.names_searched || '');
                $('#address_parcel').val(SearchInformation.address_parcel_searched || '');
            }

            if (orderOutput.CurrentOwnerVesting) {
                var CurrentOwnerVesting = orderOutput.CurrentOwnerVesting;
                $('#current_ov').text(CurrentOwnerVesting.current_ov || '');
                $('#comment_ov').text(CurrentOwnerVesting.comments || '');

            }

            if (orderOutput.VestingDeed) {
                var VestingDeed = orderOutput.VestingDeed;
                $('#deed_type').val(VestingDeed.deed_type || '');
                $('#dated_date').val(VestingDeed.dated_date || '');
                $('#book_page').val(VestingDeed.book_page || '');
                $('#instrument_no').val(VestingDeed.instrument_no || '');
                $('#comment_vd').text(VestingDeed.comments || '');
                $('#grantor').val(VestingDeed.grantor || '');
                $('#grantee').val(VestingDeed.grantee || '');
                $('#recorded_date').val(VestingDeed.recorded_date || '');
            }

            if (orderOutput.ForPreamble) {
                var VestingDeed = orderOutput.ForPreamble;
                $('#city_township_parish').val(VestingDeed.city_township_parish || '');

            }



        }
        @endif
    });

    function openSupportingDoc(docId, option, customFilename = '') {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "{{ route('open_supporting_doc') }}", true);
    xhr.responseType = 'blob';

    xhr.onload = function () {
        if (xhr.status === 200) {
            var blob = xhr.response;

            var url = URL.createObjectURL(blob);

            if (option === 'newWindow') {
                var windowFeatures = 'height=' + screen.height + ',width=550,scrollbars=yes,status=yes';
                window.open(url, '_blank', windowFeatures);
            } else if (option === 'newTab') {
                window.open(url, '_blank');
            } else if (option === 'download') {
                var a = document.createElement('a');
                a.href = url;
                a.target = '_blank';
                a.download = customFilename !== '' ? customFilename : 'custom_filename.pdf';
                a.click();
            }

            // Clean up the object URL after opening or downloading
            URL.revokeObjectURL(url);
        }
    };

    var formData = new FormData();
    formData.append('docid', docId);
    formData.append('orderid', "{{ $order->id }}");
    formData.append('_token', "{{ csrf_token() }}");
    formData.append('baseDirPath', "LV_Form_Output");

        xhr.send(formData);
    }


    var orderData = {!! $input_json !!};
    var legalDocument = orderData.PropertyData ? orderData.PropertyData.legal_document : null;
    var legalHideElement = document.getElementById('legal_hide');

    if (legalDocument !== null && legalDocument !== "") {
        legalHideElement.style.display = 'block';
    } else {
        legalHideElement.style.display = 'none';
    }

    function openlegalDoc(orderId, option, customFilename = '') {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "{{ route('open_legal_doc') }}", true);
    xhr.responseType = 'blob';

    xhr.onload = function () {
        if (xhr.status === 200) {
            var blob = xhr.response;

            var url = URL.createObjectURL(blob);

            if (option === 'newWindow') {
                var windowFeatures = 'height=' + screen.height + ',width=550,scrollbars=yes,status=yes';
                window.open(url, '_blank', windowFeatures);
            } else if (option === 'newTab') {
                window.open(url, '_blank');
            } else if (option === 'download') {
                var a = document.createElement('a');
                a.href = url;
                a.target = '_blank';
                a.download = customFilename !== '' ? customFilename : 'custom_filename.pdf';
                a.click();
            }

            // Clean up the object URL after opening or downloading
            URL.revokeObjectURL(url);
        }
    };


    var orderData = {!! $input_json !!};

    var formData = new FormData();
    formData.append('orderid', "{{ $order->id }}");
        if(orderData.PropertyData != undefined && orderData.PropertyData != "") {
            formData.append('file',  orderData.PropertyData.legal_document || '');
        } else {
            formData.append('file',  '');
        }
    formData.append('_token', "{{ csrf_token() }}");
    formData.append('baseDirPath', "Legal_Document_Inputs");

        xhr.send(formData);
    }

    function GetDays() {
    var followupDate = $("#followup_date").val();
    var eta = parseInt($("#eta").val(), 10);

    // Check if followupDate is a valid date string
    if (!isNaN(Date.parse(followupDate))) {
        var dateobj = new Date(followupDate);
        dateobj.setDate(dateobj.getDate() + eta);

        // Check if etadate is a valid date
        if (!isNaN(dateobj.getTime())) {
            var etadate = dateobj.toISOString().slice(0, 10);
            return etadate;
        }
    }

    // Return a default value or handle the error accordingly
    return "";
}

function cal() {
    if (document.getElementById("followup_date")) {
        document.getElementById("estimated_date").value = GetDays();
    }
}

$(document).ready(function () {
    toggleSelectAllVisibility();
    // Handle form submission
    $('#supportingdoc_infoform').on('submit', function (e) {
        e.preventDefault(); // Prevent default form submission
        $('#supdocssubmit').prop('disabled', true);
        // Get the form data
        var formData = new FormData(this);

        formData.append('orderid', "{{$order->id}}");
        formData.append('baseDirPath', "LV_Form_Output");
        formData.append('_token', "{{csrf_token()}}");

        $.ajax({
            url: "{{url('upload_supporting_doc')}}",
            type: 'POST',
            data: formData,
            processData: false, // Prevent jQuery from processing the data
            contentType: false, // Prevent jQuery from automatically setting the content type
            success: function (responses) {

                if (responses.length > 0) {
                        responses.forEach(function (response) {
                            var id = response.id;
                            var pdf_file = response.pdf_file;
                            var listItem = '<li id="' + id + '">' +
                                '<i style="cursor:pointer" class="mdi mdi-drag-variant"></i>' +
                                '<input type="checkbox" onchange="display_merge_link(' + id +
                                ')" value="' + id + '" id="selectpdf' + id +
                                '" name="selectpdf[]" />' +
                                '<a style="cursor:pointer;color:blue" onclick="openSupportingDoc(' +
                                id + ', \'newWindow\')"><u> <i class="dripicons-paperclip">' + pdf_file +
                                '</i></u></a>' +
                                '&nbsp;' +
                                '<a style="cursor:pointer;" class="text-danger" onclick="delete_supporting_doc(' +
                                id + ', 0)"><u><i class="dripicons-trash"></i></u></a>' +
                                '</li>';

                            $('#sortabletable').append(listItem);
                            $('.support_docs').show();
                        });
                    } else {
                        $('.support_docs').hide();
                    }
                    toggleSelectAllVisibility();
                    $('.dropify-clear').click();
                    $('#supdocssubmit').prop('disabled', false);
            },
            error: function (xhr, status, error) {
                console.error('File upload failed.');
            }
        });
    });
});

function get_etafields(clid)
{
    var statusid = $("#"+clid).val();
    if(statusid == 4)
    {
        $('#etadiv').html("");
        $('#etadiv').append("<div class='col-lg-1 mr-2'><label>FollowUp:</label></div><div class='col-lg-3 mb-0 pb-0'><input type='date' required id='followup_date' class='form-control' name='followup_date' onchange='cal();'></div><div class='col-lg-1 mr-3'><label>ETA(Days): </label></div><div class='col-lg-2 mb-0 pb-0'><input type='number' required id='eta' class='form-control' name='eta' placeholder='ETA' pattern='[0-9]{1,2}' onchange='cal();'/></div><div class='col-lg-1 mr-3'><label>Estimated: </label></div><div class='col-lg-3 mb-0 pb-0'><input type='date' readonly required id='estimated_date' class='form-control' name='estimated_date' placeholder=''></textarea></div>");
    }
    else
    {
        $('#etadiv').html("");
    }
}

function delete_supporting_doc(supportid, is_merged_doc) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You want to delete this supporting file...",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, Go ahead!'
    }).then((result) => {
        if (result.value) {
            $.ajax({
                type: 'POST',
                url: "{{url('delete_supporting_doc')}}",
                data: 'supportid=' + supportid + '&action=deletesupporting_docs&_token=' +
                    "{{csrf_token()}}" + '&baseDirPath=' + "SFHDF_Form_Output",
                success: function (html) {
                    $("#" + supportid).remove();
                    $("#removesupportingfile" + supportid).remove();
                    toggleSelectAllVisibility();
                    if(is_merged_doc == 1) {
                        $("#mergepdfsdownload").css('display', 'none');
                    }
                }
            });
        }
    });
}


function selectallullis() {
    if ($("#selectallulli").is(":checked") == true) {
        $("ul#sortabletable li").each(function (index, element) {

            $("#selectpdf" + $(this).attr('id')).prop('checked', true);
        });
        $(".display_merge_pdf").css('display', '');
    } else if ($("#selectallulli").is(":checked") == false) {
        $("ul#sortabletable li").each(function (index) {
            $("#selectpdf" + $(this).attr('id')).prop('checked', false);
        });
        $(".display_merge_pdf").css('display', 'none');
    }
}

function display_merge_link(supportid) {
    total_lis = $("ul#sortabletable li").length;
    if ($("ul#sortabletable li input:checkbox:checked").length) {
        $("#mergepdfs").css('display', '');
        $("#selectpdf" + supportid).removeAttr('checked');
    } else {
        $("#mergepdfs").css('display', 'none');
    }

    if ($("ul#sortabletable li input:checkbox:checked").length < total_lis) {
        $("#selectallulli").prop('checked', false);
    } else if ($("ul#sortabletable li input:checkbox:checked").length == total_lis) {
        $("#selectallulli").prop('checked', true);
    }

}

$(function () {
    $(".sortable").sortable();
});



$(document).ready(function() {
    $('.content-loaded').show();
    $("#etainfoaccordion").hide();
    $("#supportingdocaccordion").hide();
    $('.frame').addClass('d-none');
});

function showhistory(orderid) {
    $.ajax({
        type: 'POST',
        url: '{{url("order_status_history")}}',
        data: 'orderid=' + orderid + '&action=viewhistory&_token=' + '{{csrf_token()}}',
        success: function (response) {
            var status_history = $('#status_history');
            status_history.empty();
            var rowcount = 1;

            $.each(response, function (index, item) {
                if (item.first_name == null || item.first_name == undefined) {
                    item.first_name = '';
                }
                if (item.last_name == null || item.last_name == undefined) {
                    item.last_name = '';
                }
                if (item.comments == undefined) {
                    if (item.status_type == "Completed") {
                        item.comments = "Order is Completed";
                    } else if (item.status_type == "Qc Queue") {
                        item.comments = "Order Completed on QC";
                    } else if (item.status_type == "Open") {
                        item.comments = "Order is Open";
                    } else if (item.status_type == "Closed") { // fix typo in status_type
                        item.comments = "Order is Closed";
                    } else {
                        item.comments = "";
                    }
                }

                var row = '<tr>' +
                    '<td>' + rowcount + '</td>' +
                    '<td>' + item.status + '</td>' +
                    '<td>' + item.first_name + ' ' + item.last_name + '</td>' +
                    '<td>' + item.comments + '</td>' +
                    '<td>' + item.updated_at + '</td>' +
                    '</tr>';
                rowcount = rowcount + 1;
                status_history.append(row);
            });


            $('#historymodal').modal('show');
        }
    });
}

    function viewjson() {
        var modal = document.getElementById('json_modal');
        $(modal).modal('show');
    }

    function generate_singlepdf() {
        selected_pdf = [];
        if ($("[name='selectpdf[]']:checked").length > 0) {
            $("[name='selectpdf[]']:checked").each(function () {
                selected_pdf.push($(this).val());
            });

            $.ajax({
                method: "POST",
                url: "{{url('pdfMerger')}}",
                data: {
                    _token: "{{csrf_token()}}",
                    action: 'pdfmerge',
                    baseDirPath: 'LV_Form_Output',
                    ids: selected_pdf,
                    orderid: "{{$order->id}}"
                },
                beforeSend: function () {
                    $("#loading-overlay").show();
                    $("#mergepdfs").css('display', 'none');
                    $("#processingpdf").html(
                        '<span class="text-warning"> Processing </span><span class="spinner-border text-warning"></span>'
                    );
                },
                success: function (response) {
                    var id = response.id;
                    if ($('#sortabletable').find('#' + id).length === 0) {
                        var pdf_file = response.pdf_file;
                        var listItem = '<li id="' + id + '">' +
                            '<i style="cursor:pointer" class="mdi mdi-drag-variant"></i> ' +
                            '<input type="checkbox" onchange="display_merge_link(' + id +
                            ')" value="' + id + '" id="selectpdf' + id +
                            '" name="selectpdf[]" />' +
                            ' <a style="cursor:pointer;color:blue" onclick="openSupportingDoc(' + id +
                            ', \'newWindow\')"><u> <i class="dripicons-paperclip"> ' + pdf_file + '</i></u></a>' +
                            '&nbsp;' +
                            '<a style="cursor:pointer;" class="text-danger" onclick="delete_supporting_doc(' +
                            id + ', 1)"><u><i class="dripicons-trash"></i></u></a>' +
                            '</li>';

                        $('#sortabletable').append(listItem);
                        $("#loading-overlay").hide();
                        $("#mergepdfs").css('display', 'none');
                        $("#mergepdfsdownload").remove();
                        $("#mergepdfs").after(
                            '<button class="btn btn-xs ml-2 p-0 m-0 btn-warning pl-1 pr-1 mt-2" onclick="openSupportingDoc(' +
                            "'" + id + "', 'download', '" + '{{$order->id}}' + "_merged_docs" + "')" +
                            '" type="button" id="mergepdfsdownload" name="mergepdfsdownload"> Download <em class="mdi mdi-cloud-download"></em></button>'
                        );
                        $("#selectallulli").prop('checked', false);
                        $('#processingpdf').html('');
                        $("ul#sortabletable li").each(function (index) {
                            $("#selectpdf" + $(this).attr('id')).prop('checked', false);
                        });
                    } else {
                        $("#loading-overlay").hide();
                        $("#mergepdfs").css('display', 'none');
                        $("#mergepdfsdownload").css('display', '');
                        $('#processingpdf').html('');
                        $("ul#sortabletable li").each(function (index) {
                            $("#selectpdf" + $(this).attr('id')).prop('checked', false);
                        });
                        $("#selectallulli").prop('checked', false);
                    }
                }
            });
        } else {
            Swal.fire({
                title: 'Alert!!!',
                text: "You need to check atleast one supporting file checkbox",
                icon: 'warning'
            });
        }
    }

    function toggle_basic_info() {
        $("#acordian_1").show();
        $("#order_submit").show();
        $(".hide_general").show();
        $("#etainfoaccordion").hide();
        $("#supportingdocaccordion").hide();
        $("#sectiontab_2").removeClass("btn-primary").addClass('btn-info');
        $("#sectiontab_1").removeClass("btn-info").addClass('btn-primary');
    }

    function showclr(clid)
    {
        $("#order_submit").hide();
        $("#acordian_1").hide();
        $(".hide_general").hide();
        $("#etainfoaccordion").show();
        $("#supportingdocaccordion").show();
        $("#sectiontab_1").removeClass("btn-primary").addClass('btn-info');
        $("#sectiontab_2").removeClass("btn-info").addClass('btn-primary');
        $("#comm_"+clid).css("background-color","#8389c9");
        $("#comm_"+clid).css("color","#fff");
    }

    function toggle_docs_info() {
        $("#order_submit").hide();
        $("#acordian_1").hide();
        $(".hide_general").hide();
        $("#etainfoaccordion").show();
        $("#supportingdocaccordion").show();
        $("#sectiontab_1").removeClass("btn-primary").addClass('btn-info');
        $("#sectiontab_2").removeClass("btn-info").addClass('btn-primary');
    }

    function showclr(clid) {

    }


function toggleSelectAllVisibility() {
    var hasLiElements = $('#sortabletable li').length > 0;
    var selectAllDiv = $('.support_docs');

    if (hasLiElements) {
        // Show the "Select All" checkbox
        selectAllDiv.show();

    } else {
        // Hide the "Select All" checkbox
        selectAllDiv.hide();
    }
}


    function ordersubmit(orderid) {
        var status = $("#order_status").val();
        $('#infosubmit').prop('disabled', true);
        $.ajax({
            url: "{{ url('order_status_change') }}",
            type: 'POST',
            data: 'orderid=' + orderid + '&status='+ status +'&_token=' + '{{csrf_token()}}',
            success: function(response) {
                window.location.href = "{{ url('orders/' . $order->id) }}";
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    $(document).ready(function() {
        $('#other_status_form').submit(function(e) {
            e.preventDefault();
            $('#other_status_submit').prop('disabled', true);
            var formData = $(this).serialize();
            $.ajax({
                url: "{{ url('other_status_update') }}",
                type: 'POST',
                data: formData,
                success: function(response) {
                    window.location.href = "{{ url('orders/' . $order->id) }}";
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        });
    });

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

        // 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');
        });
    });



    function showAttached(orderId, orderStatusType) {
        $.ajax({
            url: "{{ route('getAttachments') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                order_id: orderId
            },
            success: function (data) {
                var attachments = data.OtherStatusData;

                $('#attachmentsTable tbody').empty();
                $.each(attachments, function (index, attachment, data) {
                    var pdfRoute = "{{ route('pdf.show', ['folder' => 'LV_Form_Output@@:orderno', 'filename' => ':filename']) }}";
                    pdfRoute = pdfRoute.replace(':filename', attachment.attachment).replace(':orderno', orderId);

                    $('#attachmentsTable tbody').append('<tr>' +
                        '<td>' + (index + 1) + '</td>' +
                        '<td>' + (attachment.status || '') + '</td>' +
                        '<td>' + (attachment.comments || '') + '</td>' +
                        '<td>' + (attachment.client_comments || '') + '</td>' +
                        '<td>' + (attachment.attachment
                            ? '<a href="' + pdfRoute + '" target="_blank">' +
                                '<i class="fa fa-eye"></i> ' + attachment.attachment +
                            '</a>'
                            : 'No Attachments') + '</td>' +
                        '</tr>');
                });

                var modalTitle = 'Client Updates';
                $('.modal-title').text(modalTitle);
                $("#showAttach").modal('show');
            },
            error: function (xhr, status, error) {
                console.error('Failed to fetch attachments and client comments.');
            }
        });
    }
</script>
<script src="
https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.umd.min.js
"></script>
<link href="https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.min.css" rel="stylesheet">

@endsection