@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 = []; 
} 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) ?? [];
}
@endphp

@extends('layouts.master')

@section('title')
    Quotation 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>
@endsection

@section('content')
@include('layouts.header')

<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;">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 }}">

                            <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>
                                    {{-- <textarea type="text" id="project_name_input" class="form-control form-control-custom input-custom-black" name="project_name" value="{{ $quotation_project_name }}" placeholder="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">
                                    <div class="col-9">Description</div>
                                    <div class="col-3 text-end">Amount (THB)</div>
                                </div>
                            </div>

                            <div class="row gy-3 mb-4">
                                <div class="col-md-9">
                                    <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-3 mt-auto">
                                    <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>

                            <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-8">
                                                <label class="label-sub-purple">- Sub-service <span class="row-number">{{ $index + 1 }}</span>:</label>
                                                {{-- แก้ไขตรงนี้: เอา value="" ออก แล้วเอา $item มาใส่ตรงกลาง --}}
                                                <textarea class="form-control form-control-custom input-custom-black" name="sub_services[]" placeholder="Sub-service detail...">{{ $item }}</textarea>
                                            </div>
                                            <div class="col-md-1">
                                                <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-8">
                                            <label class="label-sub-purple">- Sub-service <span class="row-number">1</span>:</label>
                                            <textarea type="text" class="form-control form-control-custom input-custom-black" name="sub_services[]" placeholder="Sub-service detail..."></textarea>
                                        </div>
                                        <div class="col-md-1"><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 justify-content-end text-end">
                                <div class="col-md-7 col-lg-6">
                                    <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>

@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>
    $(document).ready(function() {
        let originalMainTitle = "";
        let isSynced = false;

        // 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;
            }
        });

        // Calculation logic
        function calculateSummary() {
            let amount = parseFloat($('#main_amount_input').val()) || 0;
            let dValue = parseFloat($('#discount_value').val()) || 0;
            let dType = $('#discount_type').val();
            let finalDisc = (dType === 'percent') ? (amount * dValue / 100) : dValue;
            let netTotal = amount - 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 logic
        $('#add-sub-btn').on('click', function() {
            let rowCount = $('#sub-service-wrapper .sub-item-row').length + 1;
            let newRow = `
                <div class="row gy-2 mb-3 sub-item-row align-items-center" style="display:none">
                    <div class="col-md-8">
                        <label class="label-sub-purple">- Sub-service <span class="row-number">${rowCount}</span>:</label>
                        <textarea type="text" class="form-control form-control-custom input-custom-black" name="sub_services[]" placeholder="Sub-service detail..."></textarea>
                    </div>
                    <div class="col-md-1"><i class="uil uil-trash-alt remove-btn"></i></div>
                </div>`;
            $(newRow).appendTo('#sub-service-wrapper').fadeIn(300);
            updateRemoveButtons();
        });

        $(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); }

        calculateSummary(); // Run on page load
    });
</script>
@endsection