@php
          $breadcrumbs = [
        'Workflow Manage' => url('/workflow_manage'),
        'Documents Approved' => url('/workflow_approved'),
        'Workflow Approved - Invoice' => '',
    ];
@endphp
@extends('layouts.master')
@section('title', 'Workflow Approved - Invoice')

@section('style')
    <style>
         body .EditableTable .checkbox.InEditMode {
            display: block;
        }

        input,
        textarea
         {
            -webkit-appearance: checkbox !important;
        }

        .circle-check {
            width: 28px;
            height: 28px;
            background-color: #22c55e; /* เขียว */
            border-radius: 50%;
            display: inline-flex; /* เปลี่ยนตรงนี้ */
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 18px;
            font-weight: bold;
            vertical-align: middle; /* ให้ไอคอนอยู่ระดับเดียวกับข้อความ */
        }
        .circle-check::before {
            content: "✓";
        }
    </style>
    <style>
    /* 1. กำหนดให้กล่องแม่เป็นจุดอ้างอิง */
    .step-item {
        position: relative;
    }

    /* 2. สร้างเส้นเชื่อม */
    .step-item:not(:last-child)::after {
        content: "";
        position: absolute;
        
        /* ปรับตำแหน่งความสูง (ลองเปลี่ยนตัวเลขนี้ถ้าเส้นมันลอยสูง/ต่ำไป) */
        top: 30px; 
        
        left: 50%; 
        width: 100%; 
        height: 3px; /* หนาขึ้นนิดนึงจะได้เห็นชัด */
        
        /* เปลี่ยนเป็นสีแดงก่อน ถ้าเห็นเส้นแล้วค่อยแก้กลับเป็นสีเทา #e2e2e2 */
        background-color: rgb(216, 213, 213); 
        
        /* ดึงเส้นขึ้นมาให้อยู่ระดับเดียวกับเนื้อหา (แก้ปัญหาเส้นจม) */
        z-index: 0; 
    }

    /* 3. ดันตัวปุ่มวงกลมให้ลอยทับเส้น (สำคัญมาก!) */
    .step-item .icon {
        position: relative;
        z-index: 2; /* เลขเยอะกว่าเส้น */
    }
</style>
@endsection

@section('script')
    <script>
        $('.table-example2').DataTable({
                responsive: true,
                aLengthMenu: [100],
                "order": [],
                "bPaginate": true, // Pagination
                "bLengthChange": false, // Entries
                "bFilter": true, // Search
                "bInfo": true, // Showing 1 of All
                "bAutoWidth": true
            });


   

    </script>

     <script>
    $(document).ready(function() {
        // ใช้ on('click') เพื่อให้รองรับกรณีถ้าตารางมีการเปลี่ยนหน้า (Pagination)
        $(document).on('click', '.open_diagram_modal', function() {
            
            // 1. ดึงข้อมูลจากปุ่มที่กด (data-attributes)
            var workflowId = $(this).data('id');
            var studentName = $(this).data('name');
            var status = $(this).data('status');

            // 2. เอาข้อมูลไปแปะใน Modal ตาม ID ที่ตั้งไว้ในข้อ 1
            $('#modal_workflow_id').text(workflowId);
            $('#modal_student_name').text(studentName);
            $('#modal_status').text(status);

            // 3. สั่งให้ Modal เด้งขึ้นมา
            $('#diagramModal').modal('show');
        });
    });
