@php
if ($signature instanceof \Illuminate\Support\Collection) {
    $signature = $signature->first();
}

if (empty($signature)) {
    $signature_id      = '';
    $signature_who     = '';
    $signature_picture = '';
    $signature_name    = '';
    $signature_position = '';
} else {
    $signature_id       = $signature->signature_id;
    $signature_who      = $signature->signature_who;
    $signature_picture  = $signature->signature_picture;
    $signature_name     = $signature->signature_name ?? '';
    $signature_position = $signature->signature_position ?? '';
}

$breadcrumbs = [
    'Signature List'  => url('/signature_list'),
    'Signature Editor' => url('/signature_getedit')
];
@endphp

@extends('layouts.master')

@section('title')
    Signature Management
@endsection

@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<style>
    .quotation-card { border-radius: 12px; border: 1px solid #d1d9e6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; }
    .label-main { color: #000; font-weight: 700; font-size: 0.9rem; margin-bottom: 5px; display: block; }
    .input-custom-black { color: #000000 !important; font-weight: 600; border-color: #cbd5e0; }
    .input-custom-black:focus { border-color: #3f78e0; color: #000000 !important; box-shadow: none; }
    .form-control-custom { height: 40px; font-size: 0.9rem; border-radius: 6px; }
    .custom-hr { border-top: 1px solid #edf2f7; margin: 1.5rem 0; }
    .signature-wrapper { position: relative; width: 100%; max-width: 500px; margin: 0 auto; border: 1px solid #d1d9e6; border-radius: 8px; background: #fff; }
    .signature-pad { width: 100%; height: 200px; cursor: crosshair; }
    .signature-controls { padding: 10px; border-top: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
    .color-option { width: 20px; height: 20px; border-radius: 50%; display: inline-block; margin: 0 5px; cursor: pointer; border: 1px solid #ddd; }
</style>
@endsection

@section('content')
<section class="wrapper bg-light">
    <div class="container py-10">
        <div class="row">
            <div class="col-lg-12 col-xl-10 mx-auto">
                <div class="mb-4">
                    <h2 style="font-size: 1.3rem; color: #000;">Signature Editor</h2>
                </div>

                <div class="card quotation-card">
                    <div class="card-body p-8 p-lg-10">
                        <form class="contact-form" method="post" action="{{ url('/signature_edit') }}" enctype="multipart/form-data">
                            {{ csrf_field() }}

                            {{-- Hidden fields --}}
                            <input type="hidden" id="signature_id"       name="signature_id"       value="{{ $signature_id }}">
                            <input type="hidden" id="signature_picture"  name="signature_picture"  value="">
                            <input type="hidden" id="signature_type_input" name="signature_type"   value="live">

                            {{-- ===== ส่วนที่ 1: เซ็นสด ===== --}}
                            <div class="form-group mb-4">
                                <label class="label-main text-center">Draw your online signature</label>
                                <div class="signature-wrapper">
                                    <canvas id="signature-pad" class="signature-pad"></canvas>
                                    <div class="signature-controls">
                                        <div class="colors" id="color-selector-wrapper">
                                            <span class="color-option" style="background: #000;"    data-color="#000"></span>
                                            <span class="color-option" style="background: #0044cc;" data-color="#0044cc"></span>
                                        </div>
                                        <button type="button" id="clear" class="btn btn-sm btn-outline-danger">CLEAR</button>
                                    </div>
                                </div>
                            </div>

                            {{-- ===== ส่วนที่ 2: Import จากไฟล์ ===== --}}
                            <div class="text-center my-3">
                                <span class="text-muted" style="font-size:0.85rem;">— หรือ —</span>
                            </div>

                            <div class="mb-3">
                                <label class="label-main">Import ลายเซ็นจากไฟล์ (PDF / รูปภาพ)</label>
                                <div class="d-flex gap-2 align-items-center">
                                    <input type="file" id="sig_import_file" class="form-control form-control-custom"
                                           accept=".jpg,.jpeg,.png,.pdf" style="max-width: 350px;">
                                    <button type="button" id="btn_scan_sig" class="btn btn-outline-primary btn-sm rounded-pill">
                                        <i class="uil uil-search"></i> สแกนลายเซ็น
                                    </button>
                                </div>
                            </div>

                            {{-- Preview ผลลัพธ์จากการสแกน --}}
                            <div id="sig_scan_result" style="display:none;" class="mt-4 mb-4">
                                <div class="card p-4" style="border: 1px dashed #605dba; border-radius: 10px;">
                                    <h6 class="mb-3" style="color:#605dba;">
                                        <i class="uil uil-check-circle me-1"></i>ผลการสแกน
                                    </h6>
                                    <div class="row gy-3">
                                        <div class="col-md-4 text-center">
                                            <label class="label-main">ลายเซ็นที่ตัดออกมา</label>
                                            <img id="sig_preview_img" src="" alt="Signature Preview"
                                                 style="max-width:200px; width:100%; border:1px solid #ddd;
                                                        border-radius:6px; padding:8px; background:#fff;
                                                        display:block; margin:0 auto;">
                                        </div>
                                        <div class="col-md-8">
                                            <div class="mb-3">
                                                <label class="label-main">ชื่อ-นามสกุล (แก้ไขได้)</label>
                                                <input type="text" id="sig_name_input" name="signature_name"
                                                       class="form-control form-control-custom input-custom-black"
                                                       value="{{ $signature_name }}" placeholder="ชื่อผู้ลงนาม">
                                            </div>
                                            <div class="mb-3">
                                                <label class="label-main">ตำแหน่ง (แก้ไขได้)</label>
                                                <input type="text" id="sig_position_input" name="signature_position"
                                                       class="form-control form-control-custom input-custom-black"
                                                       value="{{ $signature_position }}" placeholder="ตำแหน่ง">
                                            </div>
                                            <button type="button" id="btn_use_scanned" class="btn btn-success btn-sm rounded-pill">
                                                <i class="uil uil-check me-1"></i> ใช้ลายเซ็นนี้
                                            </button>
                                            <button type="button" id="btn_rescan" class="btn btn-outline-secondary btn-sm rounded-pill ms-2">
                                                <i class="uil uil-redo me-1"></i> สแกนใหม่
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ===== ปุ่ม Save ===== --}}
                            <div class="text-center mt-10">
                                <button type="submit" class="btn btn-dark rounded-pill px-12 py-2">
                                    <i class="uil uil-save me-1"></i> Save Signature
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>

<script>
$(document).ready(function() {

    // ===== Canvas / SignaturePad =====
    const canvas       = document.getElementById('signature-pad');
    const signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgba(255,255,255,0)',
        penColor: 'rgb(0,0,0)'
    });

    const hasExistingImage = "{{ !empty($signature_picture) ? 'true' : 'false' }}";

    function drawOldSignature() {
        @if(!empty($signature_picture))
            const oldUrl = "{{ route('signature.view', ['filename' => basename($signature_picture)]) }}";
            const img    = new Image();
            img.src      = oldUrl;
            img.onload   = function() {
                canvas.getContext('2d').drawImage(img, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
            };
        @endif
    }

    function resizeCanvas() {
        const ratio   = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width  = canvas.offsetWidth  * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext('2d').scale(ratio, ratio);
        signaturePad.clear();
        drawOldSignature();
    }

    window.onresize = resizeCanvas;
    resizeCanvas();

    // Color picker
    $('.color-option').on('click', function() {
        signaturePad.penColor = $(this).data('color');
        $('.color-option').css({ transform: 'scale(1)', border: '1px solid #ddd' });
        $(this).css({ transform: 'scale(1.3)', border: '2px solid #3f78e0' });
    });

    // Clear canvas
    $('#clear').on('click', function() {
        signaturePad.clear();
        // ถ้ากด clear ให้ reset mode กลับเป็น live
        $('#signature_type_input').val('live');
        $('#signature_picture').val('');
    });

    // ===== ปุ่มสแกนไฟล์ =====
    $('#btn_scan_sig').on('click', function() {
        const file = $('#sig_import_file')[0].files[0];
        if (!file) { alert('กรุณาเลือกไฟล์ก่อน'); return; }

        const fd = new FormData();
        fd.append('document', file);
        fd.append('_token', $('meta[name="csrf-token"]').attr('content'));

        $(this).html('<i class="uil uil-spinner-alt"></i> กำลังสแกน...').prop('disabled', true);

        $.ajax({
            url:         '{{ url("/signature_scan") }}',
            type:        'POST',
            data:        fd,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.success) {
                    $('#sig_preview_img').attr('src', res.preview_url);
                    $('#sig_name_input').val(res.name);
                    $('#sig_position_input').val(res.position);
                    $('#sig_save_path_hidden').val(res.save_path);
                    // บันทึก file type ไว้
                    const ext = file.name.split('.').pop().toLowerCase();
                    $('#sig_file_type_hidden').val(ext === 'pdf' ? 'scan_pdf' : 'scan_image');
                    $('#sig_scan_result').slideDown();
                } else {
                    alert('เกิดข้อผิดพลาด: ' + res.message);
                }
            },
            error: function() {
                alert('ไม่สามารถเชื่อมต่อ Server ได้');
            },
            complete: function() {
                $('#btn_scan_sig').html('<i class="uil uil-search"></i> สแกนลายเซ็น').prop('disabled', false);
            }
        });
    });

    // ===== กดปุ่ม "ใช้ลายเซ็นนี้" =====
    $('#btn_use_scanned').on('click', function() {
        const savePath   = $('#sig_save_path_hidden').val();
        const previewUrl = $('#sig_preview_img').attr('src');
        const sigType    = $('#sig_file_type_hidden').val() || 'scan_image';

        if (!savePath) { alert('ยังไม่มีลายเซ็นที่สแกน'); return; }

        // วาดรูปที่ crop ได้ลงบน canvas เพื่อ preview
        const img  = new Image();
        img.src    = previewUrl;
        img.onload = function() {
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
            ctx.drawImage(img, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
        };

        // ⭐ สำคัญ: set ค่าที่จะส่งไป Controller
        $('#signature_picture').val('USE_SCANNED:' + savePath);
        $('#signature_type_input').val(sigType);

        // เปลี่ยนปุ่มให้รู้ว่าเลือกแล้ว
        $(this).html('<i class="uil uil-check-circle me-1"></i> เลือกแล้ว ✓')
               .removeClass('btn-success').addClass('btn-secondary').prop('disabled', true);
    });

    // ===== ปุ่มสแกนใหม่ =====
    $('#btn_rescan').on('click', function() {
        $('#sig_scan_result').slideUp();
        $('#sig_import_file').val('');
        $('#signature_picture').val('');
        $('#signature_type_input').val('live');
        $('#sig_save_path_hidden').val('');
        $('#btn_use_scanned').html('<i class="uil uil-check me-1"></i> ใช้ลายเซ็นนี้')
                             .removeClass('btn-secondary').addClass('btn-success').prop('disabled', false);
    });

    // ===== Submit Form =====
    $('form').on('submit', function(e) {
        const currentVal  = $('#signature_picture').val();
        const isPadEmpty  = signaturePad.isEmpty();
        const isScanned   = currentVal.startsWith('USE_SCANNED:');

        if (isScanned) {
            // กรณีใช้ลายเซ็นที่สแกน — ค่าถูก set แล้ว ปล่อยผ่าน
            return true;
        } else if (!isPadEmpty) {
            // กรณีเซ็นสดบน canvas
            $('#signature_picture').val(signaturePad.toDataURL());
            $('#signature_type_input').val('live');
        } else if (hasExistingImage === 'true') {
            // ไม่ได้เซ็นใหม่ ไม่ได้สแกนใหม่ แต่มีรูปเดิมอยู่ — ปล่อยผ่าน Controller จัดการเอง
            $('#signature_picture').val('');
        } else {
            alert('กรุณาเซ็นชื่อหรือ Import ไฟล์ลายเซ็นก่อนบันทึก');
            e.preventDefault();
        }
    });

});
</script>

{{-- Hidden fields เพิ่มเติมสำหรับ scan flow --}}
<input type="hidden" id="sig_save_path_hidden" value="">
<input type="hidden" id="sig_file_type_hidden" value="">

@endsection