@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12 ">
    <div class="project-box">
        <div class="heading-btn-sec">
            <h3>E-Signature</h3>
        </div>

        <div class="inner-tab mt-4">
            <ul class="nav nav-tabs project-tab mb-30" id="myTab" role="tablist">
               <li class="nav-item" role="presentation">

                    <button class="nav-link active waves-effect" id="home-tab" data-bs-toggle="tab"
                        data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane"
                        aria-selected="true">Import PDFs</button>

                </li>
                <li class="nav-item" role="presentation">

                    <button class="nav-link waves-effect" id="profile-tab" data-bs-toggle="tab"
                        data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane"
                        aria-selected="false">Manage E-Signature Settings</button>

                </li>
                <li class="nav-item" role="presentation">

                    <button class="nav-link waves-effect" id="profile-tab3" data-bs-toggle="tab"
                        data-bs-target="#profile-tab-pane3" type="button" role="tab" aria-controls="profile-tab-pane3"
                        aria-selected="false">PDF Mappings</button>

                </li>
                <li class="nav-item" role="presentation">

                    <button class="nav-link waves-effect" id="profile-tab4" data-bs-toggle="tab"
                        data-bs-target="#profile-tab-pane4" type="button" role="tab" aria-controls="profile-tab-pane4"
                        aria-selected="false">Supplemental PDFs</button>

                </li>
            </ul>

            <div class="tab-content" id="myTabContent">

                <!-- Tab 1 -->
                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                    <div class="row">
                        <div class="col-12 ">
                           <div class="heading-btn-sec align-items-center gap-2 resp-flex-column">
                                <div>
                                <h3 class="mb-4">Instructions:</h3>
                                <ul class="mb-4">
                                    <li>To Add a new application, simply click on "Add New Application"</li>
                                    <li>To Edit the application, click on "Edit"</li>
                                    <li>To Delete an application and all linked permissions, mappings and attachments, click on "Delete"</li>
                                    <li>To copy Mapping from existing application, click on "Mappings"</li>
                                    <li>To set Permissions for users, click on "Permissions"</li>
                                    <li>To reorganize the Order of the applications, simply drag an application container up or down</li>
                                </ul>
                                </div>
                                <div>
                                    <div class="heading-btn">
                                        <button type="button" class="skyblue-btn-inner waves-effect">Add New application</button>
                                        <button type="button" class="blue-btn-inner waves-effect">Add New category</button>
                                        <button type="button" class="yellow-btn-inner waves-effect">Manager Categories</button>
                                        <button type="button" class="green-btn-inner waves-effect">PDF mapping Guide</button>
                                    </div>
                                </div>
                            </div>
                            <div class="heading-btn-sec align-items-start gap-2">
                                <h3>Current Applications:</h3>
                            </div>
                            <div class="project-box ">
                            <div class="table-responsive project-table no-border">

                            <table id="datatable" class="table mb-0 dt-responsive nowrap">

                                <thead class="thead-light ">

                                    <tr>
                                        <th class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></th>
                                        <th>POS Agreement</th>
                                        <th></th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"></td>
                                        <td>
                                        <b>File :</b> POS Agreement.pdf<br>
                                        <b>Mappings :</b> this application is mapped (18 records)<br>
                                        <b>Attachments :</b> N/A<br>
                                        <b>Visible :</b> Everyone<br>
                                        <b>Type :</b> eSignature Application
                                        </td>
                                        <td >
                                        <b>Created :</b> 01/21/2025 10:29am by Edna Eisavi (ednae)<br>
                                        <b>Last Modified :</b> 01/21/2025 10:29am by Edna Eisavi (ednae)<br>
                                        <b>Last Uploaded :</b> 04/17/2025 11:28am by Edna Eisavi (ednae)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">
                                            <div class="d-flex gap-2 justify-content-center ">
                                            <button type="button" class="action-btn"><i class="bx bx-trash"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-history"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-cog"></i></button>
                                            <button type="button" class="action-btn"><i class="dripicons-paperclip"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-transfer-alt"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-download"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-upload"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-pencil"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                                <thead class="thead-light ">

                                    <tr>
                                        <th class="w-5"><img src="http://127.0.0.1:8000/img/drag-dot.svg"></th>
                                        <th>Clover Addendum</th>
                                        <th></th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="w-5"></td>
                                        <td>
                                        <b>File :</b> POS Agreement.pdf<br>
                                        <b>Mappings :</b> this application is mapped (18 records)<br>
                                        <b>Attachments :</b> N/A<br>
                                        <b>Visible :</b> Everyone<br>
                                        <b>Type :</b> eSignature Application
                                        </td>
                                        <td >
                                        <b>Created :</b> 01/21/2025 10:29am by Edna Eisavi (ednae)<br>
                                        <b>Last Modified :</b> 01/21/2025 10:29am by Edna Eisavi (ednae)<br>
                                        <b>Last Uploaded :</b> 04/17/2025 11:28am by Edna Eisavi (ednae)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">
                                             <div class="d-flex gap-2 justify-content-center ">
                                            <button type="button" class="action-btn"><i class="bx bx-trash"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-history"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-cog"></i></button>
                                            <button type="button" class="action-btn"><i class="dripicons-paperclip"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-transfer-alt"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-download"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-upload"></i></button>
                                            <button type="button" class="action-btn"><i class="bx bx-pencil"></i></button>
                                            </div>    
                                        </td>
                                    </tr>
                                </tbody>

                            </table>

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

                <!-- Tab 2 -->
                <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                    <div class="row">
                        <div class="col-lg-2 col-md-12 col-12">
                            <div class="nav flex-column nav-pills manage-e-buttons me-2" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Configuration</button>
                                <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Confirmation Pages</button>
                                <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false">Help Banners</button>
                                <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Public Documents</button>
                            </div>
                        </div>
                        <div class="col-lg-10 col-md-12 col-12">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">
                                    <div class="heading-btn-sec align-items-end gap-2">
                                        <h3 class="text-nowrap">Site Information</h3>
                                        <span class="sp-line"></span>
                                    </div>
                                    <div class="custom-control custom-checkbox project-checkbox mb-3">
                                        <input type="checkbox" class="custom-control-input input-mini " id="closeButton" value="checked">
                                        <label class="custom-control-label" for="closeButton">Add eSignature Audit Trail to all digitally signed forms.</label>
                                    </div>
                                    <div class="custom-control custom-checkbox project-checkbox mb-3">
                                        <input type="checkbox" class="custom-control-input input-mini " id="closeButton2" value="checked">
                                        <label class="custom-control-label" for="closeButton2">Sync the Lead with new information from signed forms.</label>
                                    </div>
                                    <div class="custom-control custom-checkbox project-checkbox mb-3 ms-4">
                                        <input type="radio" class="custom-control-input input-mini " id="closeButton3" value="checked">
                                        <label class="custom-control-label" for="closeButton3">Import new data and do not send Conflict Email</label>
                                    </div>
                                    <div class="custom-control custom-checkbox project-checkbox mb-3 ms-4">
                                        <input type="radio" class="custom-control-input input-mini " id="closeButton4" value="checked">
                                        <label class="custom-control-label" for="closeButton4">Send Conflict Email and do not import new data </label>
                                    </div>
                                    <div>
                                    <div class="heading-btn-sec align-items-end gap-2 mt-5">
                                        <h3 class="text-nowrap">Email Notifications</h3>
                                        <span class="sp-line"></span>
                                    </div>
                                    <p>The confirmation email sent after a document is signed will be sent from the email of:</p>
                                    </div>
                                    <div class="d-flex gap-4 align-items-center mb-1">
                                        <div class="custom-control custom-checkbox project-checkbox mb-3">
                                            <input type="radio" class="custom-control-input input-mini " id="closeButton5" value="checked">
                                            <label class="custom-control-label" for="closeButton5">Acting User</label>
                                        </div>
                                        <div class="custom-control custom-checkbox project-checkbox mb-3">
                                            <input type="radio" class="custom-control-input input-mini " id="closeButton6" value="checked">
                                            <label class="custom-control-label" for="closeButton6">Group Settings</label>
                                        </div>
                                        <div class="custom-control custom-checkbox project-checkbox mb-3">
                                            <input type="radio" class="custom-control-input input-mini " id="closeButton7" value="checked">
                                            <label class="custom-control-label" for="closeButton7">Custom Sender</label>
                                        </div>
                                    </div>
                                    <p>The following internal email notifications will be sent from the system default email address:</p>
                                    <div class="email-notofication-dropdown-main">
                                        <div class="email-notofication-dropdown">
                                            <div class="project-form">
                                                <label>Open Email:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                    <option class="select-op">eSignature Document Opened</option>
                                                    <option value="1">One</option>
                                                    <option value="2">Two</option>
                                                    <option value="3">Three</option>
                                                </select>
                                            </div>
                                            <a href="# " class="green-light-btn-inner waves-effect"><i class="bx bx-pencil"></i></a>
                                            <div class="project-form">
                                                <label>Additional Signer Open Email:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                    <option class="select-op">Additional Signer Opened  E-Sign Document</option>
                                                    <option value="1">One</option>
                                                    <option value="2">Two</option>
                                                    <option value="3">Three</option>
                                                </select>
                                            </div>
                                            <a href="# " class="green-light-btn-inner waves-effect"><i class="bx bx-pencil"></i></a>
                                        </div>
                                        <div class="email-notofication-dropdown">
                                            <div class="project-form">
                                                <label>Conflict Email:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                    <option class="select-op">[eSignature] Updated Lead Information Avail...</option>
                                                    <option value="1">One</option>
                                                    <option value="2">Two</option>
                                                    <option value="3">Three</option>
                                                </select>
                                            </div>
                                            <a href="# " class="green-light-btn-inner waves-effect"><i class="bx bx-pencil"></i></a>
                                            <div class="project-form">
                                                <label>Additional Signer Open Email:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                    <option class="select-op">[EchoSign] Application Cancelled</option>
                                                    <option value="1">One</option>
                                                    <option value="2">Two</option>
                                                    <option value="3">Three</option>
                                                </select>
                                            </div>
                                            <a href="# " class="green-light-btn-inner waves-effect"><i class="bx bx-pencil"></i></a>
                                        </div>
                                    </div>
                                    <a href="#" class="green-btn-inner waves-effect  mt-2">Save Changes</a>
                                </div>
                                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">
                                    <div class="d-flex align-items-center gap-2 resp-i">
                                        <div class="project-form w-25">
                                            <label>Open Email:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                        <option class="select-op">eSignature Document Opened</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                </select>
                                        </div>
                                    <a href="#" class="green-btn-inner waves-effect ">Create New Page</a>
                                    </div>
                                    <div class="row">
                                        <div class="heading-btn-sec gap-2 mt-4">
                                                <h3 class="text-nowrap">Enter HTML below:</h3>
                                            </div>
                                        <div class="col-lg-6 col-md-6 col-12">
                                            <div class="project-box">
                                                <h5>Enter HTML</h5>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-12">
                                            <div class="project-box ">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <h5 class="mb-0">Static Assets</h5>
                                                    <div class="cros-btn"><i class="fas fa-times"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center gap-2 resp-i mt-4">
                                        <div class="project-form w-25">
                                            <label>Add Place Holder</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                        <option class="select-op"></option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                </select>
                                        </div>
                                    <a href="#" class="black-btn-inner waves-effect ">Preview</a>    
                                    <a href="#" class="green-btn-inner waves-effect">Save Changes</a>
                                    <a href="#" class="red-btn-inner waves-effect ">Delete</a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">
                                    <div class="d-flex align-items-center gap-2 resp-i">
                                        <div class="project-form w-25">
                                            <label>Choose Banner:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                        <option class="select-op">eSignature Document Opened</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                </select>
                                        </div>
                                    <a href="#" class="green-btn-inner waves-effect show-modal">Create New Page</a>
                                    </div>
                                    <div class="row">
                                        <div class="heading-btn-sec gap-2 mt-4">
                                                <h3 class="text-nowrap">Enter HTML below:</h3>
                                            </div>
                                        <div class="col-lg-6 col-md-6 col-12">
                                            <div class="project-box">
                                                <h5>Enter HTML</h5>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-12">
                                            <div class="project-box ">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <h5 class="mb-0">Static Assets</h5>
                                                    <div class="cros-btn"><i class="fas fa-times"></i></div>
                                                </div>
                                                <div class="blue-img"><img src="{{ asset('img/img-blue.png') }}"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center gap-2 resp-i mt-4">
                                        <div class="project-form w-25">
                                            <label>Add Place Holder</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                        <option class="select-op"></option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                </select>
                                        </div>
                                    <a href="#" class="black-btn-inner waves-effect">Preview</a>    
                                    <a href="#" class="green-btn-inner waves-effect">Save Changes</a>
                                    <a href="#" class="red-btn-inner waves-effect">Delete</a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">
                                    <div class="d-flex align-items-center gap-2 resp-i">
                                        <div class="project-form w-25">
                                            <label>Choose Public Page:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                        <option class="select-op">Select an Option</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                </select>
                                        </div>
                                        <a href="#" class="green-btn-inner waves-effect show-modal">Create New Page</a>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="project-form w-25">
                                            <label>Document Type:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                        <option class="select-op">HTML</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                </select>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="project-form w-25">
                                            <label>Public Name:</label>
                                                <select class="form-select form-control" aria-label="Default select example" style="">
                                                        <option class="select-op"></option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                </select>
                                        </div>
                                    </div>
                                    <div class="heading-btn-sec gap-2 mt-3">
                                        <h3 class="text-nowrap">No page selected.</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab 3 -->
                <div class="tab-pane fade" id="profile-tab-pane3" role="tabpanel" aria-labelledby="profile-tab3" tabindex="0">
                    <div class="row">
                            <div class="heading-btn-sec align-items-start gap-2">
                                <div>
                                    <h3 class="mb-0">No Data</h3>
                                </div>
                            </div>
                    </div>
                </div>
                <!-- Tab 4 -->
                <div class="tab-pane fade" id="profile-tab-pane4" role="tabpanel" aria-labelledby="profile-tab4" tabindex="0">
                    <div class="row m-auto justify-content-center">
                            <div class="heading-btn-sec align-items-start justify-content-center">
                                <h3 class="mb-0">Existing User Application Add-On($)</h3>
                            </div>
                    </div>
                    
                </div>
                <!-- If more tabs like profile-tab-pane4, 5, etc., you must define them here similarly -->

            </div> <!-- End of tab-content -->
        </div> <!-- End of inner-tab -->
    </div> <!-- End of project-box -->
</div> <!-- End of col-12 -->
@endsection
@push('page_script')
@endpush