@extends('layouts.frontend-master')
@section('title', 'Signature')
@push('style')
{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> --}}

    <style>
       
    </style>
@endpush
@php
    $member = auth()->user()->member;
@endphp
@section('content')
<div class="max-w-lg mx-auto my-4">
    <div class="arco-card arco-card-size-medium bg-primary-linear rounded-lg mt-4">
        <div class="arco-card-header">
            <div class="arco-card-header-title">
                <h1 class="card-title">Signature</h1>
            </div><!---->
        </div><!---->
        <div class="container mt-4">
            <div class="card px-3 py-5 border-1" style="background:;">
                <form action="{{ route('update-info', [auth()->id(), App\Enums\UpdateAction::SIGNATURE]) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    @if (!$member->signature)
                        <div class="d-flex justify-content-center">
                            <img class="img-fluid w-50" alt="signature" id="sign_preview" src="" data-signature=""
                                style="width:100% !important;border:2px dotted #CCC;  display:none;">
                        </div>
                        <div class="mb-4 signature-pad shadow border d-flex justify-content-center"
                            style="background:rgb(255, 255, 255);width:200px;text-align: center;" id="signature">
                        </div>
                        <input type="hidden" name="signature" id="my_sign">
                        <div id="clear"
                            class=""
                            style="margin-top:10px;">
                            <button type="button" class="px-3 py-2 rounded bg-danger text-white border-0 " style="background:red;color:white;border:none;border-radius:5px;padding:5px 10px;">
                                Clear Signature
    
                            </button>
                        </div>
    
            </div>
            <div class="mt-3"><!---->
                <div class=""><button
                        class="px-3 py-2 rounded bg-primary text-white border-0 sumit-signature" style="background:blue;color:white;border:none;border-radius:5px;padding:5px 10px;width:100%;margin:10px 0;"
                        type="submit" >Submit</button></div>
            </div>
        @else
            <div class="">
                <img  style="margin:0 auto;" src="{{ $member->signature }}" alt="">
            </div>
            @endif
            </form>
        </div>
        </div>

    </div>
</div>
@endsection
@push('script')

    @vite('resources/js/signature.js')

    <script type="text/javascript">
        function CheckFrmSignature() {
            var images = "{{ $member->signature ?? '' }}";
            if (!images) {
                if ($('input[name="signature"]').get(0).files.length == 0) {
                    err = true;
                }
            } else {
                window.location.replace("{{ route('information') }}");
                return false;
            }

            if (err) {

            }
            return !err;
        }
    </script>
@endpush