@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 id="root-invoice-chart"></div> --}}

        
        <div class="card">
            <div class="card-body">

                <h5 class="display-1 mb-3" style="font-size:25px">Invoice List</h5>
                
               <div class="row">
                    <div class="col-12 d-flex justify-content-end align-items-center">

                        <a class="btn btn-sm btn-orange rounded-pill me-2" href="{{ url('/invoice_discard_list') }}">
                            <i class="uil uil-times"></i> Discard Invoice
                        </a>
                        
                        <a class="btn btn-sm btn-violet rounded-pill me-2" href="{{ url('/invoice_select_quotation') }}">
                            <i class="uil uil-plus"></i> Create Invoice from Quotation
                        </a>
                        
                    </div>
                </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="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-green">Active</span>
                                        @elseif ($row->invoice_status_form == 'expired')
                                            <span class="badge bg-danger">Expired</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>                                         
                                        @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>

                                                        <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>

                                                    @if ($row->invoice_status_approved != 'waiting')
                                                        <button type="button" 
                                                                class="btn btn-circle btn-orange btn-sm btn-discard-trigger" 
                                                                title="Discard" 
                                                                data-id="{{ $row->invoice_id }}"
                                                                data-project="{{ $row->invoice_project_name }}"
                                                                data-no="{{ $row->invoice_no }}"
                                                                data-bs-toggle="modal" 
                                                                data-bs-target="#discardModal">
                                                            <i class="uil uil-times"></i>
                                                        </button>
                                                    @endif
                                                    
                                                    @if ($row->invoice_status_approved  == 'waiting' || $row->invoice_status_approved  == 'rejected' )
                                                        <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>
                                                     @endif

											</td>
                                </tr>
                                @endforeach
                            
                        </tbody>
                    </table>
                </div>

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


    <div class="modal fade" id="discardModal" tabindex="-1" aria-labelledby="discardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-3">
            <div class="modal-header bg-light border-0 py-4 px-5">
                <div class="d-flex align-items-center">
                    <div class="icon text-orange fs-30 me-3">
                        <i class="uil uil-exclamation-triangle"></i>
                    </div>
                    <div>
                        <h5 class="modal-title" id="discardModalLabel" style="font-size: 18px; font-weight: 600;">ยืนยันการ Discard เอกสาร</h5>
                        <small class="text-muted" id="modal-project-info">โครงการ: -</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form id="discardForm" action="" method="POST">
                @csrf
                <div class="modal-body px-5 py-4">
                    <div class="mb-3">
                        <label for="discard_reason" class="form-label text-dark fw-bold" style="font-size: 14px;">
                            ระบุเหตุผลการยกเลิก <span class="text-danger">*</span>
                        </label>
                        <textarea class="form-control bg-light border-0" 
                                  id="discard_reason" 
                                  name="reason" 
                                  rows="4" 
                                  required 
                                  placeholder="กรุณาพิมพ์รายละเอียดหรือเหตุผลที่ต้องการยกเลิกใบเสนอราคานี้..."
                                  style="resize: none; padding: 12px;"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light d-flex justify-content-end py-3 px-5">
                    <button type="button" class="btn btn-sm btn-secondary rounded-pill me-2" data-bs-dismiss="modal" style="padding: 8px 20px;">
                        ยกเลิก
                    </button>
                    <button type="submit" class="btn btn-sm btn-orange rounded-pill" style="padding: 8px 20px;">
                        <i class="uil uil-check me-1"></i> ยืนยันส่งข้อมูล
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
</section>

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

@endsection

@section('script')
<script>
    window.APP_BASE_URL = "{{ url('/') }}";
</script>
@vite(['resources/js/app.jsx'])


    {{-- 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 () {
        // ดักจับการคลิกที่ปุ่มเปิด Modal
        const discardModal = document.getElementById('discardModal');
        if (discardModal) {
            discardModal.addEventListener('show.bs.modal', function (event) {
                // ปุ่มที่เป็นตัวกดเปิด
                const button = event.relatedTarget;
                
                // ดึงค่าข้อมูลจาก Attributes ของปุ่มนั้นๆ
                const invoiceId = button.getAttribute('data-id');
                const projectName = button.getAttribute('data-project');
                const invoiceNo = button.getAttribute('data-no');
                
                // อัปเดตข้อมูลบนหน้าเทมเพลต Popup
                const projectInfoSpace = document.getElementById('modal-project-info');
                projectInfoSpace.textContent = `โครงการ: ${projectName} (${invoiceNo})`;
                
                // ตั้งค่า Action URL ให้กับ Form ให้ส่งไปถูก ID เช่น /invoice_discard/15
                const discardForm = document.getElementById('discardForm');
                discardForm.setAttribute('action', "{{ url('/invoice_discard') }}/" + invoiceId);
                
                // รีเซ็ตล้างตัวอักษรเก่าในช่องกรอกออกไปก่อน
                document.getElementById('discard_reason').value = '';
            });
        }
    });
    </script>
@endsection