@php

if($quotation->quotation_status_approved == 'approved'){

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

}else{

    $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>
@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>
                    <a href="{{ url()->previous() }}" class="btn btn-outline-dark rounded-pill btn-sm">
                        <i class="uil uil-arrow-left"></i> Back
                    </a>
                </div> --}}
                <div class="d-flex justify-content-between align-items-center mb-5 no-print">
                    <div>
                        <h2 class="display-6 mb-0">Quotation Details</h2>
                        
                        {{-- เพิ่มเงื่อนไขแสดงสถานะ Rejected และรายละเอียดตรงนี้ --}}
                        @if($quotation->quotation_status_approved == 'rejected')
                            <div class="mt-2">
                                <div style="color: #dc3545; font-size: 0.9rem; font-weight: bold; border: 1.5px solid #dc3545; padding: 2px 10px; display: inline-block; border-radius: 4px; letter-spacing: 0.5px; vertical-align: middle;">
                                    REJECTED
                                </div>
                                <span class="ms-2 text-danger fw-bold" style="font-size: 0.95rem;">
                                    by {{ $who ? $who : 'Unknown User' }}
                                </span>
                                @if(!empty(trim($comment)))
                                    <div class="text-muted mt-2 bg-light border rounded" style="font-size: 0.85rem; max-width: 500px; padding: 10px 14px; text-align: left;">
                                        <div style="display: flex; align-items: flex-start; line-height: 1.4;">
                                            
                                            <strong class="text-dark" style="flex-shrink: 0; margin-right: 6px; display: inline-flex; align-items: center;">
                                                <i class="uil uil-comment-alt-notes" style="margin-right: 3px;"></i> Reason:
                                            </strong> 
                                            
                                            <span style="white-space: pre-line; color: #6c757d; flex-grow: 1;">{{ $comment }}</span>
                                            
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif

                         @if($quotation->quotation_status_approved == 'approved')
                            @if($quotation->quotation_customer == 'rejected')
                            
                                <div class="mt-2">
                                    <div style="color: #dc3545; font-size: 0.9rem; font-weight: bold; border: 1.5px solid #dc3545; padding: 2px 10px; display: inline-block; border-radius: 4px; letter-spacing: 0.5px; vertical-align: middle;">
                                         CUSTOMER REJECTED
                                    </div>
                                    
                                    @if(!empty(trim($comment)))
                                        <div class="text-muted mt-2 bg-light border rounded" style="font-size: 0.85rem; max-width: 500px; padding: 10px 14px; text-align: left;">
                                            <div style="display: flex; align-items: flex-start; line-height: 1.4;">
                                                
                                                <strong class="text-dark" style="flex-shrink: 0; margin-right: 6px; display: inline-flex; align-items: center;">
                                                    <i class="uil uil-comment-alt-notes" style="margin-right: 3px;"></i> Reason:
                                                </strong> 
                                                
                                                <span style="white-space: pre-line; color: #6c757d; flex-grow: 1;">{{ $comment }}</span>
                                                
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endif
                        @endif
                    </div>
                    
                    <a href="{{ url()->previous() }}" class="btn btn-outline-dark rounded-pill btn-sm">
                        <i class="uil uil-arrow-left"></i> Back
                    </a>
                </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>

                            @if(!empty($quotation->quotation_upload_file) && $quotation->quotation_upload_file != 'rejected')
                                <a href="{{ asset('file_upload/' . $quotation->quotation_upload_file) }}" target="_blank" class="btn btn-outline-dark rounded-pill px-10 ms-2">
                                    <i class="uil uil-paperclip me-1"></i> Attachment
                                </a>
                            @endif
                        </div>

                        @php
                            $all_workflow_approve = DB::table('workflow_approve')
                                ->where('workflow_approve_item', $id)
                                ->get();

                            $workflow_approve_who = $all_workflow_approve->where('workflow_approve_status', 'pending')->first();
                            $workflow_reject_who = $all_workflow_approve->where('workflow_approve_status', 'rejected');

                            $user_meta = DB::table('user_meta')->where('user_userid', Auth::user()->id)->first();
                            $my_roles = $user_meta ? explode('///', $user_meta->user_role) : [];

                            // ดึงลายเซ็นทั้งหมดของผู้ใช้คนนี้ เผื่อมีมากกว่า 1 แบบ
                            $my_signatures = DB::table('signature')
                                ->where('signature_who', Auth::user()->id)
                                ->get();

                            $signature = $my_signatures->first(); // ใช้เช็คว่ามีลายเซ็นหรือยัง (คงพฤติกรรมเดิมไว้)
                        @endphp
                             
                        @if($workflow_approve_who && (in_array($workflow_approve_who->workflow_approve_who_id, $my_roles) || $workflow_approve_who->workflow_approve_who === 'Customer'))

                            <hr>
                            <form action="{{url('workflow_after_pending_quotation')}}" method="post" enctype="multipart/form-data" id="approve_reject_form">
                                    {!! csrf_field() !!}
                                    <input type="hidden" value="{{ $id }}" name="quotation_id">
                                    <input type="hidden" value="{{ $workflow_approve_who->workflow_approve_id }}" name="workflow_approve_id">
                                    <input type="hidden" value="{{ Auth::user()->id }}" name="who_approve">
                                    <input type="hidden" value="{{ $signature->signature_id ?? '' }}" name="signature_id" id="selected_signature_id">
                                    <input type="hidden" name="status" id="status_hidden" value="">
                                    <div class="row justify-content-center mt-10">
                                        <div class="col-md-8 text-center">
                                    <button class="btn btn-sm btn-green check-signature" type="submit" name="status" value="approved" id="confirm_approved" style="margin: 20px;" data-has-signature="{{ empty($signature) ? 'false' : 'true' }}" data-signature-count="{{ $my_signatures->count() }}">
                                        <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>

                                    <button type="button" class="btn btn-sm btn-red check-signature" id="btn_reject_trigger" style="margin: 20px;" data-has-signature="{{ empty($signature) ? 'false' : 'true' }}">
                                        <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>

                                    @if($workflow_approve_who->workflow_approve_who === 'Customer')
                                        <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>
                                    @endif    
                                </div>
                                    </div>

                                    <div class="modal fade" id="modal-reject" tabindex="-1">
                                        <div class="modal-dialog modal-dialog-centered modal-md">
                                            <div class="modal-content text-center">
                                                <div class="modal-body">
                                                    <h4 class="mb-6">Add Comment</h4>
                                                    <div class="newsletter-wrapper">
                                                        <div class="row">
                                                            <div class="col-md-10 offset-md-1">
                                                                <div class="mc-field-group input-group form-floating">
                                                                    <textarea style="height:100px; width: 350px;" name="remark" class="form-control" placeholder="Comment" id="mce-COMMENT"></textarea>
                                                                    <label for="mce-COMMENT">Comment</label>
                                                                </div>
                                                                <button type="submit" name="status" value="rejected" class="btn btn-primary rounded-pill mt-5 me-1">Submit</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Modal เลือกลายเซ็น กรณีผู้ใช้มีลายเซ็นมากกว่า 1 แบบ --}}
                                    <div class="modal fade" id="modal-select-signature" tabindex="-1">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content text-center">
                                                <div class="modal-body p-8">
                                                    <h4 class="mb-2">เลือกลายเซ็นที่ต้องการใช้</h4>
                                                    <p class="text-muted mb-6" style="font-size:0.9rem;">คุณมีลายเซ็นมากกว่า 1 แบบ กรุณาเลือกลายเซ็นที่จะใช้อนุมัติเอกสารนี้</p>
                                                    <div class="row justify-content-center g-3">
                                                        @foreach($my_signatures as $sig)
                                                            <div class="col-md-5 col-12">
                                                                <label class="signature-choice d-block" style="cursor:pointer; border:2px solid #e0e0e0; border-radius:12px; padding:15px; transition:border-color .15s;">
                                                                    <input type="radio" name="signature_choice" value="{{ $sig->signature_id }}"
                                                                           class="d-none signature-radio" {{ $loop->first ? 'checked' : '' }}>
                                                                    <div style="padding:10px; border-radius:10px; background: repeating-conic-gradient(#f0f0f0 0% 25%, #ffffff 0% 50%) 0 0 / 16px 16px;">
                                                                        <img src="{{ route('signature.view', ['filename' => basename($sig->signature_picture)]) }}"
                                                                             alt="signature" style="max-width:100%; max-height:100px; object-fit:contain; display:block; margin:0 auto;">
                                                                    </div>
                                                                    <div class="mt-2 fw-bold" style="font-size:0.9rem; color:#343f52;">
                                                                        {{ $sig->signature_purpose ?: 'ไม่ระบุวัตถุประสงค์' }}
                                                                    </div>
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                    <button type="button" id="btn-confirm-signature" class="btn btn-sm btn-green rounded-pill mt-6 px-6">
                                                        ใช้ลายเซ็นนี้
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <style>
                                        .signature-choice:has(.signature-radio:checked) {
                                            border-color: #605dba !important;
                                            box-shadow: 0 0 0 3px rgba(96,93,186,0.15);
                                        }
                                    </style>
                            </form>
                            
                        @endif

                        {{-- @if(!$workflow_reject_who->isEmpty() && Auth::user()->hasAnyRole(['Admin', 'Admin-Consult']))
                            <form action="{{url('workflow_after_reject')}}" method="post" enctype="multipart/form-data">
                                {!! csrf_field() !!}
                                <input type="hidden" value="{{ $id }}" name="quotation_id">
                                <input type="hidden" value="{{ $workflow_approve_who->workflow_approve_id ?? '' }}" name="workflow_approve_id">
                                <div class="row justify-content-center mt-10">
                                    <div class="col-md-8 text-center">
                                        <button class="btn btn-sm btn-purple" type="submit" name="status" value="pending" id="confirm" style="margin: 20px;">
                                            <span style="display: inline-flex;"><span class="my-auto"> Resubmit </span><i class="uil-check-circle" style="font-size: 24px;margin-left: 10px;"></i></span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        @endif --}}

                    </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>
