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

if (empty($quotation)) {
    // กรณีสร้างใหม่ (Insert) - กำหนดค่าว่างเริ่มต้น
    $quotation_id = '';
    $quotation_no = '';
    $quotation_date = ''; 
    $quotation_exp_date = '';
    $quotation_attention = '';
    $quotation_attention_detail = '';
    $quotation_project_name = '';
    $quotation_project_duration = '';
    $quotation_main_description = '';
    $quotation_amount = '';
    $quotation_discount_type = '';
    $quotation_discount_value = '';
    $quotation_sub_services = []; 
    $quotation_sub_amounts = [];
    
    // เพิ่มตัวแปรสำหรับระบบ Quantity และ Remark
    $quotation_main_qty = 1;
    $quotation_sub_qtys = [];
    $quotation_use_qty = 0; // 0 = ปิด, 1 = เปิด
    $quotation_remark = ''; 
} else {
    // กรณีแก้ไข (Update) - ดึงค่าจาก Object $quotation
    $quotation_id = $quotation->quotation_id;
    $quotation_no = $quotation->quotation_no;
    $quotation_date = $quotation->quotation_date;
    $quotation_exp_date = $quotation->quotation_exp_date;
    $quotation_attention = $quotation->quotation_attention;
    $quotation_attention_detail = $quotation->quotation_attention_detail;
    $quotation_project_name = $quotation->quotation_project_name;
    $quotation_project_duration = $quotation->quotation_project_duration;
    $quotation_main_description = $quotation->quotation_main_description;
    $quotation_amount = $quotation->quotation_amount;
    $quotation_discount_type = $quotation->quotation_discount_type;
    $quotation_discount_value = $quotation->quotation_discount_value;
    
    // แปลง JSON string เป็น Array
    $quotation_sub_services = json_decode($quotation->quotation_sub_services, true) ?? [];
    $quotation_sub_amounts = json_decode($quotation->quotation_sub_amounts, true) ?? [];
    
    // ดึงค่าระบบ Quantity และ Remark จาก Database
    $quotation_main_qty = $quotation->quotation_main_qty ?? 1;
    $quotation_sub_qtys = json_decode($quotation->quotation_sub_qtys, true) ?? [];
    $quotation_use_qty = $quotation->quotation_use_qty ?? 0;
    $quotation_remark = $quotation->quotation_remark ?? '';
}

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

@extends('layouts.master')

@section('title')
    Quotation Duplicate
@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; display: inline-block; transition: transform 0.1s; }
    .remove-btn:hover { transform: scale(1.15); }
    .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; }
    
    /* สไตล์เพิ่มเติมสำหรับปุ่มเปิด/ปิด Quantity */
    .btn-quantity-toggle { padding: 4px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 50px; transition: all 0.2s; }
    .qty-column { display: none; } /* ซ่อนไว้เริ่มต้น ควบคุมผ่าน jQuery */