</script>
@endsection

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


    {{-- <section class="video-wrapper bg-overlay bg-overlay-gradient px-12 mt-0 min-vh-60 bg-cover bg-image"
        data-image-src="{{ asset('/bg/bg_01_new.png') }}"
        style="background-image: url({{ asset('/bg/bg_01_new.png') }}); background-size: 100%; background-position: center;">
        <div class="video-content">
            <div class="container text-center">
                <div class="row">
                    <div class="col-lg-8 col-xl-6 text-center text-white mx-auto">
                        <h1 class="display-1 fs-54 text-white mb-5"><span class="rotator-zoom">@yield('title')</span></h1>

                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    {{-- @include('layouts.title') --}}


    <section class="wrapper bg-light">
        <div class="container py-15 py-md-17">
            {{-- <div class="row text-center mb-10">
                <div class="col-md-10 col-lg-9 col-xxl-8 mx-auto">
                    <h3 class="display-3 px-xl-10 mb-0"> CCCCCCC</h3>
                </div>

            </div> --}}

            <div class="col-md-12">
                <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
                <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
            </div>


            <div class="col-lg-12">
                <div class="blog single">
                    <div class="card">
                        <div class="card-body">

                            <div align="left">
                                {{-- <a href="{{ url('/send_mail_c_history') }}" class="btn btn-lg btn-blue rounded-pill p-1 px-3">
                                    <i class="uil-history"></i>&nbsp;History
                                </a> --}}

                                {{-- <a href="{{ url('/studentgetedit/0') }}"
                                    class="btn btn-lg btn-violet rounded-pill p-1 px-3">
                                    <i class="uil uil-plus"></i>&nbsp;Add Student
                                </a> --}}
                            </div>

                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                                <form method="GET" action="{{ url('/workflow_approved_invoice') }}">
                                    <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>

                            <br>
                            
                         <table id="example" class="table table-striped table-condensed">
                            <thead>
                                <tr>
                                    <th class="p-1" style="width: 5%">No.</th>
                                    <th class="p-1" >Student ID</th>
                                    <th class="p-1" >Name</th>
                                    {{-- <th class="p-1" >Type</th> --}}
                                    <th class="p-1" >Workflow Name</th>
                                    <th class="p-1" >Roles</th>
                                    <th class="p-1" >Status</th>
                                    <th class="p-1" >Detail</th>
                                    <th class="p-1" >Manage</th>
                                </tr>
                            </thead>
                            <tbody>
                                 @foreach ($workflow_approve_item as $i => $item)
                                            @php
                                                    $workflow_approve = DB::table('workflow_approve')->where('workflow_approve_item',$item->workflow_approve_item)->get();
                                            @endphp
                                            
                                    <tr  style="line-height:40px">
                                        <td class="">{{ ++$i }}</td>
                                          <td class="">
                                                <a href="{{ url('/invoice_list/'.$item->invoice_id) }}"  data-bs-toggle="tooltip"
                                                            data-bs-placement="top" title="View">
                                                            {{ $item->invoice_project_name }}
                                                 </a> 
                                            
                                            </td>

                                    
                                          <td class="">
                                                {{-- <a href="{{ url('/repayment_installments_' . $name_type.'/'.$item->invoice_id) }}"  data-bs-toggle="tooltip"
                                                            data-bs-placement="top" title="View"
                                                            >
                                                            {{ $item->student_name }}
                                                        </a>  --}}
                                                {{ $item->invoice_no }}

                                                
                                            </td>
                                        <td class="">{{ $item->workflow_approve_name_flow }}</td>
                                        <td class="">
                                        @foreach($workflow_approve as $wf)

                                                   {{-- <span class="circle-check"></span>  --}}
                                                   {{ $wf->workflow_approve_who }} <br>
   
                                        @endforeach

                                        </td>
                                        <td class="">
                                                    @foreach($workflow_approve as $wf)
                                                        @if( $wf->workflow_approve_status == 'pending')
                                                            <span class="badge bg-pale-orange" style="color: #FA9A28; min-width: 100px; display: inline-block;font-size: 18px;">Pending</span> <br>
                                                        @elseif( $wf->workflow_approve_status == 'approved')
                                                            <span class="badge bg-pale-green" style="color: green; min-width: 100px; display: inline-block;font-size: 18px;">Approved</span> <br>
                                                        @elseif( $wf->workflow_approve_status == 'rejected')
                                                            <span class="badge bg-pale-red" style="color: red; min-width: 100px; display: inline-block;font-size: 18px;">Rejected</span> <br>
                                                        @elseif( $wf->workflow_approve_status == 'skip')
                                                            <span class="badge bg-pale-purple" style="color: purple; min-width: 100px; display: inline-block;font-size: 18px;">Skip</span> <br>    
                                                        @endif  
                                                    @endforeach
                                        </td>

                                         <td>
                                         
                                            
                                              <a href="javascript:void(0)" 
                                                class="btn btn-circle btn-purple rounded-pill p-1 px-3" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#diagramModal_{{ $item->workflow_approve_item }}"
                                                title="View">
                                                    <i class="uil uil-eye fs-20 p-0"></i> 
                                                </a>


                                                <div class="modal fade" id="diagramModal_{{ $item->workflow_approve_item }}" tabindex="-1" aria-labelledby="diagramModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered modal-xl"> {{-- modal-lg คือขนาดใหญ่ --}}
                                                        <div class="modal-content">

                                                            <div class="modal-header border-0">
                                                                <h5 class="modal-title" id="diagramModalLabel">รายละเอียด</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>

                                                            @php
                                                                $user_rejected = DB::table('user_meta')->where('user_id',$item->workflow_approve_who_approve_id)->get();

                                                            @endphp

                                                        

                                                            {{-- <br> --}}
                                                                {{-- <span>{{ $item->workflow_approve_status }}</span> --}}
                                                            @php
                                                                $flowstep = DB::table('workflow_approve')
                                                                            // ->Join('user_meta','workflow_approve_who_id','user_role')
                                                                            ->where('workflow_approve_item', $item->invoice_id)
                                                                            ->get();
                                                            @endphp

                                                            <div class="modal-body text-center">

                                                                    <div class="row gx-lg-8 gx-xl-12 gy-6 process-wrapper  justify-content-center">
                                                                        
                                                                        @foreach($flowstep as $key => $fl)
                                                                            @php

                                                                                if($fl->workflow_approve_status == "approved"){

                                                                                    $color = 'btn-primary';

                                                                                }elseif($fl->workflow_approve_status == "skip"){

                                                                                    $color = 'btn-purple';
    

                                                                                }elseif($fl->workflow_approve_status == "rejected"){

                                                                                    $color = 'btn-red';

                                                                                }else{

                                                                                    $color = 'btn-soft-primary';

                                                                                }

                                                                                // $user_meta = DB::table('user_meta')
                                                                                //     ->where('user_role', $fl->workflow_approve_who_id)
                                                                                //     ->get();
                                                                                
                                                                                $user_meta = DB::table('user_meta')
                                                                                    ->where('user_role', 'LIKE', '%' . $fl->workflow_approve_who_id . '%') 
                                                                                    ->get();


                                                                                $user_approved_rejected = DB::table('user_meta')
                                                                                    // ->leftJoin('','','')
                                                                                    ->where('user_id', $fl->workflow_approve_who_approve_id)
                                                                                    ->get();    

                                                                            @endphp

                                                                        
                                                                                    <div class="col step-item">
                                                                                    <span  class="icon btn btn-circle btn-lg {{$color}}  mb-4">
                                                                                        <span class="number">0{{$key+1}}</span>
                                                                                    </span>

                                                                                    <p class="mb-0" style="font-size: 17px;text-align:center;margin-left:-5px">

                                                                                    <b>{{ $fl->workflow_approve_who }}</b> 

                                                                                        <br>

                                                                                        @foreach($user_meta as $key2 => $f2)
                                                                                            @php
                                                                                                // เช็คว่าคนนี้คือคนที่กด Approved หรือ Rejected ไปแล้วหรือยัง
                                                                                                $isActionUser = ($user_approved_rejected->pluck('user_id')->first() == $f2->user_id);
                                                                                            @endphp

                                                                                            @if($isActionUser)
                                                                                                {{-- ถ้าเป็นคนที่ดำเนินการแล้ว แสดงตัวหนา + สี + วันที่ --}}
                                                                                                @if($fl->workflow_approve_status == "approved")
                                                                                                    <b style="color:green"> 
                                                                                                        - {{ $f2->user_title }} {{ $f2->user_firstname }} {{ $f2->user_lastname }} 
                                                                                                        <br> ({{ date('d M Y H:i', strtotime($fl->workflow_approve_time_approve)) }}) 
                                                                                                    </b> <br>
                                                                                                @elseif($fl->workflow_approve_status == "rejected")
                                                                                                    <b style="color:red"> 
                                                                                                        - {{ $f2->user_title }} {{ $f2->user_firstname }} {{ $f2->user_lastname }} 
                                                                                                        <br> ({{ date('d M Y H:i', strtotime($fl->workflow_approve_time_approve)) }}) 
                                                                                                    </b> <br>
                                                                                                @elseif($fl->workflow_approve_status == "skip")
                                                                                                    <b style="color:purple"> 
                                                                                                        - {{ $f2->user_title }} {{ $f2->user_firstname }} {{ $f2->user_lastname }} 
                                                                                                        <br> ({{ date('d M Y H:i', strtotime($fl->workflow_approve_time_approve)) }}) 
                                                                                                    </b> <br>    
                                                                                                @endif
                                                                                            @else
                                                                                                {{-- ถ้ายังไม่ได้ดำเนินการ (หรือเป็นคนอื่นๆ ในกลุ่ม Role เดียวกัน) ให้แสดงชื่อปกติ --}}
                                                                                                @if($fl->workflow_approve_status == "skip")
                                                                                                    <span style="color: purple;"> 
                                                                                                        - {{ $f2->user_title }} {{ $f2->user_firstname }} {{ $f2->user_lastname }} xx 
                                                                                                    </span> <br>
                                                                                                @else

                                                                                                    <span style="color: #666;"> 
                                                                                                        - {{ $f2->user_title }} {{ $f2->user_firstname }} {{ $f2->user_lastname }} xx 
                                                                                                    </span> <br>
                                                                                                @endif
                                                                                            @endif
                                                                                        @endforeach
                                                                                        {{-- @foreach($user_meta as $key2 => $f2)

                                                                                                @if($user_approved_rejected->pluck('user_id')->first() ==  $f2->user_id)

                                                                                                        @if($fl->workflow_approve_status == "approved")

                                                                                                        <b style="color:green"> - {{  $f2->user_title }}  {{  $f2->user_firstname }}  {{  $f2->user_lastname }} <br> ({{ date('d M Y H:i', strtotime($fl->workflow_approve_time_approve)) }}) </b>  <br>

                                                                                                        @elseif($fl->workflow_approve_status == "rejected")

                                                                                                        <b style="color:red"> - {{  $f2->user_title }}  {{  $f2->user_firstname }}  {{  $f2->user_lastname }} <br> ({{ date('d M Y H:i', strtotime($fl->workflow_approve_time_approve)) }} )</b>  <br>

                                                                                                        @endif
                                                                                                @else

                                                                                                            <span> - {{  $f2->user_title }}  {{  $f2->user_firstname }}  {{  $f2->user_lastname }}</span>  <br>

                                                                                                @endif

                                                                                        @endforeach --}}

                                                                        
                                                                                    </p>
                                                                            
                                                                        </div>
                                                                        @endforeach
                                                                    </div>

                                                            </div>
                                                                
                                                                {{-- <h3 id="modal_student_name" class="mb-3"></h3> --}}
                                                                {{-- <div class="badge bg-primary mb-4" id="modal_status"></div>

                                                                <div class="p-5 bg-light rounded border">
                                                                    xxxxx {{ $item->student_name }}
                                                                    <p class="text-muted">พื้นที่แสดง Diagram Workflow ID: <span id="modal_workflow_id"></span></p>
                                                                </div> --}}

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

                                        </td>

                                        <td>
                                           

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

                                                       

                        </div>


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

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