@php
    $breadcrumbs = [
        'Invoice List' => url('/invoice_list')
        // 'Signature Editor' => ''
    ];
@endphp
@extends('layouts.master')

@section('title')
    Invoice List
@endsection

@section('style')
    <style>
        
    </style>
@endsection

@section('content')

{{-- @include('layouts.header') --}}

<section class="wrapper bg-light">
    <div class="container py-14">
        <div class="card">
            <div class="card-body">

                <h5 class="display-1 mb-3" style="font-size:25px">Invoice List</h5>

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <form method="GET" action="{{ url('/invoice_list_completed') }}">
                        <select name="year" id="year_filter" class="form-select" style="min-width: 220px;" onchange="this.form.submit()">
                            @foreach ($academicYears as $ay)
                                <option value="{{ $ay->academic_name }}" {{ (string) $selectedYear === (string) $ay->academic_name ? 'selected' : '' }}>
                                    {{ $ay->academic_name }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                </div>

                {{-- <div align="right">
                    <a class="btn btn-sm btn-violet rounded-pill me-2" href="{{ url('/invoice_getedit/0') }}">
                        <i class="uil uil-plus"></i> Set Invoice
                    </a>
                </div> --}}

                <br>

                <div class="table-responsive">
                    <table id="example" width="100%" class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th width="5%">No.</th>
                                <th width="30%">Project Name</th>
                                <th width="15%">Invoice No.</th>
                                <th width="10%">Invoice Date</th>
                                <th width="10%">Expiration Date</th>
                                <th width="5%">Status</th>
                                <th width="5%">Workflow Status</th>
                                <th width="5%">Customer Status</th>
                                <th width="30%"></th>
                            </tr>
                        </thead>
                        <tbody>
                                @foreach($invoice as $key => $row)
                                    @php
                                        $today = \Carbon\Carbon::now()->startOfDay();
                                        $startDate = \Carbon\Carbon::parse($row->invoice_date)->startOfDay();
                                        $endDate = \Carbon\Carbon::parse($row->invoice_exp_date)->startOfDay();
                                    @endphp
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $row->invoice_project_name }}</td>
                                        <td>{{ $row->invoice_no }}</td>
                                        <td>{{ date('d F Y', strtotime($row->invoice_date))  }}</td>
                                        <td>{{ date('d F Y', strtotime($row->invoice_exp_date))  }}</td>
                                        <td>

                                            @if ($row->invoice_status_form == 'waiting')
                                                <span class="badge bg-warning text-dark">Waiting</span>
                                            @elseif ($row->invoice_status_form == 'active')
                                                <span class="badge bg-success">Active</span>
                                            @elseif ($row->invoice_status_form == 'expired')
                                                <span class="badge bg-danger">Expired</span>
                                            @elseif ($row->invoice_status_form == 'completed')
                                                <span class="badge bg-success">Completed</span>
                                            @else
                                                <span class="badge bg-secondary">{{ $row->invoice_status_form }}</span>
                                            @endif

                                        </td>
                                        <td>
                                            @if ($row->invoice_status_approved  == 'waiting')
                                                {{-- ยังไม่ถึงวันที่เริ่ม (Waiting - สีส้ม) --}}
                                                <span class="badge bg-purple text-white">Waiting</span>
                                            @elseif ($row->invoice_status_approved  == 'pending')
                                                {{-- อยู่ในช่วงวันที่กำหนด (Active - สีเขียว) --}}
                                                <span class="badge bg-yellow">Pending</span>
                                         
                                            @elseif ($row->invoice_status_approved  == 'approved')
                                                {{-- อยู่ในช่วงวันที่กำหนด (Active - สีเขียว) --}}
                                                <span class="badge bg-success">Approved</span>

                                            @elseif ($row->invoice_status_approved  == 'rejected')
                                                {{-- อยู่ในช่วงวันที่กำหนด (Active - สีเขียว) --}}
                                                <span class="badge bg-danger">Rejected</span>     

                                            @elseif ($row->invoice_status_approved  == 'import')
                                                {{-- อยู่ในช่วงวันที่กำหนด (Active - สีเขียว) --}}
                                                <span class="badge bg-purple text-white">Import</span>
                                            @endif
                                        </td>

                                        <td>
                                             @if ($row->invoice_customer  == '')
                                                <span class="badge bg-purple text-white">Waiting</span>
                                             @elseif ($row->invoice_customer  == 'approved')
                                                <span class="badge bg-success">Approved</span>
                                             @elseif ($row->invoice_customer == 'rejected')
                                                <span class="badge bg-red">Rejected</span>
                                             @endif
                                        </td>

                                        <td align="center">
                                                    <a href="{{ url('/invoice_view', $row->invoice_id) }}" class="btn btn-circle btn-blue btn-sm" title="View">
                                                        <i class="uil uil-eye"></i>
                                                    </a>
                                                    
                                                    @if ($row->invoice_customer == '')

                                                        <button type="button" 
                                                                class="btn btn-circle btn-green btn-sm btn-manage-invoice" 
                                                                title="Manage Link/Email"
                                                                data-bs-toggle="modal" 
                                                                data-bs-target="#manageModal"
                                                                data-id="{{ $row->invoice_id }}"
                                                                data-project="{{ $row->invoice_project_name }}"
                                                                data-no="{{ $row->invoice_no }}"
                                                                data-url="{{ asset('/invoice_public_view') }}/{{ $row->invoice_id }}"> 
                                                            <i class="uil uil-link-alt"></i>
                                                        </button>

                                                        {{-- ปรับปรุงใหม่: เปลี่ยนปุ่มสีชมพูเป็นระบบแนบไฟล์อัปโหลดทันที (ไม่ต้องเปิด Modal) --}}
                                                       <button type="button" 
                                                                class="btn btn-circle btn-pink btn-sm btn-upload-modal" 
                                                                title="Upload & Status"
                                                                data-bs-toggle="modal" 
                                                                data-bs-target="#uploadStatusModal"
                                                                data-id="{{ $row->invoice_id }}"
                                                                data-project="{{ $row->invoice_project_name }}"
                                                                data-no="{{ $row->invoice_no }}"> 
                                                            <i class="uil uil-upload"></i>
                                                        </button>

                                                    @endif

                                                    {{-- ถ้ามีไฟล์ที่เคยอัปโหลดไว้ ให้แสดงปุ่มเปิดดูไฟล์ --}}
                                                    @if (!empty($row->invoice_upload_file))
                                                        @if($row->invoice_customer == 'rejected')
                                                        @else
                                                            <a href="{{ asset('file_upload/' . $row->invoice_upload_file) }}" 
                                                            target="_blank" 
                                                            class="btn btn-circle btn-info btn-sm" 
                                                            title="View Attached File">
                                                                <i class="uil uil-paperclip"></i>
                                                            </a>
                                                        @endif
                                                    @endif

                                                    <a href="{{ url('/invoice_pdf', $row->invoice_id) }}" class="btn btn-circle btn-yellow btn-sm" title="Preview">
                                                                <i class="uil uil-file"></i>
                                                    </a>

                                                    {{-- <a href="{{ url('/invoice_getedit', $row->invoice_id) }}" class="btn btn-circle btn-info btn-sm" title="Edit">
                                                        <i class="uil uil-pen"></i>
                                                    </a> --}}

                                                    <a href="{{ url('/invoice_duplicate', $row->invoice_id) }}" class="btn btn-circle btn-purple btn-sm" title="Duplicate">
                                                        <i class="uil uil-plus"></i>
                                                    </a>

                                                    <a href="{{ url('/invoice_delete', $row->invoice_id) }}" class="btn btn-circle btn-danger btn-sm" title="Delete" onclick="return confirm('Confirm Delete ?');">
                                                        <i class="uil uil-trash-alt"></i>
                                                    </a>
                                        </td>
                                    </tr>
                                @endforeach
                            
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="manageModal" tabindex="-1" aria-labelledby="manageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="manageModalLabel">Invoice Management</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                
                <div id="actionOptions" class="my-4">
                    <div class="d-flex justify-content-center gap-3 mb-3">
                        <button type="button" class="btn btn-violet px-4" id="btnChooseEmail">
                            <i class="uil uil-envelope me-1"></i> ส่งอีเมล (Send Email)
                        </button>
                        <button type="button" class="btn btn-blue px-4" id="btnCopyLink">
                            <i class="uil uil-copy me-1"></i> เลือกลิงก์เพื่อคัดลอก (Select Link)
                        </button>
                    </div>
                    <div class="px-3">
                        <label class="form-label text-muted" style="font-size: 12px; font-weight: bold; color: #7c5ac2 !important;">ลิงก์ใบเสนอราคา (คลิกในช่องเพื่อเลือกทั้งหมด):</label>
                        <input type="text" class="form-control text-dark fw-bold border-primary" id="displayShareLink" readonly 
                            style="background-color: #f0f4f8 !important; cursor: pointer;" 
                            onclick="this.select(); document.execCommand('copy');">
                        <span class="text-success d-none" id="copySuccessText" style="font-size: 11px;"><i class="uil uil-check"></i> คัดลอกลงคลิปบอร์ดแล้ว! สามารถนำไปวางได้ทันที</span>
                    </div>
                </div>

                <form id="emailForm" action="{{ url('/invoice_send_email') }}" method="POST" class="d-none mt-2">
                    @csrf
                    <input type="hidden" name="invoice_id" id="modalInvoiceId">
                    <input type="hidden" name="invoice_url" id="modalInvoiceUrl">
                    <input type="hidden" name="invoice_project_name" id="modalProjectNameHidden">
                    <input type="hidden" name="invoice_no" id="modalInvoiceNoHidden">
                    
                    <h6 class="mb-3 text-violet"><i class="uil uil-envelope"></i> รายละเอียดการส่งอีเมล</h6>
                    
                    <div class="p-3 mb-3 bg-light rounded border" style="font-size: 14px; line-height: 1.6;">
                        <div class="mb-1">
                            <strong>Project Name:</strong> 
                            <span id="displayProjectName" class="text-dark fw-bold ms-1"></span>
                        </div>
                        <div>
                            <strong>Invoice No:</strong> 
                            <span id="displayInvoiceNo" class="text-dark fw-bold ms-1"></span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="emailInput" class="form-label">อีเมลผู้รับ <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="emailInput" name="email" placeholder="example@email.com" required>
                    </div>
                    <div class="mb-3">
                        <label for="noteInput" class="form-label">รายละเอียดเพิ่มเติม (แสดงในเมล)</label>
                        <textarea class="form-control" id="noteInput" name="note" rows="3" placeholder="ระบุข้อความสั้นๆ ถึงลูกค้า..."></textarea>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-sm btn-secondary" id="btnBackToOptions">ย้อนกลับ</button>
                        <button type="submit" class="btn btn-sm btn-success">ยืนยันส่งอีเมล</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="uploadStatusModal" tabindex="-1" aria-labelledby="uploadStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadStatusModalLabel">อัปเดตสถานะและแนบไฟล์ใบเสนอราคา</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ url('/invoice_upload_file') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="invoice_id" id="statusModalInvoiceId">

                    <div class="p-3 mb-3 bg-light rounded border" style="font-size: 14px; line-height: 1.6;">
                        <div class="mb-1">
                            <strong>Project Name:</strong> 
                            <span id="statusDisplayProjectName" class="text-dark fw-bold ms-1"></span>
                        </div>
                        <div>
                            <strong>Invoice No:</strong> 
                            <span id="statusDisplayInvoiceNo" class="text-dark fw-bold ms-1"></span>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label d-block fw-bold text-dark">ผลการพิจารณาใบเสนอราคา <span class="text-danger">*</span></label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input text-success" type="radio" name="invoice_status" id="radioApproved" value="approved" required checked>
                            <label class="form-check-label text-success fw-bold" for="radioApproved">
                                <i class="uil uil-check-circle me-1"></i> Approved
                            </label>
                        </div>
                        <div class="form-check form-check-inline ms-3">
                            <input class="form-check-input text-danger" type="radio" name="invoice_status" id="radioRejected" value="rejected" required>
                            <label class="form-check-label text-danger fw-bold" for="radioRejected">
                                <i class="uil uil-times-circle me-1"></i> Rejected
                            </label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="statusComment" class="form-label fw-bold text-dark">หมายเหตุ / เหตุผลเพิ่มเติม</label>
                        <textarea class="form-control" id="statusComment" name="comment" rows="3" placeholder="ระบุเหตุผลประกอบการตัดสินใจ (ถ้ามี)..."></textarea>
                    </div>

                    <div class="mb-2">
                        <label for="statusFileInput" class="form-label fw-bold text-dark">แนบเอกสารอ้างอิง (เช่น PDF, รูปภาพหลักฐาน)</label>
                        <input type="file" class="form-control" id="statusFileInput" name="invoice_file">
                        <div class="form-text text-muted" style="font-size: 11px;">รองรับไฟล์ประเภท pdf, jpg, png ขนาดไม่เกิน 2MB</div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                    <button type="submit" class="btn btn-sm btn-primary">บันทึกข้อมูล</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- @include('layouts.footer') --}}

