@php
// เนื่องจาก Controller ส่งมาเป็น Collection (จาก ->get()) เราต้องดึงตัวแรกออกมาใช้งาน
if ($signature instanceof \Illuminate\Support\Collection) {
    $signature = $signature->first();
}

if (empty($signature)) {
    // กรณีสร้างใหม่ (Insert) - กำหนดค่าว่างเริ่มต้น
    $signature_id = '';
    $signature_who = '';
    // $signature_topic = ''; 
    // $signature_purpose = ''; 
    $signature_picture = ''; 
     
} else {
    // กรณีแก้ไข (Update) - ดึงค่าจาก Object $signature
    $signature_id = $signature->signature_id;
    $signature_who = $signature->signature_who;
    // $signature_topic = $signature->signature_topic;
    // $signature_purpose = $signature->signature_purpose;
    $signature_picture = $signature->signature_picture;
   
}

 $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; }
    .label-sub-purple { color: #6f42c1 !important; font-weight: 600; font-size: 0.85rem; }
    .form-control-custom { height: 40px; font-size: 0.9rem; border-radius: 6px; }
    .custom-hr { border-top: 1px solid #edf2f7; margin: 1.5rem 0; }
    .table-header-bg { background-color: #f8f9fa; border-bottom: 2px solid #343f52; padding: 10px; font-weight: 700; color: #60697b; }
    .btn-add-service { background-color: #f3effb; color: #6f42c1; border: 1px dashed #6f42c1; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; }
    .btn-add-service:hover { background-color: #6f42c1; color: #fff; }
    .sub-item-row { padding-left: 20px; }
    .remove-btn { color: #d90429; cursor: pointer; font-size: 1.2rem; line-height: 40px; }
    .btn-sync { padding: 2px 8px; font-size: 0.7rem; vertical-align: middle; margin-left: 5px; }
    .datepicker table tr td.active { background-color: #343f52 !important; border-color: #343f52 !important; }
    .input-group-text { border-color: #cbd5e0; background-color: #f8f9fa; cursor: pointer; }
</style>
<style>
    .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')
{{-- @include('layouts.header') --}}

{{-- <div class="w-full bg-light border-bottom py-3" style="background-color: #f8f9fa;">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 flex-nowrap" style="font-size: 14px; background: transparent; padding: 0;">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}" class="text-muted text-decoration-none hover:text-dark">Home</a>
                </li>
                <li class="breadcrumb-item active text-dark fw-bold" aria-current="page">
                    <a href="{{ url('/signature_list') }}" class="text-muted text-decoration-none hover:text-dark">Signature List</a>
                </li>
                <li class="breadcrumb-item active text-dark fw-bold" aria-current="page">
                    Signature Editor
                </li>
            </ol>
        </nav>
    </div>
</div> --}}

<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() }}
                            
                            <input type="hidden" id="signature_id" name="signature_id" value="{{ $signature_id }}">

                            {{-- <div class="form-group mb-5">
                                <label class="label-main">Topic / Purpose</label>
                                <div class="d-flex gap-4 flex-wrap mb-3">
                                   <div class="form-check">
                                        <input class="form-check-input topic-radio" type="radio" name="signature_topic" id="topic_approve" value="Approve" {{ $signature_topic == 'Approve' ? 'checked' : '' }} required>
                                        <label class="form-check-label" for="topic_approve">Approve</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input topic-radio" type="radio" name="signature_topic" id="topic_reject" value="Reject" {{ $signature_topic == 'Reject' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="topic_reject">Reject</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input topic-radio" type="radio" name="signature_topic" id="topic_other" value="Other" {{ $signature_topic == 'Other' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="topic_other">Other</label>
                                    </div>
                                </div>

                                <div id="other_purpose_wrapper" style="{{ $signature_topic == 'Other' ? '' : 'display: none;' }}">
                                    <label class="label-sub-purple">Specify Objective</label>
                                    <input type="text" name="signature_purpose" id="other_remark" class="form-control form-control-custom input-custom-black" value="{{ $signature_purpose }}" placeholder="Enter purpose...">
                                </div>
                            </div> --}}

                            <div class="form-group mb-5">
                                <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>
                                <input type="hidden" name="signature_picture" id="signature_picture">
                            </div>


                            <div class="text-center mt-3">
                                <span class="text-muted" style="font-size:0.85rem;">— หรือ —</span>
                            </div>
                            <div class="mt-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 ผลลัพธ์ที่ AI crop มาให้ --}}
                            <div id="sig_scan_result" style="display:none;" class="mt-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" 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" 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>
                            <input type="hidden" name="sig_save_path" id="sig_save_path">



                           

                            <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>

{{-- @include('layouts.footer') --}}
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.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() {
    const canvas = document.getElementById('signature-pad');
    const signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        penColor: 'rgb(0, 0, 0)' // เริ่มต้นที่สีดำ
    });

    // 1. จัดการเรื่องขนาด Canvas และรูปเดิมจาก DB
    const hasExistingImage = "{{ !empty($signature_picture) ? 'true' : 'false' }}";

    function drawOldSignature() {
        @if(!empty($signature_picture))
            const oldSignatureUrl = "{{ route('signature.view', ['filename' => basename($signature_picture)]) }}";
            const img = new Image();
            img.src = oldSignatureUrl;
            img.onload = function() {
                const ctx = canvas.getContext('2d');
                // วาดรูปเดิมลงไป
                ctx.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(); // วาดรูปเดิมกลับมาหลัง resize
    }

    window.onresize = resizeCanvas;
    resizeCanvas();

    // 2. Logic การเลือกสี (Color Switcher) - **เพิ่มส่วนนี้เพื่อให้จุดสีคลิกได้**
    $('.color-option').on('click', function() {
        const newColor = $(this).data('color');
        signaturePad.penColor = newColor;

        // Visual Feedback: ขยายจุดที่เลือก
        $('.color-option').css({ 'transform': 'scale(1)', 'border': '1px solid #ddd' });
        $(this).css({ 'transform': 'scale(1.3)', 'border': '2px solid #3f78e0' });
    });

    // 3. Logic สำหรับ Radio Button (Topic)
    $('.topic-radio').on('change', function() {
        const selectedTopic = $(this).val();
        
        // ปลดล็อคให้เลือกสีได้ตลอดเวลา
        $('#color-selector-wrapper').css({ 'pointer-events': 'auto', 'opacity': '1' });

        if (selectedTopic === 'Other') {
            $('#other_purpose_wrapper').slideDown();
            $('#other_remark').attr('required', true);
            // ถ้าเลือก Other ให้ Default เป็นสีน้ำเงิน (แต่ผู้ใช้เปลี่ยนเองได้)
            $('.color-option[data-color="#0044cc"]').click();
        } else {
            $('#other_purpose_wrapper').slideUp();
            $('#other_remark').attr('required', false).val('');
            
            // ตั้งสีตามเงื่อนไข (Approve = น้ำเงิน, Reject = ดำ/แดง)
            if (selectedTopic === 'Approve') {
                $('.color-option[data-color="#0044cc"]').click();
            } else {
                $('.color-option[data-color="#000"]').click();
            }
        }
    });

    // 4. ปุ่มล้างลายเซ็น (Clear)
    $('#clear').on('click', function() {
        signaturePad.clear();
    });

    // 5. การ Submit Form
    $('form').on('submit', function(e) {
        const isPadEmpty = signaturePad.isEmpty();

        if (isPadEmpty && hasExistingImage === 'false') {
            alert("กรุณาเซ็นชื่อก่อนบันทึก");
            e.preventDefault();
        } else if (!isPadEmpty) {
            // ถ้ามีการเซ็นใหม่ ให้ส่งข้อมูล Base64 ไป
            const dataURL = signaturePad.toDataURL();
            $('#signature_picture').val(dataURL);
        } else {
            // ถ้าไม่ได้เซ็นใหม่แต่มีรูปเดิมอยู่แล้ว ไม่ต้องส่งค่าไป (Controller จะจัดการเอง)
            $('#signature_picture').val('');
        }
    });
});
</script>

<script>
    $('#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).text('กำลังสแกน...').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').val(res.save_path);
                $('#sig_scan_result').slideDown();
            } else {
                alert('เกิดข้อผิดพลาด: ' + res.message);
            }
        },
        error: function() {
            alert('ไม่สามารถเชื่อมต่อ Server ได้');
        },
        complete: function() {
            $('#btn_scan_sig').text('สแกนลายเซ็น').prop('disabled', false);
        }
    });
});

// กดใช้ลายเซ็นที่สแกนได้
$('#btn_use_scanned').on('click', function() {
    const savePath = $('#sig_save_path').val();
    const previewUrl = $('#sig_preview_img').attr('src');

    // วาดรูปที่ crop ได้ลงบน canvas เดิม
    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);
    };

    // ส่ง path ที่บันทึกไปแล้วให้ Controller รู้ว่าไม่ต้อง save ซ้ำ
    $('#signature_picture').val('USE_SCANNED:' + savePath);

    alert('ใช้ลายเซ็นจากการสแกนแล้ว กดปุ่ม Save Signature เพื่อบันทึก');
});

// สแกนใหม่
$('#btn_rescan').on('click', function() {
    $('#sig_scan_result').slideUp();
    $('#sig_import_file').val('');
    $('#signature_picture').val('');
});

console.log($('#signature_picture').val());
console.log($('#signature_type_input').val());

</script>

@endsection