@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تفاصيل طلب الموافقة #{{ $workflowRequest->id }}</h1>
        <nav class="breadcrumb">
            <a href="{{ url('/') }}">الرئيسية</a>
            <span>/</span>
            <a href="{{ route('workflow.inbox') }}">صندوق الوارد</a>
            <span>/</span>
            <span>طلب #{{ $workflowRequest->id }}</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="form-row">
            <div class="form-group">
                <label class="form-label">الوحدة</label>
                <div>{{ $workflowRequest->module_name }}</div>
            </div>
            <div class="form-group">
                <label class="form-label">مقدم الطلب</label>
                <div>{{ $workflowRequest->creator->name ?? '—' }}</div>
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ الإنشاء</label>
                <div>{{ $workflowRequest->created_at->format('Y-m-d H:i') }}</div>
            </div>
            <div class="form-group">
                <label class="form-label">الحالة</label>
                <div>
                    @if ($workflowRequest->status === 'approved')
                        <span class="badge badge-success">معتمد</span>
                    @elseif ($workflowRequest->status === 'rejected')
                        <span class="badge badge-danger">مرفوض</span>
                    @elseif ($workflowRequest->status === 'returned')
                        <span class="badge badge-secondary">معاد</span>
                    @else
                        <span class="badge badge-warning">قيد المعالجة</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>مسار الاعتماد</h2>
    </div>
    <div class="card-body">
        <div class="wf-timeline">
            @foreach ($workflowRequest->approvals as $approval)
                <div class="wf-timeline-item">
                    <div class="wf-timeline-icon
                        @if ($approval->action === 'approved') wf-icon-success
                        @elseif ($approval->action === 'rejected') wf-icon-danger
                        @elseif ($approval->action === 'returned') wf-icon-secondary
                        @else wf-icon-pending
                        @endif">
                        @if ($approval->action === 'approved')
                            <i class="fa-solid fa-check"></i>
                        @elseif ($approval->action === 'rejected')
                            <i class="fa-solid fa-xmark"></i>
                        @elseif ($approval->action === 'returned')
                            <i class="fa-solid fa-rotate-left"></i>
                        @else
                            <i class="fa-solid fa-clock"></i>
                        @endif
                    </div>
                    <div class="wf-timeline-content">
                        <strong>المستوى {{ $approval->level_number }}: {{ $approval->level_name }}</strong>
                        <div style="color:var(--text-muted,#888);font-size:13px;">
                            {{ $approval->approver->name ?? 'لم يتم التعيين' }}
                        </div>
                        @if ($approval->comments)
                            <div style="margin-top:6px;">{{ $approval->comments }}</div>
                        @endif
                        @if ($approval->signature_data)
                            <div style="margin-top:6px;">
                                <img src="{{ $approval->signature_data }}" alt="توقيع" style="max-height:60px;border:1px solid var(--border-color,#e2e5ea);border-radius:4px;background:#fff;">
                            </div>
                        @endif
                        @if ($approval->approved_at)
                            <div style="color:var(--text-muted,#888);font-size:12px;margin-top:4px;">
                                {{ $approval->approved_at->format('Y-m-d H:i') }}
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Export / Print buttons --}}
@if ($moduleConfig)
<div class="card">
    <div class="card-header">
        <h2>تصدير وطباعة</h2>
    </div>
    <div class="card-body" style="display:flex;gap:10px;flex-wrap:wrap;">
        @if ($moduleConfig->allow_export_pdf)
            <a href="{{ route('workflow.request.export.pdf', $workflowRequest->id) }}" class="btn btn-secondary btn-sm" target="_blank">
                <i class="fa-solid fa-file-pdf"></i> تصدير PDF
            </a>
        @endif
        @if ($moduleConfig->allow_export_word)
            <a href="{{ route('workflow.request.export.word', $workflowRequest->id) }}" class="btn btn-secondary btn-sm">
                <i class="fa-solid fa-file-word"></i> تصدير Word
            </a>
        @endif
        @if ($moduleConfig->allow_export_excel)
            <a href="{{ route('workflow.request.export.excel', $workflowRequest->id) }}" class="btn btn-secondary btn-sm">
                <i class="fa-solid fa-file-excel"></i> تصدير Excel
            </a>
        @endif
        @if ($moduleConfig->allow_print)
            <a href="{{ route('workflow.request.print', $workflowRequest->id) }}" class="btn btn-secondary btn-sm" target="_blank">
                <i class="fa-solid fa-print"></i> طباعة
            </a>
        @endif
    </div>
</div>
@endif