@endsection

@section('script')
  
    {{-- Tawk.to Script --}}
    <script type="text/javascript">
        var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
        (function() {
            var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
            s1.async = true;
            s1.src = 'https://embed.tawk.to/68302140bb633c190b31fe04/1iru03pj0';
            s1.charset = 'UTF-8';
            s1.setAttribute('crossorigin', '*');
            s0.parentNode.insertBefore(s1, s0);
        })();
    </script>

    {{-- Logic Chatbot / Webhook --}}
    <script>
        Tawk_API.onMessageReceived = function(msg) {
            if (msg && msg.text && msg.senderType === "visitor") {
                fetch("https://hook.eu2.make.com/4rvrtmbr4j0ydel4en3ab58bhlnggn11", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ message: msg.text })
                });
            }
        };

        async function fetchReplyAndSend() {
            try {
                const res = await fetch("http://143.198.213.150/consultingcenter/public/api/chatbot/reply");
                const data = await res.json();
                if (data.reply && typeof Tawk_API.addMessage === "function") {
                    Tawk_API.addMessage(data.reply);
                }
            } catch (err) {
                console.error("Error:", err);
            }
        }
        setInterval(fetchReplyAndSend, 5000);
    </script>

    {{-- สคริปต์ควบคุมระบบการแชร์ข้อมูลและป๊อปอัป (ปรับปรุงเสร็จสมบูรณ์) --}}
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        let currentLink = "";
        let currentProject = "";
        let currentNo = "";
        let currentId = "";

        // 1. ดักจับเหตุการณ์เมื่อคลิกปุ่ม Manage ในแถวตาราง
        // ค้นหาฟังก์ชันดักจับเหตุการณ์คลิกปุ่ม Manage ในโค้ดสคริปต์ด้านล่าง แล้วปรับชุดนี้ครับ
        const manageButtons = document.querySelectorAll('.btn-manage-invoice');
        manageButtons.forEach(button => {
            button.addEventListener('click', function() {
                currentId = this.getAttribute('data-id');
                currentProject = this.getAttribute('data-project');
                currentNo = this.getAttribute('data-no');
                currentLink = this.getAttribute('data-url');

                // สลักตัวลิงก์จริงลงในช่อง Input เพื่อให้ปรากฏบนหน้าจอ
                const linkInput = document.getElementById('displayShareLink');
                if (linkInput) {
                    linkInput.value = currentLink || 'ไม่พบลิงก์';
                }

                resetModalState();
            });
        });

        // 2. คลิกเลือก "ส่งอีเมล" -> โชว์ข้อมูลจริงประจำแถวพร้อมฟอร์มกรอกข้อมูล
        document.getElementById('btnChooseEmail').addEventListener('click', function() {
            // แมปค่าใส่ลงไปใน Input สลักข้อความของฟอร์มหลัก
            document.getElementById('modalInvoiceId').value = currentId || '';
            document.getElementById('modalInvoiceUrl').value = currentLink || '';
            document.getElementById('modalProjectNameHidden').value = currentProject || '';
            document.getElementById('modalInvoiceNoHidden').value = currentNo || '';

            // แสดงผลชื่อโครงการและรหัสใบเสนอราคาบนหน้าต่างย่อยตามค่าจริงที่ดึงได้
            document.getElementById('displayProjectName').textContent = currentProject || '-';
            document.getElementById('displayInvoiceNo').textContent = currentNo || '-';

            // สลับสถานะกล่องสไตล์ปิด-เปิดตัวฟอร์ม
            document.getElementById('actionOptions').classList.add('d-none');
            document.getElementById('emailForm').classList.remove('d-none');
        });

        // 3. ปุ่มย้อนกลับภายในฟอร์มส่งอีเมล
        document.getElementById('btnBackToOptions').addEventListener('click', function() {
            resetModalState();
        });

        // 4. ปุ่มคัดลอกลิงก์แบบเสถียรชัวร์ 100% พร้อมล้างบั๊กอาการหน้าจอค้างเงาดำหลังกด OK
        // ค้นหาข้อความดักจับไอดี btnCopyLink ในสคริปต์เดิมของคุณ แล้วแทนที่ด้วยชุดนี้ครับ
        document.getElementById('btnCopyLink').addEventListener('click', function() {
            const linkInput = document.getElementById('displayShareLink');
            const successText = document.getElementById('copySuccessText');
            
            if (linkInput && linkInput.value && linkInput.value !== 'ไม่พบลิงก์') {
                // 1. สั่งไฮไลท์คลุมดำข้อความลิงก์จริงที่โชว์อยู่บนจอทันที
                linkInput.focus();
                linkInput.select();
                linkInput.setSelectionRange(0, 99999); // รองรับมือถือสมาร์ทโฟน
                
                // 2. สั่งคัดลอกผ่านคำสั่งตรงของระบบ (ถ้าเบราว์เซอร์ยอมรับจะติดทันที)
                try {
                    document.execCommand('copy');
                    if (successText) {
                        successText.classList.remove('d-none'); // แสดงข้อความบอกว่าคัดลอกแล้วแทนกล่อง alert
                        setTimeout(() => successText.classList.add('d-none'), 3000);
                    }
                } catch (err) {
                    console.log('Browser blocked auto-copy, user can manually copy the highlighted text.');
                }
            } else {
                alert('ไม่พบลิงก์สำหรับคัดลอก กรุณาปิดป๊อปอัปแล้วคลิกปุ่ม Manage ใหม่อีกครั้ง');
            }
        });

        // ฟังก์ชันล้างค่าโครงสร้างหน้าต่างจัดการกลับสู่สถานะเริ่มต้น
        function resetModalState() {
            document.getElementById('actionOptions').classList.remove('d-none');
            document.getElementById('emailForm').classList.add('d-none');
            document.getElementById('emailInput').value = '';
            document.getElementById('noteInput').value = '';
            document.getElementById('displayProjectName').textContent = '';
            document.getElementById('displayInvoiceNo').textContent = '';
        }
    });



    function triggerFileInput(id) {
        const fileInput = document.getElementById('fileInput_' + id);
        if (fileInput) {
            fileInput.click();
        }
    }

    // ฟังก์ชันเมื่อเลือกไฟล์เสร็จสิ้น จะทำการส่งฟอร์มไป Backend อัตโนมัติ
    function submitUploadForm(id) {
        const fileInput = document.getElementById('fileInput_' + id);
        const form = document.getElementById('uploadForm_' + id);
        
        if (fileInput && fileInput.files.length > 0) {
            const fileName = fileInput.files[0].name;
            // แสดงยืนยันการอัปโหลดก่อนส่งข้อมูล
            if (confirm(`คุณต้องการอัปโหลดไฟล์ "${fileName}" ใช่หรือไม่?`)) {
                form.submit();
            } else {
                fileInput.value = ''; // ล้างค่าหากยกเลิก
            }
        }
    }


    document.addEventListener("DOMContentLoaded", function() {
        // ดักจับเหตุการณ์คลิกปุ่มสีชมพู (.btn-upload-modal) ประจำแถว
        const uploadModalButtons = document.querySelectorAll('.btn-upload-modal');
            uploadModalButtons.forEach(button => {
            button.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                const project = this.getAttribute('data-project');
                const no = this.getAttribute('data-no');

                // ฝังข้อมูลดิบลงใน Input และ Element ของหน้าต่างย่อยอัปโหลด
                document.getElementById('statusModalInvoiceId').value = id || '';
                document.getElementById('statusDisplayProjectName').textContent = project || '-';
                document.getElementById('statusDisplayInvoiceNo').textContent = no || '-';

                // ล้างค่าข้อมูลภายในฟอร์มของหน้าต่างทุกครั้งที่เปิดขึ้นมาใหม่
                document.getElementById('radioApproved').checked = true;
                document.getElementById('statusComment').value = '';
                document.getElementById('statusFileInput').value = '';
            });
        });
    });

    </script>

    
@endsection