@extends('layouts.frontend')

@section('title', 'Signature')

@section('content')
    <form
        action="{{ route('update-info', [auth()->id(), App\Enums\UpdateAction::SIGNATURE]) }}" 
        method="POST"
        autocomplete="off"
        class="d-flex flex-column justify-content-between" style="height: 100vh">
        @csrf
        @method('PUT')
        <div class="page-content" style="margin-bottom:0px;">
            <h3 class="py-2 text-bg-dark text-center">

                <div class="nav-button"><a href="{{route('information')}}"><i class="bi bi-arrow-left" style="color:white;float:left;margin-left:15px;"></i></a></div>
                Signature
            </h3>

                <div class="mb-3">
                    <h5 class="text-center">Signature:</h5>
                    <div class="am-u-sm-4" style="width: 100%;text-align: :center;color:#0079b7 !important;padding:0px 10px;">
                        Please Sign Within The Dotted Line, The Signature Must Be Standard, Complete And Clear
                    </div>
                        <div class="d-flex justify-content-center">
                            <img class="img-fluid w-25" alt="signature" id="sign_preview" 
                             src="{{ empty(auth()->user()->member->signature)?'':asset(auth()->user()->member->signature) }}"
                            data-signature="{{ empty(auth()->user()->member->signature)?'':asset(auth()->user()->member->signature) }}" style="width:50% !important;">
                        </div>
                </div>
                <!-- <p class="py-2 mb-0 text-bg-warning text-center bg-opacity-25">Please sign within the dotted line, the signature must be standard, complete and clear</p> -->
                {{-- if(!auth()->user()->member->signature) --}}
                <div class="card" style="margin-bottom:0px;">
                    <div class="card-body p-0">
                        <div id="signature" class="d-flex justify-content-center" style="margin:10px 0px;">
                            
                        </div>
                        <div class="d-flex justify-content-center gap-2 mb-2">
                            <button type="button" class="btn btn-sm" id="clear" style="background-color:#fddf65;padding-left:30px;padding-right: 30px;font-size: 20px;">Reset</button>
                            {{-- <button type="button" class="btn btn-sm btn-success px-3" id="preview">Okay</button> --}}
                        </div>
                    </div>
                </div>
                {{-- endif --}}
                <input type="hidden" name="signature" id="my_sign">
        </div>

        <div class="btn-submit">
            <button type="submit" class="btn btn-success rounded-0 fs-4 mt-auto w-100 sumit-signature" 
            @disabled(!empty(auth()->user()->member->signature)) >Submit</button>
        </div>
    </form>

    @if (session()->has('success'))
    <x-ms-success :message="session('success')" />
    @endif
    @if (session()->has('warning'))
    <x-ms-success type="warning" :message="session('warning')" />
    @endif
@endsection

@push('styles')
@vite('resources/js/signature.js')
<style>
    #signature canvas{
        border: 2px dashed grey;
/*        width:100% !important;*/
        background-color:#d3d3d3 !important;
    }

</style>
@endpush