@extends('layouts.app')
@section('title', 'تفاصيل التوقيع')
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ $eSignature->document_title }}</h1>
        <p class="page-subtitle">
            @php $dtl = ['contract'=>'عقد','offer_letter'=>'عرض وظيفي','policy'=>'سياسة','nda'=>'سرية','other'=>'أخرى']; @endphp
            {{ $dtl[$eSignature->document_type] ?? $eSignature->document_type }}
            — {{ $eSignature->signer->first_name ?? '' }} {{ $eSignature->signer->last_name ?? '' }}
        </p>
    </div>
</div>

<div class="card">
    <div class="card-header"><h3>تفاصيل المستند</h3></div>
    <div class="card-body">
        <div class="detail-grid">
            <div class="detail-item"><span>الحالة</span>
                @php $sl = ['pending'=>'بانتظار التوقيع','signed'=>'موقّع','declined'=>'مرفوض','expired'=>'منتهي']; @endphp
                <strong>{{ $sl[$eSignature->status] ?? '' }}</strong>
            </div>
            <div class="detail-item"><span>طُلب بواسطة</span><strong>{{ $eSignature->requester->name ?? '' }}</strong></div>
            <div class="detail-item"><span>تاريخ الطلب</span><strong>{{ $eSignature->created_at->format('Y-m-d H:i') }}</strong></div>
            @if($eSignature->signed_at)
            <div class="detail-item"><span>تاريخ التوقيع</span><strong>{{ $eSignature->signed_at->format('Y-m-d H:i') }}</strong></div>
            <div class="detail-item"><span>IP</span><strong>{{ $eSignature->ip_address }}</strong></div>
            @endif
        </div>
    </div>
</div>

@if($eSignature->status === 'signed' && $eSignature->signature_data)
<div class="card">
    <div class="card-header"><h3>التوقيع</h3></div>
    <div class="card-body" style="text-align:center">
        <img src="{{ $eSignature->signature_data }}" alt="التوقيع" style="max-width:400px;border:1px solid var(--border);border-radius:var(--radius);padding:10px">
    </div>
</div>
@endif

@if($eSignature->status === 'pending')
<div class="card">
    <div class="card-header"><h3>التوقيع هنا</h3></div>
    <div class="card-body" style="text-align:center">
        <canvas id="signaturePad" width="600" height="200" style="border:2px solid var(--border);border-radius:var(--radius);cursor:crosshair;max-width:100%"></canvas>
        <div style="margin-top:15px;display:flex;gap:10px;justify-content:center">
            <button class="btn btn-secondary" onclick="clearPad()"><i class="fa-solid fa-eraser"></i> مسح</button>
            <form method="POST" action="{{ route('e-signatures.sign', $eSignature) }}" id="signForm" style="display:inline">
                @csrf
                <input type="hidden" name="signature_data" id="signatureData">
                <button type="submit" class="btn btn-success" onclick="document.getElementById('signatureData').value=document.getElementById('signaturePad').toDataURL()"><i class="fa-solid fa-check"></i> توقيع</button>
            </form>
            <form method="POST" action="{{ route('e-signatures.reject', $eSignature) }}" style="display:inline" onsubmit="this.querySelector('[name=reason]').value=prompt('سبب الرفض:')||'';return this.querySelector('[name=reason]').value!==''">
                @csrf
                <input type="hidden" name="reason" value="">
                <button type="submit" class="btn btn-danger"><i class="fa-solid fa-times"></i> رفض</button>
            </form>
        </div>
    </div>
</div>

<script>
const canvas = document.getElementById('signaturePad');
const ctx = canvas.getContext('2d');
let drawing = false;
ctx.strokeStyle = '#1a1a1a';
ctx.lineWidth = 2;
ctx.lineCap = 'round';

canvas.addEventListener('mousedown', e => { drawing = true; ctx.beginPath(); ctx.moveTo(e.offsetX, e.offsetY); });
canvas.addEventListener('mousemove', e => { if (drawing) { ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); } });
canvas.addEventListener('mouseup', () => drawing = false);
canvas.addEventListener('mouseleave', () => drawing = false);

// Touch support
canvas.addEventListener('touchstart', e => { e.preventDefault(); const r = canvas.getBoundingClientRect(); const t = e.touches[0]; drawing = true; ctx.beginPath(); ctx.moveTo(t.clientX - r.left, t.clientY - r.top); });
canvas.addEventListener('touchmove', e => { e.preventDefault(); if (drawing) { const r = canvas.getBoundingClientRect(); const t = e.touches[0]; ctx.lineTo(t.clientX - r.left, t.clientY - r.top); ctx.stroke(); } });
canvas.addEventListener('touchend', () => drawing = false);

function clearPad() { ctx.clearRect(0, 0, canvas.width, canvas.height); }
</script>
@endif
@endsection