@extends('widgets.document.layout.mainlayout')

@section('page_css')
<style>
.sign-pad-button-submit, .sign-pad-button-clear {
    display: none;
}
.sign-pad-button-submit {
    margin-top: 5px;
    background-color: #3b82f6;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.sign-pad-button-submit:hover {
    background-color: #2563eb;
}
.sign-pad-button-clear {
    margin-top: 5px;
    background-color: #ef4444;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.sign-pad-button-clear:hover {
    background-color: #dc2626;
}
</style>
@endsection

@section('content')
<div class="account-content">
    <div class="d-flex flex-wrap w-100 vh-100 overflow-hidden account-bg-01">
        @include('widgets.document._pdf-iframe')
        <div class="d-flex align-items-center justify-content-center flex-wrap vh-100 overflow-auto p-4 w-50 bg-backdrop">
            <form id="frmSubmitSignature" action="{{ $post_url }}" method="POST" class="flex-fill"> 
                @csrf
                <div class="mx-auto mw-450">
                    <div class="text-left mb-1">
                        <img src="/assets/images/logo-500x200.svg" alt="Logo" width="200" class="img-fluid">
                    </div>
                    <div class="mb-4">
                        <h4 class="mb-2 fs-20">{{ ucfirst($document->type) }} Information</h4>
                        <p>{{ $document->description }}</p>
                    </div>
                    <div class="mb-3">
                        <h6 class="mb-3 fw-semibold">Deal Information</h6>
                        @if ($errors->any())
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <div  class="alert alert-primary" role="alert">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <ul>
                            <li class="row mb-3"><span class="col-6">Deal Name</span><span class="col-6">{{ $deal->name }}</span></li>
                            <li class="row mb-3"><span class="col-6">Deal Amount</span><span class="col-6">{{ $deal->amount }}</span></li>
                            <li class="row mb-3"><span class="col-6">Email</span><span class="col-6">{{ $contact->email }}</span></li>
                            <li class="row mb-3"><span class="col-6">Phone</span><span class="col-6">{{ $contact->phone }}</span></li>
                            <li class="row mb-3"><span class="col-6">Address</span><span class="col-6">{{ $contact->address }}</span></li>
                            <li class="row mb-3"><span class="col-6">Created At</span><span class="col-6">{{ $document->created_at }}</span></li>
                        </ul>	
                    </div>
                    <div class="mb-3">
                        <x-creagia-signature-pad name='sign' />
                    </div>
                    <div class="mb-4">
                        <div class="row">
                            <div class="col-6">
                                <button id="btnSubmit" type="button" class="btn btn-success w-100">
                                    <span class="spinner-border spinner-border-sm mr-2 d-none" id="btnCreateLeadLoading" aria-hidden="true"></span>
                                    <span id="btnCreateLeadText">
                                        Agree
                                        <span class="btn-icon-right"><i class="ti ti-check"></i></span>
                                    </span>
                                </button>
                            </div>
                            <div class="col-6">
                                <button id="btnClearPad" type="button" class="btn btn-primary w-100">Clear Pad</button>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <p class="fw-medium text-gray">Copyright &copy; 2024 - CRMS</p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('page_js')
<script src="/vendor/sign-pad/sign-pad.min.js"></script>
<script>
$(document).ready(function() {
    $('#btnSubmit').click(function() {
        $('.sign-pad-button-submit').click();
    });
    $('#btnClearPad').click(function() {
        $('.sign-pad-button-clear').click();
    });

    $('#frmSubmitSignature').on('submit', function() {
        $('#btnCreateLead').attr('disabled', true);
        $('#btnCreateLeadLoading').removeClass('d-none');
        $('#btnCreateLeadText').text("Loading");
    });
});
</script>
@endsection