@if ($currentApproval && is_null($currentApproval->action) && in_array($workflowRequest->status, ['pending', 'in_review', 'returned']))
<div class="card">
    <div class="card-header">
        <h2>إجراء الاعتماد - المستوى {{ $workflowRequest->current_level }}</h2>
    </div>
    <div class="card-body">
        @php
            $sigMode = $moduleConfig ? $moduleConfig->signature_mode : 'button_only';
        @endphp

        @if (in_array($sigMode, ['drawn_only', 'both']))
        <div class="form-group">
            <label class="form-label">التوقيع الإلكتروني (رسم)</label>
            <div class="wf-signature-wrap">
                <canvas id="signatureCanvas" width="500" height="180"></canvas>
            </div>
            <div style="margin-top:8px;display:flex;gap:8px;">
                <button type="button" class="btn btn-secondary btn-sm" id="clearSignatureBtn">
                    <i class="fa-solid fa-eraser"></i> مسح
                </button>
                <span id="signatureStatus" style="align-self:center;color:var(--text-muted,#888);font-size:13px;"></span>
            </div>
            <input type="hidden" id="signatureDataInput" value="">
        </div>
        @endif

        <form method="POST" action="{{ route('workflow.request.approve', $workflowRequest->id) }}" id="approveForm">
            @csrf
            <input type="hidden" name="signature_data" id="approveSignatureData">
            <input type="hidden" name="signature_type" id="approveSignatureType" value="{{ in_array($sigMode, ['drawn_only', 'both']) ? 'drawn' : 'button' }}">
            <div class="form-group">
                <label class="form-label">ملاحظات (اختياري)</label>
                <textarea name="comments" class="form-control" rows="3"></textarea>
            </div>
            @if ($sigMode === 'none')
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-check"></i> اعتماد
                </button>
            @elseif ($sigMode === 'button_only')
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-signature"></i> اعتماد بالتوقيع
                </button>
            @elseif ($sigMode === 'drawn_only')
                <button type="submit" class="btn btn-primary" id="approveWithDrawnBtn">
                    <i class="fa-solid fa-signature"></i> اعتماد بالتوقيع المرسوم
                </button>
            @else
                <button type="submit" class="btn btn-primary" id="approveWithDrawnBtn">
                    <i class="fa-solid fa-signature"></i> اعتماد بالتوقيع
                </button>
            @endif
        </form>

        <div class="form-row" style="margin-top:16px;">
            <form method="POST" action="{{ route('workflow.request.reject', $workflowRequest->id) }}" style="flex:1;">
                @csrf
                <div class="form-group">
                    <label class="form-label">سبب الرفض</label>
                    <textarea name="comments" class="form-control" rows="2" required></textarea>
                </div>
                <button type="submit" class="btn btn-secondary" style="background:#e03131;border-color:#e03131;color:#fff;">
                    <i class="fa-solid fa-xmark"></i> رفض
                </button>
            </form>

            <form method="POST" action="{{ route('workflow.request.return', $workflowRequest->id) }}" style="flex:1;">
                @csrf
                <div class="form-group">
                    <label class="form-label">إرجاع إلى المستوى</label>
                    <select name="return_to_level" class="form-control">
                        @for ($i = 1; $i < $workflowRequest->current_level; $i++)
                            <option value="{{ $i }}">المستوى {{ $i }}</option>
                        @endfor
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">سبب الإرجاع</label>
                    <textarea name="comments" class="form-control" rows="2" required></textarea>
                </div>
                <button type="submit" class="btn btn-secondary">
                    <i class="fa-solid fa-rotate-left"></i> إرجاع
                </button>
            </form>
        </div>
    </div>
</div>
@endif

<style>
.wf-timeline { position: relative; padding-inline-start: 32px; }
.wf-timeline-item { position: relative; padding-bottom: 24px; }
.wf-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    right: -32px;
    top: 28px;
    bottom: -8px;
    width: 2px;
    background: var(--border-color, #e2e5ea);
}
.wf-timeline-icon {
    position: absolute;
    right: -44px;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}
.wf-icon-success { background: #2f9e44; }
.wf-icon-danger { background: #e03131; }
.wf-icon-secondary { background: #868e96; }
.wf-icon-pending { background: #f2b705; color: #5c4400; }
.wf-timeline-content {
    background: var(--bg-subtle, #f8f9fb);
    border: 1px solid var(--border-color, #e2e5ea);
    border-radius: 8px;
    padding: 12px 14px;
}
.wf-signature-wrap {
    background: #fff;
    border: 2px dashed var(--border-color, #ccc);
    border-radius: 8px;
    display: inline-block;
    line-height: 0;
}
#signatureCanvas {
    touch-action: none;
    cursor: crosshair;
    max-width: 100%;
}
</style>

@push('scripts')
<script>
(function () {
    var canvas = document.getElementById('signatureCanvas');
    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(evt) {
        if (!drawing) { return; }
        drawing = false;
        syncSignature();
    }

    function syncSignature() {
        var dataUrl = hasDrawn ? canvas.toDataURL('image/png') : '';
        var input = document.getElementById('signatureDataInput');
        if (input) { input.value = dataUrl; }
        var approveData = document.getElementById('approveSignatureData');
        var approveType = document.getElementById('approveSignatureType');
        if (approveData) { approveData.value = dataUrl; }
        if (approveType) { approveType.value = hasDrawn ? 'drawn' : 'button'; }
        var status = document.getElementById('signatureStatus');
        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('clearSignatureBtn');
    if (clearBtn) {
        clearBtn.addEventListener('click', function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            hasDrawn = false;
            syncSignature();
        });
    }

    var approveForm = document.getElementById('approveForm');
    if (approveForm) {
        approveForm.addEventListener('submit', function (evt) {
            syncSignature();
            var approveType = document.getElementById('approveSignatureType');
            // If drawn signature is required, validate it was drawn
            if (approveType && (approveType.value === 'drawn') && !hasDrawn) {
                evt.preventDefault();
                alert('الرجاء رسم التوقيع أولاً');
                return false;
            }
        });
    }
})();
</script>
@endpush
@endsection