@extends('welcome.welcome-layout')
@section('style')
<style type="text/css" data-hse-inline-css="true">
    @media only screen and (max-width: 768px) {}

    .company_agreement input.form-check-input {
        width: 30px;
        height: 30px;
    }

    .modal .modal-header.green_border {
        border-top: 5px solid #5093c8;
    }

    .banner-sec-hero-document {
        background: url('{{ asset("images/welcome-images/documents-bg.jpg")}}') center center / cover no-repeat;
        width: 100%;
        height: 50vh;
    }

    .document_checkbox input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid rgba(195, 204, 208, 1);
        background-color: rgba(236, 242, 244, 1);
        border-radius: 4px;
        cursor: pointer;
        position: relative;
    }
    /* .kbw-signature {
        width: auto;
        height: 200px;
        display: block;
    } */
    #sig {
        width: 100%;
        height: 200px;
        border: 1px solid #777 !important;
        margin: 1rem 0;
        overflow: hidden;
    }

    #sig canvas {
        width: 100% !important;
        height: 200px !important;
    }
    
    /* .sig canvas {
        width: 50% !important;
        height: 200px;
    } */
    #clear{
        text-decoration: none;
        color: #0a58ca;
    }
    
</style>
@endsection

@section('content')
<section class="banner-sec-hero-document d-flex align-items-center justify-content-center ">
    <div class="container">
        <div class="row banner-content-about">
            <div class="col-md-12 text-center">
                <h2 class="text-white text-capitalize fw-bold mb-md-4 mb-4">Company Agreement</h2>
                <h3 class="text-white text-capitalize fw-bold mb-md-4 mb-4">{{ $data->title }}</h3>
            </div>
        </div>
    </div>
</section>
<section class="company_agreement">
    <div class="container">
        <div class="row pt-5 pb-5">
            <div class="col-md-12 text-center">
                <div class="tables_cus mb-5">
                    @if ($data->title == 'Role contract')
                    @if (isset($rolecontract['contract']) && $rolecontract['contract'] !== '')
                                                @if (in_array($ext, $allowed))
                            <iframe
                            src="https://view.officeapps.live.com/op/embed.aspx?src={{ url('crm/role', $rolecontract['contract']) }}"
                            width="1000" height="1000" frameborder='0'></iframe>
                        @else
                        <iframe src="{{ url('crm/role', $rolecontract['contract']) }}" width="1000"
                            height="1000"></iframe>
                        @endif
                    @endif
                    @else
                                        @if (in_array($ext, $allowed))
                    <iframe
                        src="https://view.officeapps.live.com/op/embed.aspx?src={{ url('crm/company/agreements', $data['description']) }}"
                        width="1000" height="1000" frameborder='0'></iframe>
                    @endif
                    @endif

                </div>
                 <div class="row">
                    <!-- Signature Column -->
                    <div class="col-4 text-end mb-3">
                    </div>
                    <div class="col-3 text-end mb-3">
                    </div>
                    @if(isset($check->signature))
                    <div class="col-5 mb-3 text-center">
                        <img src="{{ $check->signature }}"
                            alt="Signature"
                            style="max-height:70px; border: 1px solid #ccc; padding: 4px; width:150px;"><br>
                            <small style="margin-left:4rem">Signed at: {{ \Carbon\Carbon::parse($check->created_at)->format('d M Y h:i A') }}</small>
                    </div>
                    @endif
                </div>
                <div class="form-check form-check-inline document_checkbox checkbox-detail d-flex justify-content-end align-items-center">
                     
                    @if (isset($check['status']) && !empty($check['status']))
                    <input class="form-group" type="checkbox" checked="" readonly="">
                    @else
                    <input class="form-group" type="checkbox" id="accept_agreement"
                        data-id="{{ $data->id }}">
                    @endif
                    &nbsp;
                    &nbsp;                                      
                    <label for="accept_agreement" class="form-group fs-4"> I accept this agreement </label>
                </div>

                <!-- <p class="h4 pt-4 text-dark">Thank you for accepting the terms and completing your onboarding process.</p> -->

                <form class="mt-5">
                    <div class="mb-3 row">
                        <div class="col-md-7 col-sm-12 text-left">
                        </div>
                        <div class="col-md-5 col-sm-12 text-left">
                            <div class="upload_file_wrapper">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <a href="{{ url('welcome/agreements/list')}}" class="back-btn"><i class="fa-solid fa-arrow-left ml-3 mr-1"></i> Back</a>
        </div>
    </div>
</section>
<!-- Accept -->
<div id="confirm" class="modal fade job-adverts-main-add-new-item-popup" tabindex="-1" aria-labelledby="confirmLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h4 class="modal-title" id="confirmLabel">Accept Agreement</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                Are you sure you want to accept this agreement? <br>                    
                    <div class="sign trainer_sign"></div>
                    {{-- <textarea name="trainer_sign"
                        class="form-control signature64 d-none" cols="20"
                        rows="2"></textarea> --}}

                    <div id="sig" style="width:100%;"></div>
                    <textarea id="signature64" name="signature64"
                        class="form-control signature64 d-none" cols="20"
                        rows="4"></textarea>      
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <label class="mb-0">Your Signature</label>
                        <a href="javascript:void(0)" class="clear-sign" id="clear">Clear</a>
                    </div>
                    
            </div>

            <div class="modal-footer border-0 justify-content-start">
                <button type="button" class="blue-big-button w-25" id="accept" data-bs-dismiss="modal">Yes</button>
                <button type="button"class="blue-big-button w-25" data-bs-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">
    jQuery(document).ready(function() {          
        $('#confirm').on('shown.bs.modal', function () {
            if ($('#sig').data('kbw-signature')) {
                $('#sig').signature('destroy');
                $('#sig').empty();
            }

            $('#sig').signature({
                syncField: '#signature64',
                syncFormat: 'PNG'
            });

            $('#signature64').val('');
        });
        // Clear button
        $('#clear').on('click', function (e) {
            e.preventDefault();
            $('#sig').signature('clear');
            $('#signature64').val('');
        });

        // Log live signature
        $('#sig').on('signaturechange', function () {
            console.log("Signature base64:", $('#signature64').val());
        });

        $('#accept_agreement').on('click', function(e) {
            e.preventDefault();
            var id = $(this).data("id");
             
            if (id == '') {
                $("#msg").html("Please select employee.");
                return false;
            } else {
                $("#msg").html("");
                let confirmModal = new bootstrap.Modal(document.getElementById('confirm'), {
                    backdrop: 'static',
                    keyboard: false
                });
                confirmModal.show();

                // Remove previous event listeners to prevent duplicates
                $('#confirm').off('click', '#accept');

                $('#confirm').on('click', '#accept', function(e) {
                    var token = "{{ csrf_token() }}";
                    const signature = $('#signature64').val();

                    console.log("Final signature:", signature);
                    $.ajax({
                        url: "{{ route('accept.agreement') }}",
                        type: 'post',
                        headers: {
                            'X-CSRF-TOKEN': token
                        },
                        data: {
                            id: id,
                            token: token,
                            signature: signature
                        },
                        success: function(response) {
                            location.reload();
                            displayMessage("Agreement accepted succesfully");
                        }
                    });
                });
                $("#cancel").on('click', function(e) {
                    e.preventDefault();
                    $('#confirm').modal.model('hide');
                });
            }
        });
         
    });    
    function displayMessage(message) {
        toastr.success(message);
    }
</script>
@endsection