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

if (empty($signature)) {
    $signature_id       = '';
    $signature_picture  = '';
    $signature_name     = '';
    $signature_position = '';
} else {
    $signature_id       = $signature->signature_id;
    $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/cropperjs/1.5.13/cropper.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: #000 !important; font-weight: 600; border-color: #cbd5e0; }
    .input-custom-black:focus { border-color: #3f78e0; color: #000 !important; box-shadow: none; }
    .form-control-custom { height: 40px; font-size: 0.9rem; border-radius: 6px; }

    /* Tab pills */
    .nav-pills .nav-link { color: #60697b; border: 1px solid #d1d9e6; border-radius: 50px; padding: 6px 18px; font-size: 0.85rem; }
    .nav-pills .nav-link.active { background-color: #605dba; border-color: #605dba; color: #fff; }

    /* Canvas เซ็นสด */
    .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; transition: transform 0.1s; }

    /* Cropper */
    #cropper-wrapper { display: none; }
    #cropper-image { max-width: 100%; display: block; }
    .cropper-container { max-height: 550px !important; }
    .cropper-view-box, .cropper-face { border-radius: 0; }

    /* Zoom toolbar */
    .zoom-toolbar { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px 12px; display: inline-flex; gap: 8px; align-items: center; margin-bottom: 10px; }
    .zoom-toolbar span { font-size: 0.8rem; color: #60697b; font-weight: 600; }

    /* Preview */
    #crop-result-wrapper { display: none; }
    #crop-preview-img { max-width: 220px; border: 1px solid #ddd; border-radius: 6px; padding: 10px; background: repeating-conic-gradient(#e0e0e0 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; display: block; margin: 0 auto; }
</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 id="sig-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 }}">
                            <input type="hidden" id="signature_picture"    name="signature_picture" value="">
                            <input type="hidden" id="signature_type_input" name="signature_type"    value="live">

                            {{-- ===== TAB NAV ===== --}}
                            <ul class="nav nav-pills mb-5">
                                <li class="nav-item">
                                    <button type="button" class="nav-link active" data-tab="live">
                                        <i class="uil uil-pen me-1"></i> เซ็นสด
                                    </button>
                                </li>
                                <li class="nav-item ms-2">
                                    <button type="button" class="nav-link" data-tab="import">
                                        <i class="uil uil-image-upload me-1"></i> Import จากไฟล์
                                    </button>
                                </li>
                            </ul>

                            {{-- ===== TAB 1: เซ็นสด ===== --}}
                            <div id="tab-live">
                                <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">
                                                <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="btn-clear-pad" class="btn btn-sm btn-outline-danger">CLEAR</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ===== TAB 2: Import + Cropper ===== --}}
                            <div id="tab-import" style="display:none;">

                                {{-- Step 1: เลือกไฟล์ --}}
                                <div id="step-upload" class="mb-4">
                                    <label class="label-main">เลือกไฟล์ที่มีลายเซ็น (PDF / รูปภาพ)</label>
                                    <div class="d-flex gap-2 align-items-center flex-wrap">
                                        <input type="file" id="sig_import_file" class="form-control form-control-custom"
                                               accept=".jpg,.jpeg,.png,.pdf" style="max-width:360px;">
                                        <button type="button" id="btn-load-file" class="btn btn-primary btn-sm rounded-pill">
                                            <i class="uil uil-upload me-1"></i> โหลดไฟล์
                                        </button>
                                    </div>
                                    <div id="load-status" class="mt-2 text-muted" style="font-size:0.85rem; display:none;">
                                        <i class="uil uil-spinner-alt me-1"></i> กำลังแปลงไฟล์ กรุณารอสักครู่...
                                    </div>
                                </div>

                                {{-- Step 2: Cropper --}}
                                <div id="cropper-wrapper" class="mb-4">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <span class="label-main mb-0">
                                            ลากเลือกพื้นที่ลายเซ็น แล้วกด <strong style="color:#605dba;">"Crop ลายเซ็น"</strong>
                                        </span>
                                        <button type="button" id="btn-reupload" class="btn btn-outline-secondary btn-sm rounded-pill">
                                            <i class="uil uil-redo me-1"></i> เปลี่ยนไฟล์
                                        </button>
                                    </div>

                                    {{-- Zoom Toolbar --}}
                                    <div class="zoom-toolbar">
                                        <span>Zoom:</span>
                                        <button type="button" id="btn-zoom-in"   class="btn btn-outline-secondary btn-sm px-2 py-1">
                                            <i class="uil uil-search-plus"></i> +
                                        </button>
                                        <button type="button" id="btn-zoom-out"  class="btn btn-outline-secondary btn-sm px-2 py-1">
                                            <i class="uil uil-search-minus"></i> −
                                        </button>
                                        <button type="button" id="btn-zoom-fit"  class="btn btn-outline-secondary btn-sm px-2 py-1">
                                            <i class="uil uil-expand-arrows"></i> Fit
                                        </button>
                                        <span style="color:#aaa;">| Scroll เพื่อ zoom</span>
                                    </div>

                                    {{-- รูปที่จะ crop --}}
                                    <div style="max-height: 560px; overflow: hidden; border: 1px solid #e0e0e0; border-radius: 8px; background: #f0f0f0;">
                                        <img id="cropper-image" src="" alt="document">
                                    </div>

                                    <div class="mt-3 d-flex gap-2 flex-wrap">
                                        <button type="button" id="btn-do-crop" class="btn btn-primary rounded-pill px-4">
                                            <i class="uil uil-crop-alt me-1"></i> Crop ลายเซ็น
                                        </button>
                                        <button type="button" id="btn-reset-crop" class="btn btn-outline-secondary rounded-pill px-3">
                                            <i class="uil uil-refresh me-1"></i> Reset
                                        </button>
                                    </div>
                                </div>

                                {{-- Step 3: ผลลัพธ์ --}}
                                <div id="crop-result-wrapper" 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> ผลลัพธ์การ Crop — ตรวจสอบแล้วกรอกข้อมูล
                                        </h6>
                                        <div class="row gy-3 align-items-start">
                                            <div class="col-md-4 text-center">
                                                <label class="label-main">ลายเซ็นที่ได้</label>
                                                <img id="crop-preview-img" src="" alt="Cropped Signature">
                                                <div class="mt-2">
                                                    <button type="button" id="btn-recrop" class="btn btn-outline-secondary btn-sm rounded-pill">
                                                        <i class="uil uil-crop-alt me-1"></i> Crop ใหม่
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="mb-3">
                                                    <label class="label-main">ชื่อ-นามสกุล <span class="text-muted fw-normal">(กรอกเอง)</span></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-4">
                                                    <label class="label-main">ตำแหน่ง <span class="text-muted fw-normal">(กรอกเอง)</span></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-crop" class="btn btn-success rounded-pill px-4">
                                                    <i class="uil uil-check me-1"></i> ใช้ลายเซ็นนี้
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>{{-- end tab-import --}}

                            {{-- ===== Save Button ===== --}}
                            <div class="text-center mt-10">
                                <button type="submit" id="btn-save" 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 src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>

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

    // ============================================================
    // TAB SWITCHER
    // ============================================================
    let currentTab = 'live';

    $('[data-tab]').on('click', function () {
        $('[data-tab]').removeClass('active');
        $(this).addClass('active');
        currentTab = $(this).data('tab');
        $('#tab-live, #tab-import').hide();
        $('#tab-' + currentTab).show();
    });

    // ============================================================
    // TAB 1: เซ็นสด
    // ============================================================
    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   = () => 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-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' });
    });

    $('#btn-clear-pad').on('click', function () {
        signaturePad.clear();
        $('#signature_picture').val('');
        $('#signature_type_input').val('live');
    });

    // ============================================================
    // TAB 2: Cropper.js
    // ============================================================
    let cropper       = null;
    let croppedBase64 = '';

    // --- โหลดไฟล์ ---
    $('#btn-load-file').on('click', function () {
        const file = $('#sig_import_file')[0].files[0];
        if (!file) { alert('กรุณาเลือกไฟล์ก่อน'); return; }

        const ext = file.name.split('.').pop().toLowerCase();

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

            $('#load-status').show();
            $(this).prop('disabled', true);

            $.ajax({
                url:         '{{ url("/signature_pdf_to_image") }}',
                type:        'POST',
                data:        fd,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.success) {
                        initCropper(res.image_url);
                    } else {
                        alert('เกิดข้อผิดพลาด: ' + res.message);
                    }
                },
                error: function () { alert('ไม่สามารถแปลง PDF ได้'); },
                complete: function () {
                    $('#load-status').hide();
                    $('#btn-load-file').prop('disabled', false);
                }
            });

        } else {
            // รูปภาพ: อ่านผ่าน FileReader ได้เลย
            const reader  = new FileReader();
            reader.onload = (e) => initCropper(e.target.result);
            reader.readAsDataURL(file);
        }
    });

    function initCropper(src) {
        // destroy ของเดิม
        if (cropper) { cropper.destroy(); cropper = null; }
        croppedBase64 = '';

        $('#step-upload').hide();
        $('#crop-result-wrapper').hide();
        $('#btn-use-crop')
            .html('<i class="uil uil-check me-1"></i> ใช้ลายเซ็นนี้')
            .removeClass('btn-secondary').addClass('btn-success').prop('disabled', false);

        const imgEl = document.getElementById('cropper-image');
        imgEl.src   = src;

        $('#cropper-wrapper').show();

        $(imgEl).off('load.crop').on('load.crop', function () {
            cropper = new Cropper(imgEl, {
                aspectRatio:        NaN,
                viewMode:           0,          // ให้ zoom ออกนอกรูปได้
                autoCropArea:       0.4,
                movable:            true,
                zoomable:           true,
                scalable:           false,
                rotatable:          false,
                guides:             true,
                highlight:          true,
                background:         true,
                responsive:         true,
                minContainerHeight: 480,
                ready() {
                    // zoom ให้พอดีกับ container ก่อน
                    this.cropper.zoomTo(1);
                }
            });
        });

        // ถ้ารูปโหลดอยู่แล้ว (cached)
        if (imgEl.complete && imgEl.naturalWidth) $(imgEl).trigger('load.crop');
    }

    // --- ปุ่ม Zoom ---
    $('#btn-zoom-in').on('click',  function () { if (cropper) cropper.zoom(0.2); });
    $('#btn-zoom-out').on('click', function () { if (cropper) cropper.zoom(-0.2); });
    $('#btn-zoom-fit').on('click', function () { if (cropper) cropper.reset(); });

    // --- Reset crop box ---
    $('#btn-reset-crop').on('click', function () { if (cropper) cropper.reset(); });

    // --- กด Crop ---
    $('#btn-do-crop').on('click', function () {
        if (!cropper) return;

        // ได้ canvas ขนาดจริงจากการ crop (ไม่บังคับ width/height)
        const croppedCanvas = cropper.getCroppedCanvas({
            imageSmoothingEnabled: true,
            imageSmoothingQuality: 'high',
            fillColor: '#ffffff',
        });

        croppedBase64 = croppedCanvas.toDataURL('image/png');
        $('#crop-preview-img').attr('src', croppedBase64);
        $('#cropper-wrapper').hide();
        $('#crop-result-wrapper').show();
    });

    // --- Crop ใหม่ ---
    $('#btn-recrop').on('click', function () {
        croppedBase64 = '';
        $('#signature_picture').val('');
        $('#crop-result-wrapper').hide();
        $('#cropper-wrapper').show();
    });

    // --- เปลี่ยนไฟล์ ---
    $('#btn-reupload').on('click', function () {
        if (cropper) { cropper.destroy(); cropper = null; }
        croppedBase64 = '';
        $('#signature_picture').val('');
        $('#cropper-wrapper').hide();
        $('#crop-result-wrapper').hide();
        $('#step-upload').show();
        $('#sig_import_file').val('');
    });

    // --- กด "ใช้ลายเซ็นนี้" ---
    $('#btn-use-crop').on('click', function () {
        if (!croppedBase64) { alert('กรุณา Crop ลายเซ็นก่อน'); return; }

        // ส่ง base64 ไปใน hidden field (Controller จะบันทึกเป็นไฟล์เหมือน live)
        $('#signature_picture').val(croppedBase64);
        $('#signature_type_input').val('scan_image');

        $(this).html('<i class="uil uil-check-circle me-1"></i> เลือกแล้ว ✓')
               .removeClass('btn-success').addClass('btn-secondary').prop('disabled', true);
    });

    // ============================================================
    // SUBMIT FORM
    // ============================================================
    $('#sig-form').on('submit', function (e) {
        const val        = $('#signature_picture').val();
        const isPadEmpty = signaturePad.isEmpty();

        if (currentTab === 'live') {
            if (!isPadEmpty) {
                $('#signature_picture').val(signaturePad.toDataURL());
                $('#signature_type_input').val('live');
            } else if (hasExistingImage === 'true') {
                $('#signature_picture').val('');
            } else {
                alert('กรุณาเซ็นชื่อก่อนบันทึก');
                e.preventDefault();
            }
        } else {
            if (!val) {
                alert('กรุณา Crop ลายเซ็นและกดปุ่ม "ใช้ลายเซ็นนี้" ก่อนบันทึก');
                e.preventDefault();
            }
            // val เป็น base64 → Controller รับได้เลยเหมือน live
        }
    });

});
</script>
@endsection