$(document).ready(function() {
    $('.check-signature').on('click', function(e) {
        let hasSignature = $(this).data('has-signature');
        let currentButton = $(this);

        if (hasSignature === false || hasSignature === 'false') {
            e.preventDefault();

            Swal.fire({
                title: 'Signature Required!',
                text: 'Please set up your signature before approving or rejecting this document.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Go to Signature List',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ url('/signature_list') }}";
                }
            });
            return false;
        }

        if (currentButton.attr('id') === 'btn_reject_trigger') {
            e.preventDefault();
            var myModal = new bootstrap.Modal(document.getElementById('modal-reject'));
            myModal.show();
            return;
        }

        // ปุ่ม Approved: ถ้ามีลายเซ็นมากกว่า 1 แบบ ให้เปิด modal ให้เลือกก่อน แทนที่จะ submit ทันที
        if (currentButton.attr('id') === 'confirm_approved') {
            e.preventDefault();

            let signatureCount = parseInt(currentButton.data('signature-count'), 10) || 0;
            if (signatureCount > 1) {
                var selectModal = new bootstrap.Modal(document.getElementById('modal-select-signature'));
                selectModal.show();
                return;
            }

            // ถ้ามีลายเซ็นแบบเดียว ให้ถาม confirm ก่อน แล้วค่อย submit
            Swal.fire({
                title: 'ยืนยันการอนุมัติ?',
                text: 'คุณต้องการอนุมัติใบเสนอราคานี้ใช่หรือไม่',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#22c55e',
                cancelButtonColor: '#d33',
                confirmButtonText: 'ยืนยัน Approved',
                cancelButtonText: 'ยกเลิก'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#status_hidden').val('approved');
                    $('#approve_reject_form')[0].submit();
                }
            });
        }
    });

    // ไฮไลท์กรอบลายเซ็นที่ถูกเลือกใน modal
    $(document).on('change', '.signature-radio', function() {
        $('.signature-choice').removeClass('selected').css({ 'border-color': '#e0e0e0', 'box-shadow': 'none' });
        $(this).closest('.signature-choice').addClass('selected').css({ 'border-color': '#605dba', 'box-shadow': '0 0 0 3px rgba(96,93,186,0.15)' });
    });
    $('.signature-radio:checked').closest('.signature-choice').addClass('selected').css({ 'border-color': '#605dba', 'box-shadow': '0 0 0 3px rgba(96,93,186,0.15)' });

    // ยืนยันการเลือกลายเซ็น แล้ว submit ฟอร์มอนุมัติ
    
    $('#btn-confirm-signature').on('click', function() {
        let chosenId = $('input[name="signature_choice"]:checked').val();
        if (!chosenId) {
            Swal.fire('กรุณาเลือกลายเซ็นก่อน', '', 'warning');
            return;
        }

        var selectModalEl = document.getElementById('modal-select-signature');
        var selectModal = bootstrap.Modal.getInstance(selectModalEl);
        if (selectModal) selectModal.hide();

        Swal.fire({
            title: 'ยืนยันการอนุมัติ?',
            text: 'คุณต้องการอนุมัติใบเสนอราคานี้ใช่หรือไม่',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#22c55e',
            cancelButtonColor: '#d33',
            confirmButtonText: 'ยืนยัน Approved',
            cancelButtonText: 'ยกเลิก'
        }).then((result) => {
            if (result.isConfirmed) {
                $('#selected_signature_id').val(chosenId);
                $('#status_hidden').val('approved');
                $('#approve_reject_form')[0].submit();
            }
        });
    });
});
</script>
@endsection