@extends('layout.master')

@section('title', 'E-Signature')

@section('content')

    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="card-header">
                            <h1>Confirmation &amp; E-Signature</h1>
                        </div>
                        <div class="card-body card-dashboard">
                            @include('inc.messages')

                            <div class="alert alert-info">
                                Please review the details below. By signing, the member confirms that all
                                entered information is <strong>accurate and correct</strong>.
                            </div>

                            <div class="row mb-2">
                                <div class="col-md-3 text-center">
                                    <img src="{{ asset($member->picture) }}" alt="Member Picture"
                                        class="img-thumbnail" style="width: 150px; height: 150px; object-fit: cover;">
                                </div>
                                <div class="col-md-9">
                                    <table class="table table-bordered">
                                        <tbody>
                                            <tr>
                                                <th style="width: 25%;">Full Name</th>
                                                <td>{{ $member->name }}</td>
                                                <th style="width: 25%;">Member #</th>
                                                <td>{{ $member->member_number }}</td>
                                            </tr>
                                            <tr>
                                                <th>Guardian</th>
                                                <td>{{ $member->initial }} {{ $member->parent_name }}</td>
                                                <th>CNIC</th>
                                                <td>{{ $member->cnic }}</td>
                                            </tr>
                                            <tr>
                                                <th>Date of Birth</th>
                                                <td>{{ $member->dob }}</td>
                                                <th>Mobile #</th>
                                                <td>{{ $member->mobile_number }}</td>
                                            </tr>
                                            <tr>
                                                <th>City</th>
                                                <td>{{ $member->city }}</td>
                                                <th>Address</th>
                                                <td>{{ $member->address }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <form method="POST" action="{{ route('member.save_signature') }}" id="esign_form">
                                @csrf
                                <input type="hidden" name="member_id" value="{{ $member->id }}">
                                <input type="hidden" name="signature" id="signature_input">

                                <div class="form-group">
                                    <label><strong>Member's Signature*</strong></label>
                                    <div style="border: 2px dashed #999; border-radius: 6px; display: inline-block; background: #fff;">
                                        <canvas id="signature_pad" width="600" height="220"
                                            style="touch-action: none; display: block; cursor: crosshair; max-width: 100%;"></canvas>
                                    </div>
                                    <p class="text-muted mt-1" style="margin-bottom: 0;">Draw the signature above using a mouse or touch screen.</p>
                                </div>

                                <div class="form-actions">
                                    <button type="button" class="btn btn-secondary" id="clear_signature">
                                        <i class="la la-eraser"></i> Clear
                                    </button>
                                    <button type="submit" class="btn btn-primary" id="submit_signature">
                                        <i class="la la-check-square-o"></i> Confirm &amp; Save Signature
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <script type="text/javascript">
        (function () {
            var canvas = document.getElementById('signature_pad');
            var ctx = canvas.getContext('2d');
            var drawing = false;
            var hasSignature = false;

            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
            ctx.strokeStyle = '#000';

            function getPos(e) {
                var rect = canvas.getBoundingClientRect();
                var scaleX = canvas.width / rect.width;
                var scaleY = canvas.height / rect.height;
                var clientX = e.touches ? e.touches[0].clientX : e.clientX;
                var clientY = e.touches ? e.touches[0].clientY : e.clientY;
                return {
                    x: (clientX - rect.left) * scaleX,
                    y: (clientY - rect.top) * scaleY
                };
            }

            function start(e) {
                e.preventDefault();
                drawing = true;
                hasSignature = true;
                var p = getPos(e);
                ctx.beginPath();
                ctx.moveTo(p.x, p.y);
            }

            function move(e) {
                if (!drawing) return;
                e.preventDefault();
                var p = getPos(e);
                ctx.lineTo(p.x, p.y);
                ctx.stroke();
            }

            function end(e) {
                drawing = false;
            }

            canvas.addEventListener('mousedown', start);
            canvas.addEventListener('mousemove', move);
            window.addEventListener('mouseup', end);
            canvas.addEventListener('touchstart', start);
            canvas.addEventListener('touchmove', move);
            canvas.addEventListener('touchend', end);

            document.getElementById('clear_signature').addEventListener('click', function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                hasSignature = false;
            });

            document.getElementById('esign_form').addEventListener('submit', function (e) {
                if (!hasSignature) {
                    e.preventDefault();
                    alert('Please provide the signature before saving.');
                    return false;
                }
                document.getElementById('signature_input').value = canvas.toDataURL('image/png');
            });
        })();
    </script>
@endsection