@if ($isDocuSign??false)
    <!--begin::Accordion-->
    <div class="accordion accordion-icon-toggle docusign_tab" id="kt_accordion_2">

        <!--begin::Item-->
        <div class="mb-5">
            <!--begin::Header-->
            <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                data-bs-target="#kt_accordion_2_item_2" aria-expanded="false">
                <span class="svg-icon svg-icon-primary">
                    <svg xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none"
                            fill-rule="evenodd">
                            <polygon points="0 0 24 0 24 24 0 24"></polygon>
                            <path
                                d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                fill="#000000" fill-rule="nonzero"></path>
                            <path
                                d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                fill="#000000" fill-rule="nonzero" opacity="0.3"
                                transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                            </path>
                        </g>
                    </svg>
                </span>
                <h2 class="fw-semibold mb-0 ms-4">Connect DocuSign</h2>
            </div>
            <!--end::Header-->

            <!--begin::Body-->
            <div id="kt_accordion_2_item_2" class="fs-6 collapse"
                data-bs-parent="#kt_accordion_2" style="">
                <div class="card-body pl-12">
                    <!--begin::Group-->
                    <div class="form-group row ">
                        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12">
                            @if ($isDocuSignConnected)
                                <h3>You are connected to DocuSign</h3>
                                <a href="{{ route('disconnect.docusign') }}"
                                    class="btn btn-primary mt-4">Disconnect Docusign</a>
                            @else
                                <h3>You are not connected to DocuSign</h3>
                                <a href="{{ route('connect.docusign') }}"
                                    class="btn btn-primary mt-4">Connect to Docusign</a>
                            @endif
                        </div>
                    </div>
                    <!--end::Group-->
                </div>
            </div>
            <!--end::Body-->
        </div>
        <!--end::Item-->

    </div>
    <!--end::Accordion-->
@endif
@if ($isClickToSign??false)
    <!--begin::clickToSign-->
    <div class="clicktosign_tab">
        <div class="rounded border border-dashed border-gray-300 p-6 p-lg-8 mb-10 col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12">
            <!--begin::Heading-->
            <h2 class="fw-bolder mb-5">ClickToSign Information</h2>
            <!--end::Heading-->

            <!--begin::Description-->
            <div class="fs-5 fw-bold mb-5">
                <table class="table table-row-bordered gy-5 dataTable">
                    <tr>
                        <td>Name</td>
                        <td>: {{$clickToSignUser['name']??""}}</td>
                    </tr>
                    <tr>
                        <td>Email</td>
                        <td>: {{$clickToSignUser['email']??""}}</td>
                    </tr>
                    <tr>
                        <td>Company</td>
                        <td>: {{$clickToSignUser['company']??""}}</td>
                    </tr>
                </table>
            </div>
            <!--end::clickToSign-->
        </div>
        <!--begin::Group-->
        <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12">
            <label class="col-form-label text-lg-right text-left">Webhook URL</label>
            <div class="d-flex align-items-center">
                <input class="form-control form-control-lg form-control-solid me-2" id="clicktosign_webhook_url" type="text" value="{{$clickToSignWebhook['webhook']??''}}" />
                <button id="clicktosign_webhook_url_save_btn" class="btn btn-primary" onclick="saveClickToSignWebhookUrl();">Save</button>
            </div>
        </div>
        <!--end::Group-->
    </div>
    <!--end::clickToSign-->
@endif