</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">

                <br><br>

                <div class="mb-4">
                    <h2 style="font-size: 1.3rem; color: #000;">Quotation 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('/quotation_edit') }}" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            
                            <input type="hidden" id="quotation_id" name="quotation_id" value="{{ $quotation_id }}">
                            <input type="hidden" id="use_qty_input" name="use_qty" value="{{ $quotation_use_qty }}">

                            <div class="row gy-4">
                                <div class="col-md-4">
                                    <label class="label-main">Quotation Date:</label>
                                    <div class="input-group">
                                        <input type="text" id="q_date" class="form-control form-control-custom input-custom-black" name="q_date" placeholder="Select Date"  value="{{ $quotation_date }}" readonly>
                                        <span class="input-group-text"><i class="uil uil-calendar-alt"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="label-main">Expiration Date:</label>
                                    <div class="input-group">
                                        <input type="text" id="exp_date" class="form-control form-control-custom input-custom-black" name="exp_date" placeholder="Select Date" value="{{ $quotation_exp_date }}" readonly>
                                        <span class="input-group-text"><i class="uil uil-calendar-alt"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="label-main">Quotation No.:</label>
                                    <input type="text" class="form-control form-control-custom input-custom-black" name="q_no" value="{{ $quotation_no }}" placeholder="QU-2026/007">
                                </div>
                                
                                <div class="col-12">
                                    <label class="label-main">Attention:</label>
                                    <input type="text" class="form-control form-control-custom input-custom-black" name="attention" value="{{ $quotation_attention }}" placeholder="Contact Person">
                                </div>
                                <div class="col-12">
                                    <label class="label-main">Attention Details:</label>
                                    <textarea class="form-control input-custom-black" name="attention_details" rows="2" placeholder="Address...">{{ $quotation_attention_detail }}</textarea>
                                </div>
                                <div class="col-12">
                                    <label class="label-main">
                                        Project Name: 
                                        <button type="button" id="btn-sync-project" class="btn btn-xs btn-outline-primary btn-sync">
                                            <i class="uil uil-sync"></i> Sync to Title
                                        </button>
                                    </label>
                                    <textarea id="project_name_input" class="form-control form-control-custom input-custom-black" name="project_name" placeholder="Project Name">{{ $quotation_project_name }}</textarea>
                                </div>
                                <div class="col-12">
                                    <label class="label-main">Project Duration:</label>
                                     <textarea id="project_duration" class="form-control form-control-custom input-custom-black" name="project_duration" placeholder="Duration">{{ $quotation_project_duration }}</textarea>
                                </div>
                            </div>

                            <div class="custom-hr"></div>

                            <div class="table-header-bg mb-4">
                                <div class="row align-items-center">
                                    <div class="col-5 col-md-6" id="header-desc-title">Description</div>
                                    <div class="col-4 col-md-2 text-center qty-column">Quantity</div>
                                    <div class="col-3 text-end" id="amount-header-text">Amount (THB)</div>
                                    <div class="col-md-1 col-2 text-center remove-button-header" style="width: 45px;"></div>
                                </div>
                            </div>

                            <div class="mb-4 text-start">
                                <button type="button" id="btn-toggle-qty" class="btn btn-xs btn-outline-dark btn-quantity-toggle">
                                    <i class="uil uil-layers-alt"></i> + Add Quantity Mode
                                </button>
                            </div>

                            <div class="row gy-3 mb-4 align-items-center">
                                <div class="col-md-8" id="main-desc-col">
                                    <label class="label-main">Main Service Description (Title):</label>
                                    <input type="text" id="main_description_input" class="form-control form-control-custom fw-bold" name="main_description" value="{{ $quotation_main_description }}" placeholder="Main Title" style="color: #000;">
                                </div>
                                <div class="col-md-2 qty-column mt-auto">
                                    <label class="label-main text-center d-md-none">Quantity:</label>
                                    <input type="number" id="main_qty_input" class="form-control form-control-custom input-custom-black text-center calc-trigger" name="main_qty" value="{{ $quotation_main_qty }}" placeholder="0" min="0">
                                </div>
                                <div class="col-md-3 mt-auto" id="main-amount-col">
                                    <label class="label-main text-end d-md-none" id="main-amount-label">Amount (THB):</label>
                                    <input type="number" id="main_amount_input" class="form-control form-control-custom input-custom-black text-end calc-trigger" name="total_amount" value="{{ $quotation_amount }}" placeholder="0.00" step="0.01">
                                </div>
                                <div class="col-md-1 d-none d-md-block" style="width: 45px;"></div>
                            </div>

                            <div id="sub-service-wrapper">
                                @if(count($quotation_sub_services) > 0)
                                    @foreach($quotation_sub_services as $index => $item)
                                        <div class="row gy-2 mb-3 sub-item-row align-items-center">
                                            <div class="col-md-6 sub-desc-col">
                                                <label class="label-sub-purple">- Sub-service <span class="row-number">{{ $index + 1 }}</span>:</label>
                                                <textarea class="form-control form-control-custom input-custom-black" name="sub_services[]" placeholder="Sub-service detail...">{{ $item }}</textarea>
                                            </div>
                                            <div class="col-md-2 qty-column mt-auto">
                                                <input type="number" class="form-control form-control-custom input-custom-black text-center calc-trigger sub-qty-input" name="sub_qtys[]" value="{{ $quotation_sub_qtys[$index] ?? 1 }}" placeholder="0" min="0">
                                            </div>
                                            <div class="col-md-3 mt-auto sub-amount-col">
                                                <input type="number" class="form-control form-control-custom input-custom-black text-end calc-trigger sub-amount-input" name="sub_amounts[]" value="{{ $quotation_sub_amounts[$index] ?? '' }}" placeholder="0.00" step="0.01">
                                            </div>
                                            <div class="col-md-1 col-2 mt-auto text-center remove-button-col" style="width: 45px; padding: 0;">
                                                <i class="uil uil-trash-alt remove-btn {{ count($quotation_sub_services) <= 1 ? 'd-none' : '' }}"></i>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row gy-2 mb-3 sub-item-row align-items-center">
                                        <div class="col-md-6 sub-desc-col">
                                            <label class="label-sub-purple">- Sub-service <span class="row-number">1</span>:</label>
                                            <textarea class="form-control form-control-custom input-custom-black" name="sub_services[]" placeholder="Sub-service detail..."></textarea>
                                        </div>
                                        <div class="col-md-2 qty-column mt-auto">
                                            <input type="number" class="form-control form-control-custom input-custom-black text-center calc-trigger sub-qty-input" name="sub_qtys[]" value="1" placeholder="0" min="0">
                                        </div>
                                        <div class="col-md-3 mt-auto sub-amount-col">
                                            <input type="number" class="form-control form-control-custom input-custom-black text-end calc-trigger sub-amount-input" name="sub_amounts[]" placeholder="0.00" step="0.01">
                                        </div>
                                        <div class="col-md-1 col-2 mt-auto text-center remove-button-col" style="width: 45px; padding: 0;">
                                            <i class="uil uil-trash-alt remove-btn d-none"></i>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="row mt-4 sub-item-row">
                                <div class="col-12">
                                    <button type="button" class="btn btn-add-service rounded-pill w-100 py-2" id="add-sub-btn">
                                        <i class="uil uil-plus-circle me-1"></i> Add Sub-service Item
                                    </button>
                                </div>
                            </div>

                            <div class="custom-hr"></div>

                            <div class="row">

                                <div class="col-md-5 col-12 mb-4 mb-md-0 text-start">
                                    <label class="label-main">
                                        Remark:
                                        <button type="button" id="btn-insert-remark" class="btn btn-xs btn-outline-secondary btn-sync">
                                            <i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน
                                        </button>
                                    </label>
                                    <textarea class="form-control form-control-custom input-custom-black" id="remark_input" name="quotation_remark" rows="2" placeholder="Enter quotation remarks or terms here..." style="height: auto; min-height: 70px;">{{ $quotation_remark }}</textarea>
                                </div>

                                <div class="col-md-7 col-12 text-end mt-auto">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div class="discount-control d-flex align-items-center">
                                            <span class="label-main mb-0">Special Discount</span>
                                            <select id="discount_type" name="discount_type" class="form-select form-select-sm ms-2 calc-trigger" style="width: 75px; height: 32px;">
                                                <option value="percent" {{ $quotation_discount_type == 'percent' ? 'selected' : '' }}>%</option>
                                                <option value="amount" {{ $quotation_discount_type == 'amount' ? 'selected' : '' }}>THB</option>
                                            </select>
                                            <input type="number" id="discount_value" name="discount_value" class="form-control form-control-sm ms-2 text-center calc-trigger" value="{{ $quotation_discount_value }}" style="width: 85px; height: 32px;">
                                        </div>
                                        <span class="input-custom-black fw-bold" id="discount_display">(0.00)</span>
                                    </div>

                                    <div class="d-flex justify-content-between pt-2 border-top border-dark">
                                        <span class="label-main" style="font-size: 1.1rem;">NET TOTAL:</span>
                                        <span class="input-custom-black fw-bold" id="net_total_display" style="font-size: 1.1rem;">0.00</span>
                                    </div>
                                </div>
                            </div>

                            <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 Quotation
                                </button>
                            </div>
                        </form>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</section>

