@php
$breadcrumbs = [
        'Quotation List' => url('/quotation_list'),
        'Quotation View' => ''
    ];

// ดึงไอดีหลักไปใช้งานในระบบ Workflow
$id = $quotation->quotation_id;

// แกะข้อมูลระบบ Quantity และรายการย่อย
$use_qty = $quotation->quotation_use_qty ?? 0;
$main_qty = $quotation->quotation_main_qty ?? 0;

$sub_services = json_decode($quotation->quotation_sub_services, true) ?? []; 
$sub_amounts = json_decode($quotation->quotation_sub_amounts, true) ?? []; 
$sub_qtys = json_decode($quotation->quotation_sub_qtys, true) ?? []; 
@endphp

@extends('layouts.master')

@section('title')
    Quotation View - {{ $quotation->quotation_no }}
@endsection

@section('style')
<style>
    .view-card {
        border-radius: 15px;
        border: none;
        background-color: #ffffff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    }

    /* โครงสร้างแถวข้อมูล */
    .info-row {
        margin-bottom: 12px;
        display: flex;
        align-items: flex-start;
    }

    /* ปรับระยะหัวข้อให้เท่ากันทั้งหมด */
    .info-label {
        font-weight: 700;
        color: #343f52;
        font-size: 1rem;
        min-width: 170px;
        display: flex;
        justify-content: space-between;
        margin-right: 15px;
    }

    .info-value {
        color: #000;
        font-size: 1rem;
        flex: 1;
    }

    .table-custom thead {
        background-color: #f8f9fa;
        border-bottom: 2px solid #343f52;
    }
    .table-custom th { font-weight: 700; color: #343f52; padding: 15px; }
    .table-custom td { padding: 15px; vertical-align: top; } /* ปรับเป็น top เพื่อให้เวลารายการย่อยยาว ตัวเลขยังอยู่ด้านบนสวยงาม */
    
    .sub-item-text {
        color: #6f42c1;
        font-size: 0.9rem;
        margin-left: 20px;
        display: block;
        white-space: pre-line; /* เพิ่มตรงนี้เพื่อให้ข้อความใน Sub-service เว้นบรรทัดตามหน้า edit ครับ */
        line-height: 1.5;
    }
    .total-section {
        background-color: #fcfaff;
        border-radius: 10px;
        padding: 20px;
    }
    
    /* ปรับปรุงกล่อง Remark ใหม่หมดจด แก้อาการตัวหนังสือลอยเคว้ง */
    .remark-section {
        border: 1px solid #edf2f7;
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 12px 15px;
        min-height: 90px;
        line-height: 1.5;
        text-align: left;
        white-space: pre-line; 
    }
    .text-red { color: #d90429 !important; }

    @media print {
        .no-print { display: none; }
    }
    .btn-green, 
    .btn-green:hover {
        background-color: #a7f3d0 !important;
        border-color: #a7f3d0 !important;
        color: #065f46 !important;
    }

    .btn-yellow, 
    .btn-yellow:hover {
        background-color: #fef3c7 !important;
        border-color: #fef3c7 !important;
        color: #92400e !important;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
<style>
    /* Tab pills ใน modal */
    .modal .nav-pills .nav-link { color: #60697b; border: 1px solid #d1d9e6; border-radius: 50px; padding: 5px 16px; font-size: 0.82rem; }
    .modal .nav-pills .nav-link.active { background-color: #605dba; border-color: #605dba; color: #fff; }

    /* Cropper ใน modal */
    #modal-cropper-wrapper { display: none; }
    #modal-cropper-image { max-width: 100%; display: block; }
    .modal .cropper-container { max-height: 300px !important; }
    #modal-crop-result { display: none; }
    #modal-crop-preview { max-width: 180px; border: 1px solid #ddd; border-radius: 6px; padding: 8px; background: #fff; 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-10 mx-auto">
                
                <div class="d-flex justify-content-between align-items-center mb-5 no-print">
                    <h2 class="display-6 mb-0">Quotation Details</h2>
                </div>

                <div class="card view-card">
                    <div class="card-body p-10">
                        
                        <div class="mb-8">
                            <div class="info-row">
                                <div class="info-label">Quotation Date <span>:</span></div>
                                <div class="info-value">
                                    {{ date('d M Y', strtotime($quotation->quotation_date)) }}
                                </div>
                            </div>

                            <div class="info-row">
                                <div class="info-label">Expiration Date <span>:</span></div>
                                <div class="info-value">
                                    {{ $quotation->quotation_exp_date ? date('d M Y', strtotime($quotation->quotation_exp_date)) : '-' }}
                                </div>
                            </div>

                            <div class="info-row">
                                <div class="info-label">Quotation No <span>:</span></div>
                                <div class="info-value">
                                    {{ $quotation->quotation_no }}
                                </div>
                            </div>
                        </div>

                        <hr class="my-6">

                        <div class="mb-8">
                            <div class="info-row">
                                <div class="info-label">Attention <span>:</span></div>
                                <div class="info-value">
                                    <div class="fw-bold">{{ $quotation->quotation_attention }}</div>
                                    <div class="info-value" style="font-size: 0.8rem; padding: 0;">
                                        {!! nl2br(e($quotation->quotation_attention_detail)) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="info-row mt-3">
                                <div class="info-label">Project Name <span>:</span></div>
                                <div class="info-value fw-bold">{{ $quotation->quotation_project_name }}</div>
                            </div>
                          
                            <div class="info-row mt-3">
                                <div class="info-label"> Project Duration <span>:</span></div>
                                <div class="info-value fw-bold">{{ $quotation->quotation_project_duration }}</div>
                            </div>
                        </div>

                        <div class="table-responsive mb-8">
                            <table class="table table-custom">
                                <thead>
                                    <tr>
                                        <th>Description</th>
                                        @if($use_qty == 1)
                                            <th class="text-center" style="width: 120px;">Quantity</th>
                                        @endif
                                        <th class="text-end" style="width: 200px;">Amount (THB)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="fw-bold text-black" style="font-size: 1.1rem;">
                                            {{ $quotation->quotation_main_description }}
                                        </td>
                                        @if($use_qty == 1)
                                            <td class="text-center fw-bold text-black" style="font-size: 1.1rem;">
                                                {{ $main_qty != 0 ? number_format($main_qty) : '' }}
                                            </td>
                                        @endif
                                        <td class="text-end fw-bold text-black" style="font-size: 1.1rem;">
                                            {{ (float)$quotation->quotation_amount != 0 ? number_format((float)$quotation->quotation_amount, 2) : '' }}
                                        </td>
                                    </tr>

                                    @if(!empty($sub_services))
                                        @foreach($sub_services as $index => $sub)
                                            @php 
                                                $current_sub_amount = isset($sub_amounts[$index]) ? (float)$sub_amounts[$index] : 0;
                                                $current_sub_qty = isset($sub_qtys[$index]) ? (float)$sub_qtys[$index] : 0;
                                            @endphp
                                            <tr>
                                                <td>
                                                    <span class="sub-item-text">{{ $sub }}</span>
                                                </td>
                                                @if($use_qty == 1)
                                                    <td class="text-center text-muted">
                                                        {{ $current_sub_qty != 0 ? number_format($current_sub_qty) : '' }}
                                                    </td>
                                                @endif
                                                <td class="text-end text-muted">
                                                    @if($current_sub_amount != 0)
                                                        <span class="sub-item-amount">{{ number_format($current_sub_amount, 2) }}</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>

                       <div class="row align-items-start">
                            <div class="col-md-7 col-12 text-start mb-4 mb-md-0">
                                <label class="label-main"><i class="uil uil-notes"></i> Remark :</label>
                                <div class="remark-section text-dark" style="font-size: 0.9rem;">@if(!empty(trim($quotation->quotation_remark))){{ trim($quotation->quotation_remark) }}@else<span class="text-muted">- No remark specified -</span>@endif</div>
                            </div>

                            <div class="col-md-5 col-12">
                                <div class="total-section">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span class="fw-bold text-dark">Special Discount</span>
                                        <span class="text-red fw-bold">
                                            @php
                                                $total_before_discount = (float)$quotation->quotation_amount;
                                                $disc_val = (float)$quotation->quotation_discount_value;
                                                $discount = ($quotation->quotation_discount_type == 'percent') 
                                                    ? ($total_before_discount * $disc_val / 100) 
                                                    : $disc_val;
                                            @endphp
                                            ({{ number_format($discount, 2) }})
                                        </span>
                                    </div>
                                    <div class="d-flex justify-content-between border-top border-dark pt-3 mt-2">
                                        <span class="fw-bold text-dark" style="font-size: 1.2rem;">NET TOTAL :</span>
                                        <span class="fw-bold text-black" style="font-size: 1.2rem;">
                                            {{ number_format($total_before_discount - $discount, 2) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-10 no-print">
                            <a href="{{ url('quotation_pdf/' . $id) }}" target="_blank" class="btn btn-dark rounded-pill px-10">
                                <i class="uil uil-file-download me-1"></i> PDF
                            </a>
                        </div>

                        <hr>
                        <form action="{{ url('signature_customer_edit') }}" method="post" enctype="multipart/form-data" id="workflowCustomerForm">
                            {!! csrf_field() !!}
                            <input type="hidden" value="{{ $id }}" name="quotation_id">
                            <input type="hidden" value="" name="who_approve">
                            
                            <div class="row justify-content-center mt-10">
                                <div class="col-md-8 text-center">
                                    
                                    {{-- ปุ่ม Approved (อนุมัติ)สำหรับ Public Customer --}}
                                    <button class="btn btn-sm btn-green check-workflow-action" type="button" id="btn_approved_trigger" style="margin: 20px;">
                                        <span style="display: inline-flex;">
                                            <span class="my-auto"> Approved </span>
                                            <i class="uil-check-circle" style="font-size: 24px;margin-left: 10px;"></i>
                                        </span>
                                    </button>

                                    {{-- ปุ่ม Reject (ปฏิเสธ) สำหรับ Public Customer --}}
                                    <button type="button" class="btn btn-sm btn-red check-workflow-action" id="btn_reject_trigger" style="margin: 20px;">
                                        <span style="display: inline-flex;"><span class="my-auto"> Reject </span><i class="uil uil-times-circle" style="font-size: 24px;margin-left: 10px;"></i></span>
                                    </button>

                                    {{-- ปุ่ม Skip --}}
                                    {{-- <button class="btn btn-sm btn-yellow" type="submit" name="status" value="skip" id="confirm_skip" style="margin: 20px;">
                                        <span style="display: inline-flex;"><span class="my-auto"> Skip </span><i class="uil uil-arrow-circle-right" style="font-size: 24px;margin-left: 10px;"></i></span>
                                    </button> --}}
                                </div>
                            </div>

                            <div class="modal fade" id="modal-reject" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-md">
                                    <div class="modal-content text-center">
                                        <div class="modal-header border-0 pb-0">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body pt-0">
                                            <h4 class="mb-4 text-danger"><i class="uil uil-comment-notes"></i> Add Comment / Reason</h4>
                                            <p class="text-muted small mb-4">กรุณาระบุรายละเอียดหรือเหตุผลที่ต้องการให้แก้ไขเพิ่มเติม</p>
                                            <div class="newsletter-wrapper">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="mc-field-group input-group form-floating mb-4">
                                                            <textarea style="height:120px; width: 100%;" name="remark" class="form-control" placeholder="ระบุเหตุผลที่นี่..." id="mce-COMMENT" ></textarea>
                                                            <label for="mce-COMMENT">ระบุรายละเอียดที่ต้องการให้แก้ไข...</label>
                                                        </div>
                                                        <div class="d-flex justify-content-center gap-2">
                                                            <button type="button" class="btn btn-secondary rounded-pill px-4" data-bs-dismiss="modal">ยกเลิก</button>
                                                            <button type="submit" name="status" value="rejected" class="btn btn-danger rounded-pill px-4">ยืนยันส่งกลับ (Submit)</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal fade" id="modal-approved" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
                                <div class="modal-dialog modal-dialog-centered modal-md">
                                    <div class="modal-content text-center">
                                        <div class="modal-header border-0 pb-0">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body pt-0 px-5">
                                            <h4 class="mb-2 text-success"><i class="uil uil-pen"></i> Digital Signature Required</h4>
                                            <p class="text-muted small mb-4">กรุณากรอกชื่อและลงลายมือชื่ออิเล็กทรอนิกส์เพื่อยืนยันการอนุมัติใบเสนอราคานี้</p>

                                            <div class="form-floating mb-4 text-start">
                                                <input type="text" name="signer_name" id="signer_name" class="form-control"
                                                    placeholder="กรุณาระบุชื่อ-นามสกุลของคุณ"
                                                    style="border: 1px solid #d1d9e6; border-radius: 8px;">
                                                <label for="signer_name" class="text-muted">ชื่อ-นามสกุล ผู้ลงนามอนุมัติ <span class="text-danger">*</span></label>
                                            </div>

                                            {{-- Tab switcher --}}
                                            <ul class="nav nav-pills justify-content-center mb-4">
                                                <li class="nav-item">
                                                    <button type="button" class="nav-link active" id="modal-tab-live-btn">
                                                        <i class="uil uil-pen me-1"></i> เซ็นสด
                                                    </button>
                                                </li>
                                                <li class="nav-item ms-2">
                                                    <button type="button" class="nav-link" id="modal-tab-import-btn">
                                                        <i class="uil uil-image-upload me-1"></i> Import จากไฟล์
                                                    </button>
                                                </li>
                                            </ul>

                                            {{-- TAB 1: เซ็นสด --}}
                                            <div id="modal-tab-live">
                                                <div class="form-group mb-4">
                                                    <label class="d-block text-start mb-2 fw-bold text-dark" style="font-size: 0.9rem;">
                                                        พื้นที่ลงลายมือชื่อ <span class="text-danger">*</span>
                                                    </label>
                                                    <div style="border: 1px solid #d1d9e6; border-radius: 8px; background: #fff; position: relative;">
                                                        <canvas id="signature-pad" class="signature-pad" style="width: 100%; height: 200px; cursor: crosshair;"></canvas>
                                                        <div style="padding: 10px; border-top: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
                                                            <div>
                                                                <span class="color-option" style="background:#000; width:20px; height:20px; border-radius:50%; display:inline-block; margin:0 5px; cursor:pointer; border:1px solid #ddd;" data-color="#000"></span>
                                                                <span class="color-option" style="background:#0044cc; width:20px; height:20px; border-radius:50%; display:inline-block; margin:0 5px; cursor:pointer; border:1px solid #ddd;" data-color="#0044cc"></span>
                                                            </div>
                                                            <button type="button" id="clear" class="btn btn-sm btn-outline-danger py-1 px-3" style="font-size:0.75rem;">CLEAR</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- TAB 2: Import จากไฟล์ --}}
                                            <div id="modal-tab-import" style="display:none;">

                                                {{-- Step 1: เลือกไฟล์ --}}
                                                <div id="modal-step-upload" class="mb-3">
                                                    <label class="d-block text-start mb-2 fw-bold text-dark" style="font-size:0.9rem;">
                                                        เลือกไฟล์ที่มีลายเซ็น (PDF / รูปภาพ) <span class="text-danger">*</span>
                                                    </label>
                                                    <div class="d-flex gap-2 align-items-center">
                                                        <input type="file" id="modal-import-file" class="form-control form-control-sm"
                                                            accept=".jpg,.jpeg,.png,.pdf" style="font-size:0.85rem;">
                                                        <button type="button" id="modal-btn-load" class="btn btn-primary btn-sm rounded-pill text-nowrap">
                                                            <i class="uil uil-upload"></i> โหลด
                                                        </button>
                                                    </div>
                                                    <div id="modal-load-status" class="mt-2 text-muted text-start" style="font-size:0.82rem; display:none;">
                                                        <i class="uil uil-spinner-alt me-1"></i> กำลังแปลงไฟล์...
                                                    </div>
                                                </div>

                                                {{-- Step 2: Cropper --}}
                                                <div id="modal-cropper-wrapper" class="mb-3">
                                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                                        <small class="text-muted">ลากครอบลายเซ็น แล้วกด Crop</small>
                                                        <button type="button" id="modal-btn-reupload" class="btn btn-outline-secondary btn-sm rounded-pill" style="font-size:0.75rem;">
                                                            <i class="uil uil-redo"></i> เปลี่ยนไฟล์
                                                        </button>
                                                    </div>
                                                    <div style="max-height:280px; overflow:hidden; border:1px solid #e0e0e0; border-radius:8px; background:#f0f0f0;">
                                                        <img id="modal-cropper-image" src="" alt="document">
                                                    </div>
                                                    <div class="mt-2 d-flex gap-2 justify-content-center">
                                                        <button type="button" id="modal-btn-zoom-in"  class="btn btn-outline-secondary btn-sm px-2"><i class="uil uil-search-plus"></i></button>
                                                        <button type="button" id="modal-btn-zoom-out" class="btn btn-outline-secondary btn-sm px-2"><i class="uil uil-search-minus"></i></button>
                                                        <button type="button" id="modal-btn-do-crop"  class="btn btn-primary btn-sm rounded-pill px-3">
                                                            <i class="uil uil-crop-alt me-1"></i> Crop ลายเซ็น
                                                        </button>
                                                    </div>
                                                </div>

                                                {{-- Step 3: ผลลัพธ์ --}}
                                                <div id="modal-crop-result" class="mb-3">
                                                    <div class="card p-3" style="border:1px dashed #605dba; border-radius:8px;">
                                                        <p class="text-success mb-2" style="font-size:0.85rem;"><i class="uil uil-check-circle me-1"></i> Crop สำเร็จแล้ว</p>
                                                        <img id="modal-crop-preview" src="" alt="Cropped Signature">
                                                        <button type="button" id="modal-btn-recrop" class="btn btn-outline-secondary btn-sm rounded-pill mt-2">
                                                            <i class="uil uil-crop-alt me-1"></i> Crop ใหม่
                                                        </button>
                                                    </div>
                                                </div>

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

                                            <input type="hidden" name="signature_picture" id="signature_picture">
                                            <input type="hidden" id="modal-sig-mode" value="live"> {{-- live / import --}}

                                            <div class="d-flex justify-content-center gap-2 mt-4">
                                                <button type="button" class="btn btn-secondary rounded-pill px-4" data-bs-dismiss="modal">ยกเลิก</button>
                                                <button type="submit" name="status" value="approved" class="btn btn-success rounded-pill px-4" id="submit_approved_workflow">
                                                    ยืนยันการอนุมัติ (Submit)
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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/sweetalert2@11"></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() {

    // ============================================================
    // SignaturePad (เซ็นสด)
    // ============================================================
    let signaturePad = null;
    const canvas = document.getElementById('signature-pad');

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

    $('#btn_approved_trigger').on('click', function(e) {
        e.preventDefault();
        new bootstrap.Modal(document.getElementById('modal-approved')).show();
    });

    $('#modal-approved').on('shown.bs.modal', function () {
        if (!signaturePad) {
            signaturePad = new SignaturePad(canvas, {
                backgroundColor: 'rgba(255,255,255,0)',
                penColor: 'rgb(0,0,0)'
            });
        }
        resizeCanvas();
    });

    $('#btn_reject_trigger').on('click', function(e) {
        e.preventDefault();
        new bootstrap.Modal(document.getElementById('modal-reject')).show();
    });

    $('.color-option').on('click', function() {
        if (!signaturePad) return;
        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').on('click', function() {
        if (signaturePad) signaturePad.clear();
    });

    // ============================================================
    // Tab switcher ใน Modal
    // ============================================================
    $('#modal-tab-live-btn').on('click', function() {
        $(this).addClass('active');
        $('#modal-tab-import-btn').removeClass('active');
        $('#modal-tab-live').show();
        $('#modal-tab-import').hide();
        $('#modal-sig-mode').val('live');
        $('#signature_picture').val('');
    });

    $('#modal-tab-import-btn').on('click', function() {
        $(this).addClass('active');
        $('#modal-tab-live-btn').removeClass('active');
        $('#modal-tab-import').show();
        $('#modal-tab-live').hide();
        $('#modal-sig-mode').val('import');
    });

    // ============================================================
    // Cropper.js ใน Modal
    // ============================================================
    let modalCropper    = null;
    let modalCropBase64 = '';

    $('#modal-btn-load').on('click', function() {
        const file = $('#modal-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'));
            $('#modal-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) {
                    res.success ? initModalCropper(res.image_url) : alert('เกิดข้อผิดพลาด: ' + res.message);
                },
                error: function() { alert('ไม่สามารถแปลง PDF ได้'); },
                complete: function() {
                    $('#modal-load-status').hide();
                    $('#modal-btn-load').prop('disabled', false);
                }
            });
        } else {
            const reader = new FileReader();
            reader.onload = (e) => initModalCropper(e.target.result);
            reader.readAsDataURL(file);
        }
    });

    function initModalCropper(src) {
        if (modalCropper) { modalCropper.destroy(); modalCropper = null; }
        modalCropBase64 = '';
        $('#modal-step-upload').hide();
        $('#modal-crop-result').hide();
        $('#signature_picture').val('');

        const imgEl = document.getElementById('modal-cropper-image');
        imgEl.src = src;
        $('#modal-cropper-wrapper').show();

        $(imgEl).off('load.crop').on('load.crop', function() {
            modalCropper = new Cropper(imgEl, {
                aspectRatio: NaN, viewMode: 0, autoCropArea: 0.5,
                movable: true, zoomable: true, scalable: false, rotatable: false,
                guides: true, background: true, responsive: true,
                minContainerHeight: 250,
                ready() { this.cropper.zoomTo(1); }
            });
        });
        if (imgEl.complete && imgEl.naturalWidth) $(imgEl).trigger('load.crop');
    }

    $('#modal-btn-zoom-in').on('click',  function() { if (modalCropper) modalCropper.zoom(0.2); });
    $('#modal-btn-zoom-out').on('click', function() { if (modalCropper) modalCropper.zoom(-0.2); });

    $('#modal-btn-do-crop').on('click', function() {
        if (!modalCropper) return;
        const croppedCanvas = modalCropper.getCroppedCanvas({
            imageSmoothingEnabled: true, imageSmoothingQuality: 'high', fillColor: '#ffffff'
        });
        modalCropBase64 = croppedCanvas.toDataURL('image/png');
        $('#modal-crop-preview').attr('src', modalCropBase64);
        $('#signature_picture').val(modalCropBase64); // เซ็ตไว้เลย
        $('#modal-cropper-wrapper').hide();
        $('#modal-crop-result').show();
    });

    $('#modal-btn-recrop').on('click', function() {
        modalCropBase64 = '';
        $('#signature_picture').val('');
        $('#modal-crop-result').hide();
        $('#modal-cropper-wrapper').show();
    });

    $('#modal-btn-reupload').on('click', function() {
        if (modalCropper) { modalCropper.destroy(); modalCropper = null; }
        modalCropBase64 = '';
        $('#signature_picture').val('');
        $('#modal-cropper-wrapper').hide();
        $('#modal-crop-result').hide();
        $('#modal-step-upload').show();
        $('#modal-import-file').val('');
    });

    // ============================================================
    // Submit
    // ============================================================
    $('#workflowCustomerForm').on('submit', function(e) {
        const activeEl  = document.activeElement;
        const submitVal = activeEl ? activeEl.value : '';
        const submitId  = activeEl ? activeEl.id   : '';
        const sigMode   = $('#modal-sig-mode').val();

        if (submitId === 'submit_approved_workflow' || submitVal === 'approved') {

            if (sigMode === 'live') {
                if (!signaturePad || signaturePad.isEmpty()) {
                    e.preventDefault();
                    Swal.fire({ icon: 'warning', title: 'กรุณาเซ็นชื่อ',
                        text: 'โปรดลงนามในช่องวาดลายเซ็นก่อนทำการยืนยันอนุมัติ',
                        confirmButtonColor: '#343f52' });
                    return false;
                }
                $('#signature_picture').val(signaturePad.toDataURL('image/png', 1.0));

            } else {
                // import mode
                if (!modalCropBase64) {
                    e.preventDefault();
                    Swal.fire({ icon: 'warning', title: 'กรุณา Crop ลายเซ็น',
                        text: 'โปรดเลือกไฟล์และ Crop ลายเซ็นให้เรียบร้อยก่อนยืนยัน',
                        confirmButtonColor: '#343f52' });
                    return false;
                }
                // ค่า signature_picture ถูก set แล้วตอนกด Crop
            }
        }

        if (submitVal === 'rejected') {
            const commentValue = $.trim($('#mce-COMMENT').val());
            if (commentValue === '') {
                e.preventDefault();
                Swal.fire({ icon: 'warning', title: 'กรุณาระบุเหตุผล',
                    text: 'โปรดระบุรายละเอียดหรือเหตุผลที่ต้องการให้แก้ไขก่อนส่งกลับ',
                    confirmButtonColor: '#343f52' });
                return false;
            }
        }
    });

});
</script>
@endsection