@extends('layouts.instructor')

@section('breadcrumb')
    <div class="page-banner-content text-center">
        <h3 class="page-banner-heading text-white pb-15">Hey, {{ $name }} <img
                src="{{ asset('frontend/assets/img/student-profile-img/waving-hand.png') }}" alt="student" class="me-2">
        </h3>

        <!-- Breadcrumb Start-->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item font-14"><a href="{{ route('main.index') }}">{{ __('Home') }}</a></li>
                <li class="breadcrumb-item font-14 active" aria-current="page">{{ __('Dashboard') }}</li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
    <div class="instructor-profile-right-part">
        <div class="instructor-dashboard-box">
            {{-- status box --}}
            <div class="row instructor-dashboard-top-part instructor-only-dashboard-top-part">

                <div class="col-md-4 mb-30">
                    <div class="instructor-dashboard-top-part-item d-flex align-items-center radius-8">
                        <div class="instructor-dashboard-top-part-icon flex-shrink-0">
                            <span class="iconify" data-icon="clarity:clipboard-solid-badged"></span>
                        </div>
                        <div class="flex-grow-1 ms-3">

                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="para-color font-11 font-semi-bold text-uppercase">{{ __('Total Sign') }}
                                    {{-- <span
                                        class="color-gray font-13 text-capitalize font-normal">({{__('This Month')}})</span> --}}

                                </h6>
                            </div>
                            <h5>
                                {{ $total_course ?? 0 }}
                                {{-- @if (get_currency_placement() == 'after')
                                    {{ number_format(@$total_earning_this_month, 2) }} {{ get_currency_symbol() }}
                                @else
                                    {{ get_currency_symbol() }} {{ number_format(@$total_earning_this_month, 2) }}
                                @endif --}}
                            </h5>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-30">
                    <div class="instructor-dashboard-top-part-item d-flex align-items-center radius-8">
                        <div class="instructor-dashboard-top-part-icon flex-shrink-0">
                            <span class="iconify" data-icon="ph:file-pdf"></span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="para-color font-11 font-semi-bold text-uppercase">{{ __('Action required') }}
                            </h6>
                            <h5>{{ $total_pdf ?? 0 }}</h5>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-30">
                    <div class="instructor-dashboard-top-part-item d-flex align-items-center radius-8">
                        <div class="instructor-dashboard-top-part-icon flex-shrink-0">
                            <span class="iconify" data-icon="material-symbols:slow-motion-video"></span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="para-color font-11 font-semi-bold text-uppercase">{{ __('Waiting For Others') }}
                            </h6>
                            <h5>{{ $total_video ?? 0 }}</h5>
                        </div>
                    </div>
                </div>

            </div>
            {{-- uplaod box --}}
            {{-- free user --}}
            @if (isset($day_left) && $day_left > 1 && isset($user_status) && $user_status == 'unpaid')
                <div class="row upload-your-course-today mb-lg-0">
                    <div class="col-lg-12 col-xl-6 mb-30" style="
                width: 100%">
                        <div class="box box-h radius-8 text-center">
                            <h6 class="font-18 text-white">{{ __('') }}</h6>

                            <form action="{{ route('uploadSignFile') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <input name="uploadPdf" type="file" class="mFilerInit form-control  rounded-0"
                                    placeholder="Drop documents to get start" accept=".pdf" required />
                                <input type="submit"
                                    style="
                             padding: 6px 10px 7px;
    border-radius: 4px;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
                        "
                                    name="btnUpload" value="Upload" class="btn btn-sm btn-info p-2 mt-3" />
                            </form>


                        </div>
                    </div>

                    {{-- <div class="col-lg-6 mb-30">
                    <div class="instructor-dashboard-chart-box radius-8">
                        <div class="chart-title d-flex justify-content-between align-items-center">
                            <h6 class="font-18">{{ __('Sale Statistics') }}</h6>
                        </div>
                        <!-- Chart -->
                        <div class="chart-wrap1">
                            <div id="chart1" class="w-100">
                            </div>
                        </div>
                        <!-- Chart -->
                    </div>
                </div> --}}
                </div>

                {{-- paid user --}}
            @elseif(isset($day_left) &&
                    $day_left == 0 &&
                    isset($user_status) &&
                    $user_status == 'paid' &&
                    isset($ekyc_check) &&
                    $ekyc_check == 1)
                <div class="row upload-your-course-today mb-lg-0">
                    <div class="col-lg-12 col-xl-6 mb-30" style="
                width: 100%">
                        <div class="box box-h radius-8 text-center">
                            <h6 class="font-18 text-white">{{ __('') }}</h6>

                            <form action="{{ route('uploadSignFile') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <input name="uploadPdf" type="file" class="mFilerInit form-control  rounded-0"
                                    placeholder="Drop documents to get start" accept=".pdf" required />
                                <input type="submit"
                                    style="
                             padding: 6px 10px 7px;
    border-radius: 4px;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
                        "
                                    name="btnUpload" value="Upload" class="btn btn-sm btn-info p-2 mt-3" />



                            </form>


                        </div>
                    </div>

                    {{-- <div class="col-lg-6 mb-30">
                    <div class="instructor-dashboard-chart-box radius-8">
                        <div class="chart-title d-flex justify-content-between align-items-center">
                            <h6 class="font-18">{{ __('Sale Statistics') }}</h6>
                        </div>
                        <!-- Chart -->
                        <div class="chart-wrap1">
                            <div id="chart1" class="w-100">
                            </div>
                        </div>
                        <!-- Chart -->
                    </div>
                </div> --}}
                </div>
                {{-- pending user --}}
            @elseif(isset($user_status) && $user_status == 'pending')
                <div class="row upload-your-course-today mb-lg-0">
                    <div class="col-lg-12 col-xl-6 mb-30" style="
                width: 100%">
                        <div class="upload-your-course-part radius-8 shadow-lg text-center">
                            <h6 class="font-18 mb-4">
                                {{ __('Once payment is confirmed please proceed for your identity verification') }}</h6>
                            <a href="{{ route('ekycprogress') }}"
                                class="upload-your-course-today-btn bg-hover text-white font-12 font-medium">{{ __('Click here for identity verification') }}</a>
                        </div>
                    </div>
                </div>
            @else
                <div class="row upload-your-course-today mb-lg-0">
                    <div class="col-lg-12 col-xl-6 mb-30" style="
                width: 100%">
                        <div class="upload-your-course-part radius-8 shadow-lg text-center">
                            <h6 class="font-18 mb-4">{{ __('Your free trial period is end.') }}</h6>
                            <a href="{{ route('pricing') }}"
                                class="upload-your-course-today-btn bg-hover text-white font-12 font-medium">{{ __('Check Our Pricing Plan') }}</a>
                        </div>
                    </div>

                    {{-- <div class="col-lg-6 mb-30">
                    <div class="instructor-dashboard-chart-box radius-8">
                        <div class="chart-title d-flex justify-content-between align-items-center">
                            <h6 class="font-18">{{ __('Sale Statistics') }}</h6>
                        </div>
                        <!-- Chart -->
                        <div class="chart-wrap1">
                            <div id="chart1" class="w-100">
                            </div>
                        </div>
                        <!-- Chart -->
                    </div>
                </div> --}}
                </div>
            @endif
        </div>
        {{-- certificate list table --}}
        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-30">
                            <div class=" d-flex justify-content-between">
                                {{-- checkbox --}}
                                <p>
                                    {{-- <input id="c1" type="checkbox" /> --}}
                                    <label for="c1" class="signstatus">Signatory List</label>
                                </p>

                                {{-- <button class="btn btn-success btn-sm" type="button" data-bs-toggle="modal"
                                    data-bs-target="#add-todo-modal">
                                    <i class="fa fa-plus"></i> {{ __('Add Signatory') }}
                                </button> --}}
                            </div>



                            {{-- jquery datatable --}}
                            <div class="table-container ">
                                <table id="example" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th style="width: 50% !important">{{ __('SL') }}</th>
                                            <th>{{ __('Is Signed') }}</th>
                                            <th>{{ __('Add Signatory') }}</th>
                                            <th>{{ __('Sign Document') }}</th>
                                            <th>{{ __('Manipulate Link') }}</th>
                                            <th>{{ __('Download') }}</th>

                                            <th>{{ __('File Name') }}</th>
                                            {{-- <th>{{ __('File Size') }}</th> --}}
                                            <th>{{ __('Uploaded At') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (isset($uploaded_files))
                                            @foreach ($uploaded_files as $k => $file)
                                                @php
                                                    $is_signed = false;
                                                    $meta = json_decode($file->meta_data, true);
                                                    foreach ($meta as &$m) {
                                                        if (str_contains(strtolower(auth()->user()->name), strtolower($m['name']))) {
                                                            $m['current_user'] = true;
                                                            if (isset($m['is_signed']) && $m['is_signed'] != '0') {
                                                                $is_signed = true;
                                                            }
                                                        }
                                                    }
                                                @endphp
                                                <tr>
                                                    <td>{{ $k + 1 }}</td>

                                                    <td class="text-left">
                                                        {{-- api hit er por status dore check korte hobe --}}
                                                        @if ($file->is_signed === 1)
                                                            <i class="fa fa-check text-success"></i>
                                                        @else
                                                            <i class="fa fa-times text-danger"></i>
                                                        @endif
                                                    </td>
                                                    <td class="text-left p-0">
                                                        @if ($file->uploaded_by == auth()->id())
                                                            {{-- <button class="btn btn-primary btn-sm"
                                                            style="
                                            height: 5vh;
                                           
                                            font-size: 10px;
                                        "
                                                            type="button"
                                                            onclick="loadSignatory(this, '{{ $file->id }}','{{ base64_encode(json_encode($meta)) }}')">
                                                            {{ __('Add Signatory') }}
                                                        </button> --}}


                                                            <span
                                                                style="
                                                        cursor: pointer;
                                                    "
                                                                onclick="loadSignatory(this, '{{ $file->id }}','{{ base64_encode(json_encode($meta)) }}')"
                                                                class="status bg-green">{{ $file->meta_data != '{}' ? 'Edit Signatory' : 'Add Signatory' }}</span>
                                                        @endif


                                                    </td>
                                                    <td class="text-left p-0 sendsignator">
                                                        @if ($file->uploaded_by == auth()->id() && $file->meta_data != '{}')
                                                            <span
                                                                style="
                                                    cursor: pointer;
                                                "
                                                                onclick="sendSignatory('{{ $file->file_name_generated }}', '{{ $file->id }}', '{{ $file->file_name_original }}')"
                                                                class="status bg-blue text-white"> Sign Document</span>

                                                            {{-- <button class="btn btn-info btn-sm"
                                                            style="
                                                        height: 5vh;
                                                       
                                                        font-size: 10px;
                                                    "
                                                            onclick="sendSignatory('{{ $file->file_name_generated }}', '{{ $file->id }}', '{{ $file->file_name_original }}')">
                                                            Sign Document
                                                        </button> --}}
                                                        @endif


                                                    </td>
                                                    <td class="text-left p-0">
                                                        @if ($file->uploaded_by == auth()->id() && $file->manipulate_link != '')
                                                            <span
                                                                style="
                                    cursor: pointer;
                                "
                                                                onclick="manipulatelink('{{ $file->manipulate_link }}')"
                                                                class="status bg-red"> Mainipulate
                                                                Link</span>
                                                        @endif

                                                    <td class="text-left p-0">
                                                        @if ($file->uploaded_by == auth()->id() && $file->download_link != '')
                                                            <span
                                                                style="
                                            cursor: pointer;
                                        "
                                                                onclick="downloadlink('{{ $file->download_link }}')"
                                                                class="status bg-orange text-white"> Download</span>
                                                        @endif
                                                    </td>

                                                    </td>
                                                    <td><a
                                                            href="{{ url(rtrim($file->file_path, '/') . '/' . $file->file_name_generated) }}">{{ $file->file_name_original }}</a>
                                                    </td>

                                                    {{-- <td>{{ ceil($file->file_size / 1024) }} KB</td> --}}
                                                    <td>{{ date('d-m-Y h:i:s A', strtotime($file->created_at)) }}</td>



                                                </tr>
                                            @endforeach
                                        @endif


                                    </tbody>
                                </table>
                                <div class="mt-3">

                                </div>
                            </div>



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

        <div class="modal fade" id="signatoryPanel">

            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    {{-- <div class="modal-header">
                        <h4 class="modal-title w-100">Signatory List
                            <div class="float-end"><button class="btn btn-sm btn-primary save-signatory"
                                    onclick="saveSignatory(this)">Save</button></div>
                        </h4>
                    </div> --}}
                    <div class="modal-body">

                        <form id="savesign">
                            @csrf
                            <p>
                                <input
                                    onclick="toogleCheckbox('{{ auth()->user()->name }}','{{ auth()->user()->email }}', '{{ auth()->user()->phone_number }}','{{ auth()->user()->ekyc_status }}' , '{{ auth()->user()->cert_token }}')"
                                    type="checkbox" name="signstatus" id="signstatus" />




                                <label for="c1" class="signstatusText" style="margin-top:10px">I'm the only
                                    signer.</label>
                            </p>
                            <input type="hidden" name="signatoryID" id="signatoryID">


                            <div class="appendQuery">
                                <div class="metaInfo">
                                    <div class="form-row pt-4 d-flex">
                                        <div class="col-md-2 mx-2 ">
                                            <input placeholder="Name" class="form-control name" type="text"
                                                name="name[]" required>
                                        </div>
                                        <div class="col-md-2 mx-2">
                                            <input placeholder="Designation" class="form-control designation"
                                                type="text" name="designation[]">

                                        </div>
                                        <div class="col-md-2 mx-2">
                                            <input placeholder="Email" class="form-control email" type="text"
                                                name="email[]">
                                        </div>
                                        <div class="col-md-2 mx-2">
                                            <input placeholder="Phone" class="form-control phone" type="number"
                                                name="phone[]">
                                        </div>
                                        {{-- <div class="col-md-2 mx-2">
                                            <input placeholder="nid" class="form-control nid" type="number"
                                                name="nid[]">
                                        </div> --}}
                                        <div class="col-md-2 mx-2 addSign">
                                            <span title="যোগ করুন"
                                                class="btn btn-outline-primary btn-sm btn-square btn_query_add">
                                                <i class="fa fa-plus"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </form>
                        <button type="button" id="signSubmit" class="btn btn-info  mt-4 p-1" onclick="saveSignatory()"
                            style="
                            width: 5vw;
                            font-size: smaller;
                        ">Submit</button>
                        {{-- <div class="row">
                            <div class="col-9">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Name</th>
                                            <th>Designation</th>
                                            <th>Is Signed</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
    
    
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-3">
                                <h4>User List</h4>
                                <ul>
                                    @foreach ($users as $user)
                                        <li class="addAsSignatory" data-id="{{ $user->id }}"
                                            data-name="{{ $user->name }}" data-designation="{{ $user->designation }}">
                                            {{ $user->name . ', ' . $user->designation }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('style')
    <link href="{{ asset('common/css/mFiler-font.css') }}" rel="stylesheet">
    <link href="{{ asset('common/css/mFiler.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('admin/css/jquery.dataTables.min.css') }}">
    {{-- checkbox css --}}
    <style>
        #example thead th:nth-child(1) {
            width: 50px;
        }

        .table-container {
            overflow-x: scroll;
            padding: 15px;
            max-width: 100%;
            margin: 0 auto;
            box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
            border-radius: 5px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f8f8f8;
        }

        input[type=checkbox] {
            /* Add if not using autoprefixer */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            /* For iOS < 15 to remove gradient background */
            background-color: rgba(0, 0, 0, 0);
            /* Not removed via appearance */
            margin: 0;
            position: relative;
            -webkit-border-radius: 0;
            display: inline-block;
            overflow: hidden;
            width: 51px;
            height: 31px;
            border-radius: 15.5px;
            background-color: #e9e9ea;
            transition: background-color 250ms;
            vertical-align: middle;
        }

        @media (prefers-reduced-motion) {
            input[type=checkbox] {
                transition: none;
            }
        }

        @media (prefers-color-scheme: dark) {
            input[type=checkbox] {
                background-color: #39393d;
            }
        }

        input[type=checkbox]:before {
            position: absolute;
            top: 2px;
            left: 2px;
            border-radius: 15.5px;
            content: "";
            dispaly: inline-block;
            width: 27px;
            height: 27px;
            background-color: white;
            transition: all 200ms;
            box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
        }

        @media (prefers-reduced-motion) {
            input[type=checkbox]:before {
                transition: none;
            }
        }

        input[type=checkbox]:checked {
            background-color: #35c759;
        }

        @media (prefers-color-scheme: dark) {
            input[type=checkbox]:checked {
                background-color: #2ed158;
            }
        }

        input[type=checkbox]:checked:before {
            left: 22px;
        }

        input[type=checkbox]:disabled {
            background-color: #efefef;
        }

        @media (prefers-color-scheme: dark) {
            input[type=checkbox]:disabled {
                background-color: #1e1e1e;
            }
        }

        input[type=checkbox]:disabled:before {
            box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
        }

        input[type=checkbox]:disabled:checked {
            background-color: #b7dec0;
        }

        @media (prefers-color-scheme: dark) {
            input[type=checkbox]:disabled:checked {
                background-color: #243f2a;
            }
        }

        input[type=checkbox]+label {
            vertical-align: middle;
            font-family: Verdana;
        }
    </style>
@endpush

@push('script')
    <link rel="stylesheet" href="{{ asset('admin/sweetalert2/sweetalert2.css') }}">

    <!-- All CSS files included here -->
    {{-- <link rel="stylesheet" href="{{ asset('admin/css/all.min.css') }}"> --}}
    <link rel="stylesheet" href="{{ asset('frontend/assets/vendor/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend/assets/vendor/jquery/jquery_datatable.min.css') }}">

    @stack('style')
    {{-- <link rel="stylesheet" href="{{ asset('admin/css/metisMenu.min.css') }}"> --}}
    <link rel="stylesheet" href="{{ asset('admin/styles/main.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/css/admin-extra.css') }}">
    <link href="{{ asset('common/css/select2.css') }}" rel="stylesheet">


    <script src="{{ asset('common/js/apexcharts.min.js') }}"></script>
    <script src="{{ asset('frontend/assets/js/custom/mFiler.js') }}"></script>
    <script src="{{ asset('admin/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('admin/js/custom/data-table-page.js') }}"></script>
    <!-- include jQuery library -->

    <!-- include DataTable plugin -->
    <script src="{{ asset('frontend/assets/js/custom/jquery.dataTables.min.js') }}"></script>



    <script>
        $(document).ready(function() {

            $('.mFilerInit').filer({
                showThumbs: true,
                addMore: false,
                allowDuplicates: false,
                limit: 1
            });
            $('#example').DataTable();
            var table = $('#example');
            if (!$.fn.DataTable.isDataTable(table)) {
                table.DataTable({
                    responsive: true,
                    "lengthMenu": [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, "All"]
                    ],
                    "pagingType": "full_numbers",
                    "searching": false
                });
            }
        });
    </script>


    <script>
        function _(e, all = false) {
            let divs = document.querySelectorAll(e);
            if (all || divs.length > 1) {
                return divs;
            }
            return divs[0];
        }

        _("input", true).forEach((element) => {
            element.addEventListener("input", drawBordr);
        });

        const resultDiv = _(".result");

        drawBordr();

        function drawBordr() {
            let borderWidth = Number(_('[name="borderWidth"]').value);
            let color1 = _('[name="borderColor"]').value;
            let dashLength = Number(_('[name="dashLength"]').value);
            let spacing = Number(_('[name="spacing"]').value);
            let slanting = Number(_('[name="slanting"]').value);
            let borderFade = 100 - Number(_('[name="borderFade"]').value);
            let diraction = _('[name="diraction"]').checked;
            let animation = Number(_('[name="animation"]').value);

            let color2 = "transparent";

            const backgroundImage = `
        repeating-linear-gradient(${
          slanting + (diraction ? 180 : 0)
        }deg, ${color1}, ${color1} ${
    Math.round(dashLength * borderFade) / 100
  }px, ${color2} ${dashLength}px, ${color2} ${
    dashLength + Math.round(spacing * borderFade) / 100
  }px, ${color1} ${dashLength + spacing}px),
        repeating-linear-gradient(${
          slanting + (diraction ? 270 : 90)
        }deg, ${color1}, ${color1} ${
    Math.round(dashLength * borderFade) / 100
  }px, ${color2} ${dashLength}px, ${color2} ${
    dashLength + Math.round(spacing * borderFade) / 100
  }px, ${color1} ${dashLength + spacing}px),
        repeating-linear-gradient(${
          slanting + (diraction ? 0 : 180)
        }deg, ${color1}, ${color1} ${
    Math.round(dashLength * borderFade) / 100
  }px, ${color2} ${dashLength}px, ${color2} ${
    dashLength + Math.round(spacing * borderFade) / 100
  }px, ${color1} ${dashLength + spacing}px),
        repeating-linear-gradient(${
          slanting + (diraction ? 90 : 270)
        }deg, ${color1}, ${color1} ${
    Math.round(dashLength * borderFade) / 100
  }px, ${color2} ${dashLength}px, ${color2} ${
    dashLength + Math.round(spacing * borderFade) / 100
  }px, ${color1} ${dashLength + spacing}px)`;

            const borderLengthPx =
                Math.round(
                    ((dashLength + spacing) /
                        Math.sin(((90 - Math.abs(slanting)) * Math.PI) / 180)) *
                    100
                ) / 100;
            const borderLength =
                animation > 0 ? `calc(100% + ${borderLengthPx}px)` : "100%";
            const backgroundSize =
                `${borderWidth}px ${borderLength}, ${borderLength} ${borderWidth}px, ${borderWidth}px ${borderLength} , ${borderLength} ${borderWidth}px`;
            const backgroundPosition = `0 0, 0 0, 100% 0, 0 100%`;

            resultDiv.style.backgroundImage = backgroundImage;
            resultDiv.style.backgroundSize = backgroundSize;
            resultDiv.style.backgroundPosition = backgroundPosition;

            const animationPropery =
                animation > 0 ?
                `borderAnimation ${
          Math.round((1.1 - animation) * 10) / 10
        }s infinite linear${diraction ? " reverse" : ""}` :
                "unset";
            resultDiv.style.animation = animationPropery;

            let animationTxt = "";
            if (animation > 0) {
                document.documentElement.style.setProperty(
                    "--AnimationLength",
                    `-${borderLengthPx}px`
                );

                animationTxt = `
                <span><b>animation:</b> ${animationPropery};</span>
            }<br>
            <br>
            @keyframes <b>borderAnimation</b> {
                <span>from { background-position:  0 0, -${borderLengthPx}px 0, 100% -${borderLengthPx}px, 0 100%; }</span>
                <span>to { background-position:  0 -${borderLengthPx}px, 0 0, 100% 0, -${borderLengthPx}px 100%; }</span>
        `;
            }

            resultDiv.style.padding = `calc(1em + ${borderWidth}px)`;

            resultDiv.innerHTML = `
        <code>
            .box {
                <span><b>background-image:</b> ${backgroundImage};</span>
                <span><b>background-size:</b> ${backgroundSize};</span>
                <span><b>background-position:</b> ${backgroundPosition};</span>
                <span><b>background-repeat:</b> no-repeat; </span>
                ${animationTxt}
            }
        </code>
    `;
        }
    </script>
    <script>
        // $("#signstatus").on('click', function() {
        //     console.log('click porce');
        //     // $("#div1").hide();
        //     // $("#div2").show();
        // })

        function toogleCheckbox(name, email, phone, ekyc_status, cert_token) {
            if (document.getElementById("signstatus").checked) {
                $(".addSign").hide();
                $(".name").val(name);
                $(".email").val(email);
                $(".phone").val(phone);

                // $(".name").val('Md.Hasanuzzaman');
                // $(".designation").val('Project Lead');
                // $(".email").val('mdmhzaman@gmail.com');
                // $(".phone").val('01914127482');
                // $(".nid").val('2398444956');
            } else {
                $(".addSign").show();


            }



        }

        function sendSignatory(pdf_doc, file_id, doc_name) {
            $.ajax({
                url: '/sendSignatory',
                method: 'post',
                data: {
                    pdf_doc,
                    file_id,
                    doc_name,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    // alert(response.message);

                    if (response.code == 200) {
                        toastr.success('', response.message);


                        window.open(response.body.manipulateLink, '_blank');
                        window.location.reload();
                    } else {
                        toastr.error('', 'Failed to sent signatory');

                    }

                }
            })

        }

        function loadSignatory(element, id, data) {
            let meta = JSON.parse(atob(data));
            console.log(meta);


            // console.log(meta);
            let modal = "#signatoryPanel";
            $(modal).modal('show');
            $('#signatoryID').val(id);

        }
        $('.btn_query_add').on('click', function() {
            $('#signstatus').hide();
            $('.signstatusText').hide();

            $('.appendQuery').append(

                `
                <div class = "metaInfo">
                <div class="form-row pt-4 d-flex">

                            <div class="col-md-2 mx-2">
                                <input placeholder="Name" class="form-control name" type="text" name="name[]">
                            </div>
                            <div class="col-md-2 mx-2">
                                <input placeholder="Designation" class="form-control designation" type="text" name="designation[]">

                            </div>
                            <div class="col-md-2 mx-2">
                                <input placeholder="Email" class="form-control email" type="text" name="email[]">
                            </div>
                            <div class="col-md-2 mx-2">
                                <input placeholder="Phone" class="form-control phone" type="number" name="phone[]">
                            </div>
                           
														<div class="col-md-2 mx-2">
                    <button title="মুছে ফেলুন" class="btn btn-outline-info btn-sm btn-danger btn-square btn_query_remove">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
                        </div>
                        </div>
                        `
            );

            $('.appendQuery').on('click', '.btn_query_remove', function(e) {
                e.preventDefault();
                //    remove e only one element thakle button show korbe 
                let formdata = $("#savesign").serializeArray();
                if (formdata.length == 7) {
                    $('#signstatus').show();
                    $('.signstatusText').show();

                }
                $(this).parent().parent().remove();
            });

            // $('.summernote').summernote();
            // $('div.note-editable').height(150);
        });

        function deleteSignatory(element) {
            $(element).closest('tr').remove();
            changeSerialNo();
        }

        function changeSerialNo() {
            let modal = "#signatoryPanel";
            let rows = $(modal).find('tbody tr');
            $.each(rows, function(k, v) {
                $(v).find('td:eq(0)').text((k + 1));
            })
        }

        function downloadlink(downloadLink) {
            window.open(downloadLink, '_blank');

        }

        function manipulatelink(manipulatelink) {
            window.open(manipulatelink, '_blank');

        }
        
        function saveSignatory(element) {
            let formdata = $("#savesign").serializeArray()
            let modal = "#signatoryPanel";
            meta_data = {};
            $('.metaInfo').each(function(j, w) {
                meta_data[j] = {};
                meta_data[j]['name'] = $(this).find('.name').val();
                meta_data[j]['designation'] = $(this).find('.designation').val();
                meta_data[j]['email'] = $(this).find('.email').val();
                meta_data[j]['phone'] = $(this).find('.phone').val();
                // meta_data[j]['nid'] = $(this).find('.nid').val();
            })
            // let rows = $(modal).find('tbody tr');
            // $.each(rows, function(k, v) {
            //     meta.push({
            //         "user_id": $(v).data('id'),
            //         "name": $(v).find('td:eq(1)').text(),
            //         "designation": $(v).find('td:eq(2)').text(),
            //         "is_signed": $(v).find('td:eq(3)').text() == 'Yes' ? 1 : 0
            //     })
            // });
            $.ajax({
                url: '/update-sign',
                method: 'post',
                data:

                    formdata,

                success: function(response) {

                    toastr.success('', response.message);

                    if (response.status == 'success') {
                        $(modal).modal('hide');
                        window.location.reload();

                    } else {
                        toastr.error('', response.message);

                    }
                }
            })
        }
    </script>
@endpush