@extends('layouts.master')

@section('title', 'Project Code Assignment')

@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-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:#9298a8;}
	.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:#363c4b;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:#262b3a;line-height:1.45;min-width:240px;}
	.flow-form-badge,.flow-step-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-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-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-search{width:100%;}}
</style>
@endsection

@section('script')
<script>
	$(document).ready(function(){
		$.fn.dataTable.ext.errMode = 'none';
		var table = $('#project-code-table').DataTable({
			pageLength:10,
			lengthMenu:[10,25,50,100],
			order:[],
			responsive:false,
			autoWidth:false,
			searching:true,
			dom:'rt<"flow-dt-bottom"lip>',
			columnDefs:[
				{targets:[0,4],orderable:false,searchable:false}
			],
			language:{
				emptyTable:'No projects awaiting code assignment.',
				zeroRecords:'No projects match your search.',
				info:'Showing _START_ to _END_ of _TOTAL_ projects',
				infoEmpty:'Showing 0 projects',
				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();
		$('#project-code-search').on('input',function(){
			table.search(this.value).draw();
		});
	});
</script>
@endsection

@section('content')
	@include('layouts.header')
	@include('layouts.header-sub')
	<section class="wrapper bg-light">
		<div class="container 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>Project Code Assignment</h1>
						<p>Projects awaiting project code assignment.</p>
					</div>
				</div>
				<div class="flow-list-body">
					<div class="flow-search-wrap">
						<div class="flow-search">
							<i class="uil uil-search"></i>
							<input type="text" id="project-code-search" placeholder="Search project..." autocomplete="off">
						</div>
					</div>
					<div class="flow-table-box">
						<div class="table-responsive">
							<table id="project-code-table" class="table table-hover" width="100%">
								<thead>
									<tr>
										<th class="text-center" width="6%">No.</th>
										<th>Project</th>
										<th>Form</th>
										<th>Status</th>
										<th class="text-center">Action</th>
									</tr>
								</thead>
								<tbody>
									@foreach($projects 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><span class="flow-step-badge">{{ $item->project_status }}</span></td>
											<td class="text-center">
												<a href="{{ route('project.code.edit', ['project_id' => $item->project_id]) }}" class="flow-action"><i class="uil uil-edit"></i> Assign Code</a>
											</td>
										</tr>
									@endforeach
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	@include('layouts.footer')
@endsection