@extends('layouts.app')
@section('title', 'Signature')

@push('stylesheets')
<style>
    .signature-pad-wrap {
        border: 1px solid #dee2e6;
        border-radius: 6px;
        background: #f8f9fa;
        padding: 12px;
        max-width: 640px;
    }
    .signature-pad-wrap canvas.signature-canvas {
        display: block;
        width: 100%;
        height: 220px;
        touch-action: none;
        cursor: crosshair;
        background: #fff;
        border: 1px dashed #adb5bd;
        border-radius: 4px;
    }
    .signature-preview-img {
        max-width: 280px;
        height: auto;
        border: 1px solid #dee2e6;
        background: #fff;
    }
    .sig-history-badge {
        display: inline-block;
        padding: 2px 8px;
        font-size: 0.7rem;
        font-weight: 600;
        border-radius: 4px;
        background: #e8f5e9;
        color: #2e7d32;
    }
    .sig-choice-option {
        border: 2px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        background: #fff;
    }
    .sig-choice-option:hover {
        border-color: #1565c0;
        background: #e3f2fd;
    }
    .sig-choice-option.active {
        border-color: #1565c0;
        background: #bbdefb;
    }
    .sig-choice-option i {
        font-size: 2rem;
        margin-bottom: 8px;
        display: block;
    }
    .sig-new-section { display: none; }
    .sig-mode-btn { min-width: 100px; }
    .sig-mode-btn.active { background: #1565c0; color: #fff; border-color: #0d47a1; }
</style>
@endpush

@section('contents')
<div class="content">
    <div class="container-fluid py-3">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title mb-0">Digital Signature</h3>
            </div>
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0 pl-3">
                            @foreach ($errors->all() as $err)
                                <li>{{ $err }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @php
                    $lastSig = \App\Models\UserSignature::where('user_id', $user->id)->orderByDesc('created_at')->first();
                    if (! $lastSig) {
                        $effectiveUrl = user_effective_signature_url($user);
                        if ($effectiveUrl !== '') {
                            $lastSig = (object) [
                                'signature_url' => $effectiveUrl,
                                'type' => 'drawn',
                                'created_at' => null,
                            ];
                        }
                    }
                @endphp
                @if ($lastSig)
                    <div class="alert alert-info d-flex align-items-center mb-3">
                        <i class="fas fa-history mr-2"></i>
                        <span>You have a saved signature
                        @if($lastSig->created_at)
                            from <strong>{{ $lastSig->created_at->format('M d, Y h:i A') }}</strong>
                            <span class="sig-history-badge ml-2">{{ ucfirst($lastSig->type) }}</span>
                        @else
                            <span class="sig-history-badge ml-2">{{ ucfirst($lastSig->type) }}</span>
                        @endif
                        </span>
                    </div>
                @endif

                <form id="signaturePadForm" method="post" action="{{ route('signature.store') }}" autocomplete="off">
                    @csrf
                    <input type="hidden" name="signature_png" id="signature_png" value="">
                    <input type="hidden" name="use_saved" id="use_saved_sig" value="0">

                    <div id="sigChoiceSection" class="mb-4">
                        @if ($lastSig)
                            <h5 class="mb-3">Choose signature option:</h5>
                            <div class="row mb-3">
                                <div class="col-md-6 mb-2">
                                    <div class="sig-choice-option" id="sigChoiceUseLast" data-choice="use_last">
                                        <i class="fas fa-check-circle text-success"></i>
                                        <strong>Use Last Saved Signature</strong>
                                        <div class="mt-2">
                                            <img src="{{ $lastSig->signature_url }}" alt="Last saved" style="max-height: 80px; max-width: 100%; object-fit: contain; border: 1px solid #dee2e6; padding: 4px; background: #fff; border-radius: 4px;">
                                        </div>
                                        <small class="text-muted d-block mt-1">Saved {{ $lastSig->created_at ? $lastSig->created_at->diffForHumans() : 'previously' }}</small>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="sig-choice-option active" id="sigChoiceAddNew" data-choice="add_new">
                                        <i class="fas fa-pen-fancy text-primary"></i>
                                        <strong>Add New Signature</strong>
                                        <div class="mt-2">
                                            <small class="text-muted">Draw or upload a new signature</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div id="sigUseLastSection" class="sig-new-section" style="display: none;">
                            <div class="text-center mb-3">
                                <p class="text-muted">Your last saved signature will be used:</p>
                                <div class="border rounded p-3 bg-white d-inline-block">
                                    <img id="sigUseLastPreview" src="{{ $lastSig ? $lastSig->signature_url : '' }}" alt="Last saved" style="max-height: 100px; object-fit: contain;">
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary btn-lg" id="sigUseLastConfirmBtn">
                                <i class="fas fa-check mr-1"></i> Confirm and Use This Signature
                            </button>
                        </div>

                        <div id="sigAddNewSection" class="{{ $lastSig ? 'sig-new-section' : '' }}" style="{{ $lastSig ? 'display:none;' : '' }}">
                            <h5 class="mb-3">Create new signature:</h5>
                            <div class="mb-3">
                                <button type="button" class="btn btn-outline-primary sig-mode-btn active" id="sigBtnDraw"><i class="fas fa-pen mr-1"></i> Draw</button>
                                <button type="button" class="btn btn-outline-primary sig-mode-btn" id="sigBtnUpload"><i class="fas fa-upload mr-1"></i> Upload</button>
                            </div>

                            <div id="sigDrawSection">
                                <div class="signature-pad-wrap mb-3">
                                    <canvas class="signature-canvas" id="signatureCanvas" width="600" height="220" aria-label="Signature drawing area"></canvas>
                                </div>
                                <button type="button" class="btn btn-outline-secondary" id="signatureClearBtn">Clear</button>
                            </div>

                            <div id="sigUploadSection" style="display:none;">
                                <label for="sigFileInput" class="small d-block mb-1">Select a PNG or JPEG file.</label>
                                <input type="file" class="form-control-file form-control-sm" id="sigFileInput" accept="image/png,image/jpeg,.png,.jpg,.jpeg" autocomplete="off">
                                <div id="sigUploadPreviewWrap" class="mt-2" style="display:none;">
                                    <span class="small text-muted">Preview:</span>
                                    <img src="" alt="" id="sigUploadPreview" class="signature-preview-img border bg-white p-1 rounded d-block mt-1" style="max-height: 90px; max-width: 100%; object-fit: contain;">
                                </div>
                            </div>

                            <div class="mt-3">
                                <button type="submit" class="btn btn-primary btn-lg" id="sigSaveBtn">
                                    <i class="fas fa-save mr-1"></i> Save New Signature
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <hr>
                <h5 class="font-weight-bold">Saved signature</h5>
                @php
                    $sigUrl = user_effective_signature_url($user);
                @endphp
                @if ($sigUrl !== '')
                    <img src="{{ $sigUrl }}" alt="Signature" class="signature-preview-img mb-2">
                    <p class="mb-0">
                        <a class="btn btn-sm btn-outline-secondary" href="{{ route('signature.preview-pdf') }}" target="_blank" rel="noopener">Open PDF preview</a>
                    </p>
                @else
                    <p class="text-muted mb-0">No signature on file yet.</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script>
(function() {
    var canvas = document.getElementById('signatureCanvas');
    if (!canvas || typeof SignaturePad === 'undefined') return;
    var signaturePad = null;

    function cssWidth() {
        var wrap = canvas.closest('.signature-pad-wrap');
        var w = wrap ? wrap.clientWidth - 24 : canvas.offsetWidth;
        return Math.max(Math.floor(w), 280);
    }

    function resizeCanvas() {
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        var w = cssWidth();
        var h = 220;
        canvas.width = Math.floor(w * ratio);
        canvas.height = Math.floor(h * ratio);
        var ctx = canvas.getContext('2d');
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.scale(ratio, ratio);
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
    }

    function initPad() {
        resizeCanvas();
        signaturePad = new SignaturePad(canvas, {
            minWidth: 0.8,
            maxWidth: 2.6,
            penColor: 'rgb(15, 23, 42)',
            backgroundColor: 'rgba(255,255,255,0)'
        });
    }

    initPad();

    window.addEventListener('resize', function() {
        if (!signaturePad) return;
        var data = signaturePad.toData();
        resizeCanvas();
        signaturePad.clear();
        signaturePad.fromData(data);
    });

    document.getElementById('signatureClearBtn').addEventListener('click', function() {
        if (signaturePad) signaturePad.clear();
    });

    var sigUploadDataUrl = '';

    document.getElementById('sigBtnDraw').addEventListener('click', function() {
        this.classList.add('active');
        document.getElementById('sigBtnUpload').classList.remove('active');
        document.getElementById('sigDrawSection').style.display = '';
        document.getElementById('sigUploadSection').style.display = 'none';
        sigUploadDataUrl = '';
        initPad();
    });

    document.getElementById('sigBtnUpload').addEventListener('click', function() {
        this.classList.add('active');
        document.getElementById('sigBtnDraw').classList.remove('active');
        document.getElementById('sigDrawSection').style.display = 'none';
        document.getElementById('sigUploadSection').style.display = '';
        if (signaturePad) signaturePad.clear();
    });

    document.getElementById('sigFileInput').addEventListener('change', function() {
        var f = this.files && this.files[0];
        if (!f) { sigUploadDataUrl = ''; return; }
        document.getElementById('sigBtnUpload').click();
        var reader = new FileReader();
        reader.onload = function() {
            var img = new Image();
            img.onload = function() {
                var w = 400, h = 140, c = document.createElement('canvas');
                c.width = w; c.height = h;
                var ctx = c.getContext('2d');
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, w, h);
                var iw = img.naturalWidth || img.width;
                var ih = img.naturalHeight || img.height;
                if (iw < 1 || ih < 1) return;
                var scale = Math.min((w - 8) / iw, (h - 8) / ih, 1);
                var dw = Math.floor(iw * scale), dh = Math.floor(ih * scale);
                var dx = Math.floor((w - dw) / 2), dy = Math.floor((h - dh) / 2);
                ctx.drawImage(img, dx, dy, dw, dh);
                sigUploadDataUrl = c.toDataURL('image/png');
                var prevImg = document.getElementById('sigUploadPreview');
                prevImg.src = sigUploadDataUrl;
                document.getElementById('sigUploadPreviewWrap').style.display = '';
            };
            img.src = reader.result;
        };
        reader.readAsDataURL(f);
    });

    document.getElementById('signaturePadForm').addEventListener('submit', function(e) {
        var useSaved = document.getElementById('use_saved_sig').value;
        if (useSaved === '1') return;

        if (sigUploadDataUrl) {
            document.getElementById('signature_png').value = sigUploadDataUrl;
            return;
        }
        if (signaturePad && !signaturePad.isEmpty()) {
            document.getElementById('signature_png').value = signaturePad.toDataURL('image/png');
            return;
        }
        e.preventDefault();
        if (typeof Swal !== 'undefined') {
            Swal.fire({ icon: 'warning', title: 'Signature required', text: 'Please draw or upload a signature before saving.', confirmButtonText: 'OK' });
        } else {
            alert('Please draw or upload a signature before saving.');
        }
    });

    var lastChoice = document.getElementById('sigChoiceUseLast');
    var newChoice = document.getElementById('sigChoiceAddNew');
    var lastSection = document.getElementById('sigUseLastSection');
    var newSection = document.getElementById('sigAddNewSection');

    if (lastChoice) {
        lastChoice.addEventListener('click', function() {
            lastChoice.classList.add('active');
            newChoice.classList.remove('active');
            lastSection.style.display = '';
            newSection.style.display = 'none';
        });
        newChoice.addEventListener('click', function() {
            newChoice.classList.add('active');
            lastChoice.classList.remove('active');
            newSection.style.display = '';
            lastSection.style.display = 'none';
        });
    }

    var useLastBtn = document.getElementById('sigUseLastConfirmBtn');
    if (useLastBtn) {
        useLastBtn.addEventListener('click', function() {
            document.getElementById('use_saved_sig').value = '1';
            document.getElementById('signaturePadForm').submit();
        });
    }
})();
</script>
@endpush