<br><br>

@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>
    $(document).ready(function() {
        let originalMainTitle = "";
        let isSynced = false;
        
        // อ่านค่าสถานะตั้งต้นจากใบเสนอราคาเก่า (ถ้ามี)
        let qtyModeActive = parseInt($('#use_qty_input').val()) === 1;

        // Initialize Datepicker
        $('#q_date, #exp_date').datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight: true });
        $('.input-group-text').on('click', function() { $(this).prev('input').focus(); });

        // Project Name Sync
        $('#btn-sync-project').on('click', function() {
            const projectVal = $('#project_name_input').val();
            const mainTitleInput = $('#main_description_input');
            if (!isSynced) {
                originalMainTitle = mainTitleInput.val();
                mainTitleInput.val(projectVal);
                $(this).addClass('btn-primary text-white').removeClass('btn-outline-primary');
                isSynced = true;
            } else {
                mainTitleInput.val(originalMainTitle);
                $(this).addClass('btn-outline-primary').removeClass('btn-primary text-white');
                isSynced = false;
            }
        });

        // ฟังก์ชันในการสลับหน้าจอเปิด-ปิดระบบ Quantity แบบ Dynamic Responsive
        function toggleQuantityUI(animate = true) {
            if (qtyModeActive) {
                // เปลี่ยนสถานะปุ่มเมื่อเปิดใช้งาน
                $('#btn-toggle-qty').html('<i class="uil uil-minus-circle"></i> Remove Quantity Mode')
                                  .addClass('btn-danger text-white').removeClass('btn-outline-dark');
                $('#amount-header-text').text('Unit Price (THB)');
                $('#main-amount-label').text('Unit Price (THB):');
                $('#use_qty_input').val(1);
                
                // ปรับคอลัมน์ของ Grid ให้ช่อง Quantity แทรกตรงกลางพอดี
                $('#header-desc-title').removeClass('col-md-6').addClass('col-md-5');
                $('#main-desc-col, .sub-desc-col').removeClass('col-md-8 col-md-9').addClass('col-md-6');
                $('#main-amount-col, .sub-amount-col').removeClass('col-md-3').addClass('col-md-3');
                
                if(animate) {
                    $('.qty-column').fadeIn(200);
                } else {
                    $('.qty-column').show();
                }
            } else {
                // เปลี่ยนสถานะปุ่มเมื่อปิดใช้งาน
                $('#btn-toggle-qty').html('<i class="uil uil-layers-alt"></i> + Add Quantity Mode')
                                  .addClass('btn-outline-dark').removeClass('btn-danger text-white');
                $('#amount-header-text').text('Amount (THB)');
                $('#main-amount-label').text('Amount (THB):');
                $('#use_qty_input').val(0);
                
                // คืนค่า Grid ให้ Description กว้างขึ้นเต็มบรรทัดตามเดิม
                if(animate) {
                    $('.qty-column').fadeOut(150, function() {
                        $('#header-desc-title').removeClass('col-md-5').addClass('col-md-6');
                        $('#main-desc-col, .sub-desc-col').removeClass('col-md-6').addClass('col-md-8');
                        $('#main-amount-col, .sub-amount-col').removeClass('col-md-3').addClass('col-md-3');
                    });
                } else {
                    $('.qty-column').hide();
                    $('#header-desc-title').removeClass('col-md-5').addClass('col-md-6');
                    $('#main-desc-col, .sub-desc-col').removeClass('col-md-6').addClass('col-md-8');
                    $('#main-amount-col, .sub-amount-col').removeClass('col-md-3').addClass('col-md-3');
                }
            }
            calculateSummary();
        }

        // กดปุ่มสลับโหมด Quantity
        $('#btn-toggle-qty').on('click', function() {
            qtyModeActive = !qtyModeActive;
            toggleQuantityUI(true);
        });

        // Calculation logic: คำนวณราคารวม
        function calculateSummary() {
            let mainAmount = parseFloat($('#main_amount_input').val()) || 0;
            
            // เช็คค่าว่างหรือค่าที่เป็น 0
            let mainQtyStr = $('#main_qty_input').val();
            let mainQty = qtyModeActive ? (mainQtyStr === "" ? 0 : parseFloat(mainQtyStr)) : 1;
            
            let totalBeforeDiscount = (mainAmount * mainQty);

            // คำนวณยอด Sub-services
            $('.sub-item-row').each(function() {
                let subAmount = parseFloat($(this).find('.sub-amount-input').val()) || 0;
                let subQtyStr = $(this).find('.sub-qty-input').val();
                let subQty = qtyModeActive ? (subQtyStr === "" ? 0 : parseFloat(subQtyStr)) : 1;
                
                totalBeforeDiscount += (subAmount * subQty);
            });

            let dValue = parseFloat($('#discount_value').val()) || 0;
            let dType = $('#discount_type').val();
            
            // คิดส่วนลด
            let finalDisc = (dType === 'percent') ? (totalBeforeDiscount * dValue / 100) : dValue;
            let netTotal = totalBeforeDiscount - finalDisc;

            // แสดงผลลัพธ์
            $('#discount_display').text('(' + finalDisc.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ')');
            $('#net_total_display').text(netTotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
        }

        $(document).on('input change', '.calc-trigger', calculateSummary);

        // Dynamic เพิ่มแถว Sub-service
        $('#add-sub-btn').on('click', function() {
            let rowCount = $('#sub-service-wrapper .sub-item-row').length + 1;
            let descColClass = qtyModeActive ? 'col-md-6' : 'col-md-8';
            let qtyStyle = qtyModeActive ? 'display: block;' : 'display: none;';
            
            let newRow = `
                <div class="row gy-2 mb-3 sub-item-row align-items-center" style="display:none">
                    <div class="${descColClass} sub-desc-col">
                        <label class="label-sub-purple">- Sub-service <span class="row-number">${rowCount}</span>:</label>
                        <textarea class="form-control form-control-custom input-custom-black" name="sub_services[]" placeholder="Sub-service detail..."></textarea>
                    </div>
                    <div class="col-md-2 qty-column mt-auto" style="${qtyStyle}">
                        <input type="number" class="form-control form-control-custom input-custom-black text-center calc-trigger sub-qty-input" name="sub_qtys[]" value="1" placeholder="0" min="0">
                    </div>
                    <div class="col-md-3 mt-auto sub-amount-col">
                        <input type="number" class="form-control form-control-custom input-custom-black text-end calc-trigger sub-amount-input" name="sub_amounts[]" placeholder="0.00" step="0.01">
                    </div>
                    <div class="col-md-1 col-2 mt-auto text-center remove-button-col" style="width: 45px; padding: 0;">
                        <i class="uil uil-trash-alt remove-btn"></i>
                    </div>
                </div>`;
                
            $(newRow).appendTo('#sub-service-wrapper').fadeIn(300);
            updateRemoveButtons();
            calculateSummary();
        });

        // ปุ่มลบแถว
        $(document).on('click', '.remove-btn', function() {
            $(this).closest('.sub-item-row').fadeOut(200, function() { 
                $(this).remove(); 
                reorderRows(); 
                updateRemoveButtons(); 
                calculateSummary(); 
            });
        });

        function reorderRows() { $('#sub-service-wrapper .row-number').each(function(index) { $(this).text(index + 1); }); }
        function updateRemoveButtons() { $('.remove-btn').toggleClass('d-none', $('#sub-service-wrapper .sub-item-row').length <= 1); }

        // เรียกทำงานตอนเริ่มโหลดหน้าเว็บ
        toggleQuantityUI(false);

         const standardRemark = 'หมายเหตุ: หากยืนยันการจัดจ้าง โปรดลงนามยืนยันและส่งกลับมาภายใน 30 วันนับจากวันที่ระบุในใบเสนอราคา';
        let remarkInserted = false;

        $('#btn-insert-remark').on('click', function() {
            const $textarea = $('#remark_input');
            if (!remarkInserted) {
                $textarea.val(standardRemark);
                $(this).addClass('btn-secondary text-white').removeClass('btn-outline-secondary');
                $(this).html('<i class="uil uil-times"></i> ล้างข้อความ');
                remarkInserted = true;
            } else {
                $textarea.val('');
                $(this).addClass('btn-outline-secondary').removeClass('btn-secondary text-white');
                $(this).html('<i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน');
                remarkInserted = false;
            }
        });

        // ถ้าผู้ใช้พิมพ์อะไรเองลงไป ให้ reset สถานะปุ่มกลับเป็นปกติ
        $('#remark_input').on('input', function() {
            if ($(this).val() !== standardRemark) {
                remarkInserted = false;
                $('#btn-insert-remark').addClass('btn-outline-secondary').removeClass('btn-secondary text-white');
                $('#btn-insert-remark').html('<i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน');
            }
        });

    });
</script>
@endsection