@extends('layouts.master')
@section('title', 'Flow Approval List')
@section('style')
<style>
	.flow-list-container{max-width:1680px;margin:0 auto;padding-left:28px;padding-right:28px;}
	.flow-list-shell{background:#fff;border:1px solid rgba(99,102,241,.12);border-radius:24px;box-shadow:0 18px 55px rgba(30,34,40,.07);overflow:hidden;}
	.flow-list-topbar{padding:28px 34px;background:linear-gradient(135deg,#faf6ff 0%,#f4f8ff 100%);border-bottom:1px solid rgba(99,102,241,.11);display:flex;align-items:center;gap:15px;}
	.flow-list-icon{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;background:linear-gradient(135deg,#7c3aed,#3b82f6);box-shadow:0 10px 24px rgba(99,102,241,.20);}
	.flow-list-topbar h1{margin:0;font-size:27px;font-weight:800;color:#272a3a;}
	.flow-list-topbar p{margin:4px 0 0;color:#747b8d;font-size:14px;}
	.flow-list-body{padding:28px 34px 34px;}
	.flow-tabs{display:flex;align-items:center;gap:10px;margin-bottom:24px;padding:6px;background:#f5f6fb;border:1px solid #e9eaf3;border-radius:15px;}
	.flow-tab{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border:1px solid transparent;border-radius:11px;background:transparent;color:#73798a;font-size:14px;font-weight:700;cursor:pointer;transition:.2s ease;}
	.flow-tab i{font-size:19px;color:#654bd8 !important;}
	.flow-tab:hover{color:#654bd8;background:#fff;}
	.flow-tab.active{background:#fff;color:#654bd8;border-color:#e6e0ff;box-shadow:0 4px 14px rgba(80,65,160,.09);}
	.flow-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;border-radius:7px;background:#e9e5ff;color:#654bd8;font-size:12px;font-weight:800;}
	.flow-tab:not(.active) .flow-tab-count{background:#e6e8ef;color:#777e90;}
	.flow-tab-content{display:none;}
	.flow-tab-content.active{display:block;}
	.flow-search-wrap{display:flex;justify-content:flex-end;margin-bottom:18px;}
	.flow-search{width:320px;height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#fff;border:1px solid #e2e5ed;border-radius:12px;transition:.18s ease;}
	.flow-search:focus-within{border-color:#8b7bea;box-shadow:0 0 0 3px rgba(109,93,231,.08);}
	.flow-search i{font-size:18px;color:#654bd8 !important;}
	.flow-search input{width:100%;border:0;outline:0;background:transparent;color:#363c4b;font-size:14px;}
	.flow-search input::placeholder{color:#a0a5b2;}
	.flow-table-box{border:1px solid #e9ecf3;border-radius:17px;overflow:hidden;background:#fff;}
	.flow-table-box table{margin-bottom:0 !important;vertical-align:middle;width:100% !important;}
	.flow-table-box thead th{background:#f7f8fc;color:#596174;font-size:15px;font-weight:800;border-bottom:1px solid #e5e8f0;padding:14px 13px;white-space:nowrap;}
	.flow-table-box tbody td{padding:14px 13px;font-size:15px;color:#242424;border-color:#edf0f5;background:#fff;}
	.flow-table-box tbody tr:hover td{background:#faf9ff;}
	.flow-no{text-align:center;font-weight:700;color:#8b91a1;}
	.flow-project-name{font-weight:700;color:#242424;line-height:1.45;min-width:240px;}
	.flow-form-badge,.flow-step-badge,.flow-result-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;}
	.flow-form-badge{background:#f0eaff;color:#6532c7;}
	.flow-step-badge{background:#edf5ff;color:#2861b8;}
	.flow-result-badge{background:#e8f7ef;color:#20784a;}
	.flow-result-badge.negative{background:#fff0f1;color:#b33a4c;}
	.flow-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:10px;color:#fff !important;font-size:13px;font-weight:800;background:linear-gradient(135deg,#7457e8,#446be1);white-space:nowrap;}
	.flow-action:hover{color:#fff;background:#624bd3;}
	.flow-action.history{background:#f0eaff;color:#6532c7 !important;}
	.flow-action.history i{color:#6532c7 !important;}
	.flow-dt-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px;background:#fbfbfd;border-top:1px solid #eceef4;}
	.flow-dt-bottom .dataTables_length,.flow-dt-bottom .dataTables_info,.flow-dt-bottom .dataTables_paginate{margin:0 !important;font-size:12px;color:#73798a;}
	.flow-dt-bottom .dataTables_length select{height:34px;border:1px solid #dfe3ec !important;border-radius:8px !important;padding:4px 26px 4px 8px !important;background:#fff !important;}
	.dataTables_wrapper .dataTables_paginate .paginate_button{min-width:34px;height:34px;line-height:32px;padding:0 9px !important;margin:0 2px;border-radius:8px !important;border:1px solid transparent !important;color:#5e6473 !important;background:transparent !important;}
	.dataTables_wrapper .dataTables_paginate .paginate_button:hover{border-color:#ddd9fb !important;color:#4f46e5 !important;background:#f3f1ff !important;}
	.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{border-color:#6d5de7 !important;color:#fff !important;background:linear-gradient(135deg,#7657e8,#4e69df) !important;}
	table.dataTable.no-footer{border-bottom:0 !important;}
	@media(max-width:991px){.flow-list-container{padding-left:16px;padding-right:16px;}.flow-list-topbar,.flow-list-body{padding-left:22px;padding-right:22px;}}
	@media(max-width:767px){.flow-tabs{flex-direction:column;align-items:stretch;}.flow-tab{justify-content:flex-start;}.flow-search{width:100%;}}
</style>
@endsection
@section('script')
<script>
	$(document).ready(function(){
		$.fn.dataTable.ext.errMode = 'none';
		var flowTables = {};
		$('.flow-datatable').each(function(){
			var tableId = $(this).attr('id');
			var lastColumn = $(this).find('thead th').length - 1;
			var table = $(this).DataTable({
				pageLength:10,
				lengthMenu:[10,25,50,100],
				order:[],
				responsive:false,
				autoWidth:false,
				searching:true,
				dom:'rt<"flow-dt-bottom"lip>',
				columnDefs:[
					{targets:[0,lastColumn],orderable:false,searchable:false}
				],
				language:{
					emptyTable:tableId === 'flow-table-pending' ? 'No pending approvals found.' : 'No approval history found.',
					zeroRecords:'No approvals match your search.',
					info:'Showing _START_ to _END_ of _TOTAL_ approvals',
					infoEmpty:'Showing 0 approvals',
					lengthMenu:'Show _MENU_',
					paginate:{previous:'Previous',next:'Next'}
				}
			});
			table.on('draw',function(){
				var info = table.page.info();
				table.column(0,{page:'current',search:'applied',order:'applied'}).nodes().each(function(cell,i){
					cell.innerHTML = info.start + i + 1;
				});
			}).draw();
			flowTables[tableId] = table;
		});
		$('.flow-search-input').on('input',function(){
			var tableId = $(this).data('table');
			if(flowTables[tableId]){
				flowTables[tableId].search(this.value).draw();
			}
		});
		$('.flow-tab').on('click',function(){
			var tab = $(this).data('tab');
			$('.flow-tab').removeClass('active');
			$(this).addClass('active');
			$('.flow-tab-content').removeClass('active');
			$('#flow-tab-' + tab).addClass('active');
			$.fn.dataTable.tables({visible:true,api:true}).columns.adjust();
		});
	});
</script>
@endsection
@section('content')
	@include('layouts.header')
	@include('layouts.header-sub')
	<section class="wrapper bg-light">
		<div class="container-fluid flow-list-container py-14 py-md-13">
			<div class="flow-list-shell">
				<div class="flow-list-topbar">
					<div class="flow-list-icon">
						<i class="uil uil-clipboard-notes"></i>
					</div>
					<div>
						<h1>Flow Approval List</h1>
						<p>Review pending projects and your approval history.</p>
					</div>
				</div>
				<div class="flow-list-body">
					<div class="flow-tabs">
						<button type="button" class="flow-tab active" data-tab="pending">
							<i class="uil uil-clipboard-notes"></i>
							To Do
							<span class="flow-tab-count">{{ number_format($pendingFlows->count()) }}</span>
						</button>
						<button type="button" class="flow-tab" data-tab="history">
							<i class="uil uil-history"></i>
							History
							<span class="flow-tab-count">{{ number_format($historyFlows->count()) }}</span>
						</button>
					</div>
					@foreach(['pending' => $pendingFlows, 'history' => $historyFlows] as $tab => $items)
						<div id="flow-tab-{{ $tab }}" class="flow-tab-content {{ $tab === 'pending' ? 'active' : '' }}">
							<div class="flow-search-wrap">
								<div class="flow-search">
									<i class="uil uil-search"></i>
									<input type="text" class="flow-search-input" data-table="flow-table-{{ $tab }}" placeholder="Search project..." autocomplete="off">
								</div>
							</div>
							<div class="flow-table-box">
								<div class="table-responsive">
									<table id="flow-table-{{ $tab }}" class="table table-hover flow-datatable" width="100%">
										<thead>
											<tr>
												<th class="text-center" width="5%">No.</th>
												<th>Project</th>
												<th>Form</th>
												<th>Approval Role</th>
												<th>Step</th>
												@if($tab === 'history')
													<th>Decision</th>
													<th>Decided On</th>
												@else
													<th>Received</th>
												@endif
												<th class="text-center">Action</th>
											</tr>
										</thead>
										<tbody>
											@foreach($items as $item)
												<tr>
													<td class="flow-no"></td>
													<td>
														<div class="flow-project-name">{{ $item->project_name_en ?: ($item->project_name_th ?: 'Project #'.$item->project_id) }}</div>
													</td>
													<td>
														<span class="flow-form-badge">{{ $item->project_form }}</span>
													</td>
													<td>{{ $item->flow_actor_role }}</td>
													<td>
														<span class="flow-step-badge">{{ $item->flow_order }} / {{ $item->flow_count }}</span>
													</td>
													@if($tab === 'history')
														@php
															$firstAction = trim(explode('/', (string)$item->flow_actor_activity)[0]);
															$isNegative = $item->flow_result !== $firstAction;
														@endphp
														<td>
															<span class="flow-result-badge {{ $isNegative ? 'negative' : '' }}">{{ $item->flow_result }}</span>
														</td>
														<td data-order="{{ $item->flow_updated }}">{{ $item->flow_updated ? \Carbon\Carbon::parse($item->flow_updated)->format('d M Y H:i') : '-' }}</td>
													@else
														<td data-order="{{ $item->flow_created }}">{{ $item->flow_created ? \Carbon\Carbon::parse($item->flow_created)->format('d M Y') : '-' }}</td>
													@endif
													<td class="text-center">
														<a href="{{ route('flow.approval.view', ['flow_id' => $item->flow_id]) }}" class="flow-action {{ $tab === 'history' ? 'history' : '' }}">
															<i class="uil uil-eye"></i>
															{{ $tab === 'history' ? 'View' : 'Review' }}
														</a>
													</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</div>
							</div>
						</div>
					@endforeach
				</div>
			</div>
		</div>
	</section>
	@include('layouts.footer')
@endsection