@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">التوقيع الإلكتروني</h1>
        <nav class="breadcrumb">
            <a href="{{ url('/') }}">الرئيسية</a>
            <span>/</span>
            <a href="{{ route('workflow.signatures') }}">سير العمل</a>
            <span>/</span>
            <span>التوقيعات</span>
        </nav>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if ($errors->any())
    <div class="alert alert-danger">
        <ul style="margin:0;padding-inline-start:18px;">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="card">
    <div class="card-header">
        <h2>رسم توقيع جديد</h2>
    </div>
    <div class="card-body">
        <div class="wf-signature-wrap">
            <canvas id="newSignatureCanvas" width="500" height="180"></canvas>
        </div>
        <div style="margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
            <button type="button" class="btn btn-secondary btn-sm" id="clearNewSignatureBtn">
                <i class="fa-solid fa-eraser"></i> مسح
            </button>
            <span id="newSignatureStatus" style="color:var(--text-muted,#888);font-size:13px;"></span>
        </div>

        <form method="POST" action="{{ route('workflow.signatures.store') }}" id="saveSignatureForm" style="margin-top:16px;">
            @csrf
            <input type="hidden" name="signature_image" id="signatureImageInput">
            <div class="form-row">
                <div class="form-group" style="flex:1;">
                    <label class="form-label">اسم التوقيع</label>
                    <input type="text" name="signature_name" class="form-control" placeholder="مثال: توقيعي الرسمي">
                </div>
                <div class="form-group" style="align-self:flex-end;">
                    <label class="form-label" style="display:flex;align-items:center;gap:6px;">
                        <input type="checkbox" name="is_default" value="1"> تعيين كافتراضي
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary" id="saveSignatureBtn">
                <i class="fa-solid fa-floppy-disk"></i> حفظ التوقيع
            </button>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>توقيعاتي المحفوظة</h2>
    </div>
    <div class="card-body">
        <div style="display:flex;flex-wrap:wrap;gap:16px;">
            @forelse ($signatures as $signature)
                <div style="border:1px solid var(--border-color,#e2e5ea);border-radius:8px;padding:12px;width:260px;">
                    <div style="background:#fff;border-radius:6px;padding:8px;text-align:center;">
                        <img src="{{ $signature->signature_image }}" alt="{{ $signature->signature_name }}" style="max-height:80px;max-width:100%;">
                    </div>
                    <div style="margin-top:8px;display:flex;justify-content:space-between;align-items:center;">
                        <strong>{{ $signature->signature_name ?: 'بدون اسم' }}</strong>
                        @if ($signature->is_default)
                            <span class="badge badge-success">افتراضي</span>
                        @endif
                    </div>
                    <div style="margin-top:10px;display:flex;gap:6px;">
                        @unless ($signature->is_default)
                            <form method="POST" action="{{ route('workflow.signatures.default', $signature->id) }}">
                                @csrf
                                <button type="submit" class="btn btn-secondary btn-sm">
                                    <i class="fa-solid fa-star"></i> جعله افتراضياً
                                </button>
                            </form>
                        @endunless
                        <form method="POST" action="{{ route('workflow.signatures.destroy', $signature->id) }}" onsubmit="return confirm('هل تريد حذف هذا التوقيع؟');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-secondary btn-sm" style="color:#e03131;">
                                <i class="fa-solid fa-trash"></i> حذف
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div style="color:var(--text-muted,#888);padding:16px;">لا توجد توقيعات محفوظة بعد.</div>
            @endforelse
        </div>
    </div>
</div>

<style>
.wf-signature-wrap {
    background: #fff;
    border: 2px dashed var(--border-color, #ccc);
    border-radius: 8px;
    display: inline-block;
    line-height: 0;
}
#newSignatureCanvas {
    touch-action: none;
    cursor: crosshair;
    max-width: 100%;
}
</style>

@push('scripts')
<script>
(function () {
    var canvas = document.getElementById('newSignatureCanvas');
    if (!canvas) { return; }
    var ctx = canvas.getContext('2d');
    var drawing = false;
    var hasDrawn = false;

    ctx.lineWidth = 2.2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.strokeStyle = '#1a1a2e';

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

    function startDraw(evt) {
        evt.preventDefault();
        drawing = true;
        hasDrawn = true;
        var pos = getPos(evt);
        ctx.beginPath();
        ctx.moveTo(pos.x, pos.y);
    }

    function moveDraw(evt) {
        if (!drawing) { return; }
        evt.preventDefault();
        var pos = getPos(evt);
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
    }

    function endDraw() {
        if (!drawing) { return; }
        drawing = false;
        var status = document.getElementById('newSignatureStatus');
        if (status) {
            status.textContent = hasDrawn ? 'تم رسم التوقيع - اضغط حفظ' : '';
        }
    }

    canvas.addEventListener('mousedown', startDraw);
    canvas.addEventListener('mousemove', moveDraw);
    window.addEventListener('mouseup', endDraw);

    canvas.addEventListener('touchstart', startDraw, { passive: false });
    canvas.addEventListener('touchmove', moveDraw, { passive: false });
    canvas.addEventListener('touchend', endDraw);

    var clearBtn = document.getElementById('clearNewSignatureBtn');
    if (clearBtn) {
        clearBtn.addEventListener('click', function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            hasDrawn = false;
            var status = document.getElementById('newSignatureStatus');
            if (status) { status.textContent = ''; }
        });
    }

    var saveForm = document.getElementById('saveSignatureForm');
    if (saveForm) {
        saveForm.addEventListener('submit', function (evt) {
            if (!hasDrawn) {
                evt.preventDefault();
                alert('الرجاء رسم التوقيع أولاً');
                return;
            }
            var input = document.getElementById('signatureImageInput');
            if (input) {
                input.value = canvas.toDataURL('image/png');
            }
        });
    }
})();
</script>
@endpush
@endsection