@extends('layouts.master')





@section('title', 'View Workload Arrangement For Administrative Position')

@section('style')
    <style>
        .label {
            font-weight: 600;
            color: #000; /* ดำ */
        }

        .value {
            color: #0d6efd; /* น้ำเงิน (Bootstrap primary) */
            font-weight: 500;
        }







        .workflow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin: 40px 0;
        }

        .workflow::before {
            content: "";
            position: absolute;
            top: 20px;
            left: 5%;
            right: 5%;
            height: 4px;
            background: #e0e0e0;
            z-index: 0;
        }

        /* 🔥 progress สีเขียว */


        .workflow-step {
            text-align: center;
            position: relative;
            z-index: 1;
            flex: 1;
        }

        .circle {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            color: #fff;
            line-height: 45px;
            font-weight: bold;
            margin: 0 auto 10px;
        }

        /* 🔥 สีตามสถานะ */
        .circle.requested { background: #0d6efd; }  /* น้ำเงิน */
        .circle.waiting   { background: #ffc107; }  /* เหลือง */
        .circle.success   { background: #198754; }  /* เขียว */
        .circle.reject    { background: #dc3545; }  /* แดง */
        .circle.default   { background: #e0e0e0; }  /* เทา */

        .workflow-title {
            font-weight: 600;
        }

        .workflow-name {
            font-size: 14px;
            color: #6c757d;
        }
    </style>

    
@endsection

@section('script')
<script>
function confirmApprove(){

    if(confirm("Are you sure to Approve?")){
        submitAction('approve');
    }

}

function openRejectModal(){
    let modal = new bootstrap.Modal(document.getElementById('rejectModal'));
    modal.show();
}

function confirmReject(){

    let comment = document.getElementById('reject_comment').value;

    if(!comment){
        alert("Please enter reason!");
        return;
    }

    if(confirm("Are you sure to Disapprove?")){
        submitAction('reject', comment);
    }

}

function submitAction(action, comment = ''){

    let form = document.createElement('form');
    form.method = 'POST';
    form.action = "{{ url('/workflow/action') }}";

    let token = document.createElement('input');
    token.type = 'hidden';
    token.name = '_token';
    token.value = "{{ csrf_token() }}";

    let id = document.createElement('input');
    id.type = 'hidden';
    id.name = 'adcontract_value_id';
    id.value = "{{ $adcontract->adcontract_value_id }}";

    let act = document.createElement('input');
    act.type = 'hidden';
    act.name = 'action';
    act.value = action;

    let com = document.createElement('input');
    com.type = 'hidden';
    com.name = 'comment';
    com.value = comment;

    form.appendChild(token);
    form.appendChild(id);
    form.appendChild(act);
    form.appendChild(com);

    document.body.appendChild(form);
    form.submit();
}
</script>
    
@endsection

@section('content')

@include('layouts.header')


	@include('layouts.title')


    <section class="wrapper bg-light">
        <div class="container py-15 py-md-17">


            <div class="col-md-12">
                <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title'):{{ $faculty->faculty_title }} {{ $faculty->faculty_name }}</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">

                            <br>

							<div align="center">
								<div class="item">

                                    @if (empty($faculty->faculty_picture) || $faculty->faculty_picture === 'profile.jpg')

                                        {{-- แสดงอักษรย่อ --}}
                                        <span class="avatar bg-primary text-white w-20 h-20">
                                            <span style="font-size: 25px; font-weight: 600;">
                                                {{ 
                                                    strtoupper(
                                                        mb_substr(explode(' ', $faculty->faculty_name)[0], 0, 1) .
                                                        mb_substr(explode(' ', $faculty->faculty_name)[1] ?? '', 0, 1)
                                                    ) 
                                                }}
                                            </span>
                                        </span>

                                    @else

                                        {{-- แสดงรูป --}}
                                        <img class="rounded-circle w-20 mx-auto mb-4"
                                            src="{{ asset('picture/'.$faculty->faculty_picture) }}"
                                            alt="{{ $faculty->faculty_name }}">

                                    @endif

									<h4 class="mb-1">
										{{ $faculty->faculty_title }} {{ $faculty->faculty_name }}
									</h4>
									<p class="mb-2">{{ $faculty->school_name }} ({{ $faculty->school_shortname }})</p>
								</div>
							</div>

							
                            <div class="col-lg-12">
                                <div class="blog single">
                                    <div class="card">
                                        <div class="card-body">
                        
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <h5 class="display-1 mb-3" style="font-size: 25px">II. Administative Position</h5>
                                                    <hr style="border: 0; height: 4px; background-color: #0d6efd; opacity: 1;"/>

                                                   @php
                                                        $total = count($flows) + 1;

                                                        $currentIndex = 0;

                                                        foreach ($flows as $index => $flow) {
                                                            if ($flow->flow_status == 'Success') {
                                                                $currentIndex = $index + 1;
                                                            } elseif (in_array($flow->flow_status, ['Pending','Waiting'])) {
                                                                $currentIndex = $index + 1;
                                                                break;
                                                            }
                                                        }

                                                        // 🔥 กันหาร 0
                                                        if(($total - 1) > 0){
                                                            $progressPercent = ($currentIndex / ($total - 1)) * 100;
                                                        }else{
                                                            $progressPercent = 0;
                                                        }
                                                    @endphp

                                                    <div class="workflow" style="--progress-width: {{ $progressPercent }}%;">

                                                        {{-- 🔵 STEP 1: Requested --}}
                                                        <div class="workflow-step">
                                                            <div class="circle requested">01</div>
                                                            <div class="workflow-title">Requested</div>
                                                            <div class="workflow-name">
                                                                {{ $faculty->faculty_title }} {{ $faculty->faculty_firstname }} {{ $faculty->faculty_lastname }}
                                                                <br>(Faculty)
                                                            </div>
                                                        </div>
                                                        @php
                                                            $foundActive = false;
                                                        @endphp

                                                        @foreach ($flows as $key => $flow)

                                                        @php
                                                            
                                                            $statusClass = 'default';

                                                            if($flow->flow_status == 'Success'){
                                                                $statusClass = 'success';
                                                            }
                                                            elseif($flow->flow_status == 'Rejected'){
                                                                $statusClass = 'reject';
                                                            }
                                                            elseif($flow->flow_status == 'Waiting'){
                                                                $statusClass = 'waiting';
                                                                $foundActive = true;
                                                            }
                                                            elseif($flow->flow_status == 'Pending'){
                                                                $statusClass = 'waiting';
                                                                $foundActive = true;
                                                            }
                                                            else{
                                                                // 🔥 step ที่ยังไม่ถึง → ให้เป็น Waiting (เหลือง)
                                                                if(!$foundActive){
                                                                    $statusClass = 'waiting';
                                                                }
                                                            }
                                                        @endphp

                                                        <div class="workflow-step">
                                                            <div class="circle {{ $statusClass }}">
                                                                {{ str_pad($flow->flow_order + 1, 2, '0', STR_PAD_LEFT) }}
                                                            </div>

                                                            <!-- <div class="workflow-title">
                                                                {{ $flow->flow_activity }}
                                                            </div> -->
                                                            @php
                                                                $displayStatus = 'Waiting';

                                                                if($flow->flow_status == 'Success'){
                                                                    $displayStatus = 'Approve';
                                                                }elseif($flow->flow_status == 'Rejected'){
                                                                    $displayStatus = 'Reject';
                                                                }elseif($flow->flow_status == 'Pending' || $flow->flow_status == 'Waiting'){
                                                                    $displayStatus = 'Waiting';
                                                                }else{
                                                                    $displayStatus = 'Waiting';
                                                                }
                                                            @endphp

                                                            <div class="workflow-title">
                                                                {{ $displayStatus }}
                                                            </div>

                                                            <div class="workflow-name">
                                                                {{ $flow->flow_actor }} <br>

                                                                @php
                                                                    $user = DB::table('faculty')
                                                                        ->where('faculty_userid', $flow->flow_actor_id)
                                                                        ->first();
                                                                @endphp

                                                                @if($user)
                                                                    ({{ $user->faculty_title }} {{ $user->faculty_firstname }} {{ $user->faculty_lastname }})
                                                                @endif
                                                            </div>
                                                        </div>

                                                        @endforeach

                                                    </div>
                                                     

                                                    <hr style="border: 0; height: 4px; background-color: #0d6efd; opacity: 1;"/>
                                                    <h5 class="display-1 mb-3" style="font-size: 20px">A. Position</h5>
                                                    <div class="row info-line">
                                                        <div class="col-md-6">
                                                            <span class="label">Administrative Position :</span>
                                                            <span class="value">{{ $adcontract->admin_position_name }}</span>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <span class="label">Appointment No. :</span>
                                                            <span class="value">{{ $adcontract->adcontract_no }}</span>
                                                        </div>
                                                    </div>
                                                    <br><br>

                                                    <h5 class="display-1 mb-3" style="font-size: 20px">B. Workload Arrangement for Administrative Position Type</h5>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <span class="label">Academic Year :</span>
                                                            <span class="value">{{ $adcontract->adcontract_value_year }}</span>
                                                        </div>
                                                        <div class="col-md-6">
                                                           <span class="label">Semester :</span>
                                                           <span class="value">{{ $adcontract->adcontract_value_semester }}</span>
                                                        </div>
                                                    </div>

                                                    <div class="mt-2">
                                                        <span class="label">Administrative Position Type :</span>
                                                        <span class="value">{{ $adcontract->adposition_type_name }}</span>
                                                    </div>

                                                    <br><br>

                                                    <h5 style="font-size:20px">C. Period</h5>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <span class="label">Start Date :</span>
                                                            <span class="value">{{ $adcontract->adcontract_start_date }}</span>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <span class="label">End Date :</span>
                                                            <span class="value">{{ $adcontract->adcontract_end_date }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>



                                        </div>
                                    </div>
                                    <hr>

                                    <!-- <h5 style="font-size:20px">Workflow Timeline</h5> -->

                                

                                    {{-- 🔥 STEP 0: Requested --}}
                                    <div class="mb-2">
                                        <strong>{{ date('d M Y H:i', strtotime($adcontract->raw_created_at)) }}</strong>

                                        <span class="badge bg-primary ms-2">
                                            Requested
                                        </span>

                                        by {{ $faculty->faculty_title }} {{ $faculty->faculty_firstname }} {{ $faculty->faculty_lastname }}
                                    </div>


                                    {{-- 🔥 FLOW STEP --}}
                                    @foreach($flows as $flow)
                                         @if($flow->flow_status == 'Pending')
                                            @continue
                                        @endif
                                        @php
                                            $user = DB::table('faculty')
                                                ->where('faculty_userid', $flow->flow_actor_id)
                                                ->first();

                                            $name = $user 
                                                ? $user->faculty_title.' '.$user->faculty_firstname.' '.$user->faculty_lastname 
                                                : $flow->flow_actor;

                                            // ใช้ updated ถ้ามี ไม่งั้นใช้ created
                                            $date = $flow->flow_updated ?? $flow->flow_created;

                                            if($flow->flow_status == 'Success'){
                                                $statusText = 'Approved';
                                                $badge = 'bg-success';
                                            }elseif($flow->flow_status == 'Rejected'){
                                                $statusText = 'Rejected';
                                                $badge = 'bg-danger';
                                            }elseif($flow->flow_status == 'Waiting'){
                                                $statusText = 'Waiting';
                                                $badge = 'bg-warning';
                                            }
                                            elseif($flow->flow_status == 'Pending'){
                                                $statusText = 'Pending';
                                                $badge = 'bg-info';
                                            }
                                            else{
                                                $statusText = 'Waiting';
                                                $badge = 'bg-secondary';
                                            }
                                        @endphp

                                        @if($date)
                                            <div class="mb-2">
                                                <strong>{{ \Carbon\Carbon::parse($date)->format('d M Y H:i') }}</strong>

                                                <span class="badge {{ $badge }} ms-2">
                                                    {{ $statusText }}
                                                </span>

                                                by {{ $name }}

                                                @if($flow->flow_comment)
                                                    <span class="text-muted">
                                                        // Comment : {{ $flow->flow_comment }}
                                                    </span>
                                                @endif
                                            </div>
                                        @endif

                                    @endforeach
                                    <hr>


                                    @if($currentFlow)
                                    <div class="text-center mt-4">

                                        {{-- Approve --}}
                                        <button type="button" class="btn btn-success me-2" onclick="confirmApprove()">
                                            <i class="uil uil-check"></i> Approve
                                        </button>

                                        {{-- Disapprove --}}
                                        <button type="button" class="btn btn-danger" onclick="openRejectModal()">
                                            <i class="uil uil-times"></i> Disapprove
                                        </button>

                                    </div>
                                    <div class="modal fade" id="rejectModal" tabindex="-1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">

                                                <div class="modal-header">
                                                    <h5 class="modal-title">Disapprove Reason</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>

                                                <div class="modal-body">
                                                    <textarea id="reject_comment" class="form-control" rows="4"
                                                        placeholder="Enter reason..."></textarea>
                                                </div>

                                                <div class="modal-footer">
                                                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                    <button class="btn btn-danger" onclick="confirmReject()">Confirm</button>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    @endif


                                </div>
                            </div>

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

           
           
        </div>
    </section>


        @include('layouts.footer')

    @endsection