@extends('layouts.master')

@section('title', 'Project List')

@section('style')
	<style>
		.project-list-container{max-width:1680px;margin:0 auto;padding-left:28px;padding-right:28px;}
		.project-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;}
		.project-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;justify-content:space-between;gap:20px;}
		.project-list-title-wrap{display:flex;align-items:center;gap:15px;}
		.project-list-title-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);}
		.project-list-topbar h1{margin:0;font-size:27px;font-weight:800;color:#272a3a;}
		.project-list-topbar p{margin:4px 0 0;color:#747b8d;font-size:14px;}
		.project-total{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:#fff;color:#4f46e5;border:1px solid #e4e3ff;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 5px 16px rgba(79,70,229,.06);}
		.project-list-body{padding:28px 34px 34px;}

		.project-filter-box{background:linear-gradient(135deg,#fcfaff,#f8fbff);border:1px solid #e7e2fb;border-radius:18px;padding:20px 22px;margin-bottom:24px;}
		.project-filter-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px;}
		.project-filter-title-wrap{display:flex;align-items:center;gap:11px;}
		.project-filter-icon{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;background:linear-gradient(135deg,#7c3aed,#3b82f6);box-shadow:0 8px 18px rgba(99,102,241,.18);}
		.project-filter-title h4{margin:0;font-size:17px;font-weight:800;color:#242938;}
		.project-filter-title p{margin:2px 0 0;font-size:13px;color:#858b9a;}
		.project-field-label{font-size:12px;font-weight:800;color:#51586a;margin-bottom:6px;letter-spacing:.25px;}
		.project-filter-box .form-control,.project-filter-box .form-select{height:44px;border:1px solid #dfe3ef;border-radius:11px;background:#fff;box-shadow:none;color:#252b38;font-size:13px;font-weight:500;}
		.project-filter-box .form-control:focus,.project-filter-box .form-select:focus{border-color:#7c3aed;box-shadow:0 0 0 .17rem rgba(124,58,237,.09);}
		.project-search-input-wrap{position:relative;}
		.project-search-input-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:17px;color:#8d93a3;z-index:2;}
		.project-search-input-wrap input{padding-left:20px;}
		.btn-clear-filter{height:44px;padding:0 18px;border:1px solid #ddd9fb;border-radius:11px;font-weight:700;font-size:13px;color:#5146c9;background:#f2f0ff;transition:.18s ease;white-space:nowrap;}
		.btn-clear-filter:hover{background:#e8e5ff;color:#4338ca;transform:translateY(-1px);}

		.project-table-box{border:1px solid #e9ecf3;border-radius:17px;overflow:hidden;background:#fff;}
		.project-table-box .table-responsive{margin:0;}
		.project-table-box table{margin-bottom:0 !important;vertical-align:middle;width:100% !important;}
		.project-table-box thead th{background:#f7f8fc;color:#596174;font-size:12px;font-weight:800;border-bottom:1px solid #e5e8f0;padding:14px 13px;white-space:nowrap;letter-spacing:.25px;}
		.project-table-box tbody td{padding:14px 13px;font-size:13px;color:#363c4b;border-color:#edf0f5;background:#fff;}
		.project-table-box tbody tr{transition:.16s ease;}
		.project-table-box tbody tr:hover td{background:#faf9ff;}
		.project-no{font-weight:700;color:#8b91a1;text-align:center;}
		.project-name{font-weight:700;color:#262b3a;line-height:1.45;min-width:260px;}
		.project-form-badge,.project-type-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;}
		.project-form-badge{background:#f0eaff;color:#6532c7;}
		.project-type-badge{background:#edf5ff;color:#2861b8;}
		.project-duration{white-space:nowrap;line-height:1.5;color:#51586a;}
		.project-duration .duration-separator{color:#b0b5c1;margin:0 5px;}
		/* Status pills: display-only, grouped by actual project_status */
		.project-status-pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.4;white-space:nowrap;border:1px solid transparent;}
		.project-status-draft{background:#f1f5f9;color:#475569;border-color:#e2e8f0;}
		.project-status-review{background:#fff7ed;color:#b45309;border-color:#fed7aa;}
		.project-status-code{background:#f3e8ff;color:#7e22ce;border-color:#e9d5ff;}
		.project-status-progress{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
		.project-status-completed{background:#ecfdf5;color:#047857;border-color:#a7f3d0;}
		.project-status-rejected{background:#fef2f2;color:#b91c1c;border-color:#fecaca;}
		.project-status-other{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe;}
		.project-status-empty{display:inline-flex;padding:5px 9px;border-radius:999px;background:#f4f5f7;color:#9298a5;font-size:11px;font-weight:700;}
		.btn-project-view{height:36px;padding:0 13px;border:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#fff !important;font-size:12px;font-weight:800;background:linear-gradient(135deg,#7457e8,#446be1);box-shadow:0 6px 14px rgba(90,85,220,.20);transition:.18s ease;white-space:nowrap;}
		.btn-project-view:hover{transform:translateY(-1px);box-shadow:0 9px 19px rgba(90,85,220,.27);}

		.dataTables_wrapper{padding:0;}
		.project-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;}
		.project-dt-bottom .dataTables_length,.project-dt-bottom .dataTables_info,.project-dt-bottom .dataTables_paginate{margin:0 !important;font-size:12px;color:#73798a;}
		.project-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){.project-list-container{padding-left:16px;padding-right:16px}.project-list-topbar,.project-list-body{padding-left:22px;padding-right:22px}}
		@media(max-width:767px){.project-list-topbar{align-items:flex-start;flex-direction:column}.project-total{align-self:flex-start}.project-filter-header{align-items:flex-start;flex-direction:column}.project-list-body{padding:20px 16px 24px}.project-list-container{padding-left:10px;padding-right:10px}.project-name{min-width:220px}.project-dt-bottom{align-items:flex-start;flex-direction:column}}
	</style>
@endsection

@section('script')
	<script>
		$(document).ready(function(){
			$.fn.dataTable.ext.errMode = 'none';

			var table = $('#examplee').DataTable({
				pageLength: 10,
				lengthMenu: [10, 25, 50, 100],
				order: [],
				responsive: false,
				autoWidth: false,
				searching: true,
				dom: 'rt<"project-dt-bottom"lip>',
				columnDefs: [
					{ targets: [0, 6], orderable: false },
					{ targets: [0, 6], searchable: false }
				],
				language: {
					emptyTable: 'No projects found.',
					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' }
				}
			});

			$('#examplee').on('error.dt', function(e, settings, techNote, message){
				console.error('DataTables:', message);
			});

			$.fn.dataTable.ext.search.push(function(settings, data, dataIndex){
				if(settings.nTable.id !== 'examplee'){ return true; }

				var row = table.row(dataIndex).node();
				var filterStart = $('#filter_start').val();
				var filterEnd = $('#filter_end').val();
				var filterCategory = $('#filter_category').val();
				var filterForm = $('#filter_form').val();
				var filterBudget = $('#filter_budget').val();
				var filterStatus = $('#filter_status').val();

				var rowStart = $(row).attr('data-start') || '';
				var rowEnd = $(row).attr('data-end') || '';
				var rowCategory = $(row).attr('data-category') || '';
				var rowForm = $(row).attr('data-form') || '';
				var rowStatus = $(row).attr('data-status') || ''; 
				var rowBudgetAttr = $(row).attr('data-budget');
				var rowBudget = rowBudgetAttr !== '' && rowBudgetAttr != null ? parseFloat(rowBudgetAttr) : null;

				// Date range overlap
				if(filterStart != '' && (rowEnd == '' || rowEnd < filterStart)){ return false; }
				if(filterEnd != '' && (rowStart == '' || rowStart > filterEnd)){ return false; }

				if(filterCategory != '' && rowCategory != filterCategory){ return false; }
				if(filterForm != '' && rowForm != filterForm){ return false; }
				if(filterStatus != '' && rowStatus != filterStatus){ return false; }

				if(filterBudget != ''){
					var maxBudget = parseFloat(filterBudget);
					if(!isNaN(maxBudget) && (rowBudget === null || isNaN(rowBudget) || rowBudget > maxBudget)){ return false; }
				}

				return true;
			});

			$('#filter_keyword').on('input', function(){
				table.search(this.value).draw();
			});

			$('#filter_start, #filter_end, #filter_category, #filter_form, #filter_status').on('change', function(){
				table.draw();
			});

			$('#filter_budget').on('input', function(){
				this.value = this.value.replace(/[^0-9.]/g, '');
				var parts = this.value.split('.');
				if(parts.length > 2){ this.value = parts[0] + '.' + parts.slice(1).join(''); }
				table.draw();
			});

			$('#clear_filter').on('click', function(){
				$('#filter_keyword, #filter_start, #filter_end, #filter_category, #filter_form, #filter_budget, #filter_status').val('');
				table.search('');
				table.columns().search('');
				table.draw();
			});

			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();
		});
	</script>
@endsection

@section('content')

	@include('layouts.header')
	@include('layouts.header-sub')

	<section class="wrapper bg-light">
		<div class="container-fluid project-list-container py-14 py-md-13">
			<div class="project-list-shell">
				<div class="project-list-topbar">
					<div class="project-list-title-wrap">
						<div class="project-list-title-icon"><i class="uil uil-folder-open"></i></div>
						<div>
							<h1>All Projects</h1>
							<p>View, search and filter projects available under your account.</p>
						</div>
					</div>
					<div class="project-total"><i class="uil uil-files-landscapes" style="color: #4f46e5 !important;"></i> {{ number_format($project->count()) }} Projects</div>
				</div>

				<div class="project-list-body">
					<div class="project-filter-box">
						<div class="project-filter-header">
							<div class="project-filter-title-wrap">
								<div class="project-filter-icon"><i class="uil uil-filter"></i></div>
								<div class="project-filter-title">
									<h4>Search & Filter</h4>
									<p>Find projects by keyword, form, type, status, date range or budget.</p>
								</div>
							</div>
							<button type="button" id="clear_filter" class="btn-clear-filter"><i class="uil uil-redo me-1" style="color: #4f46e5 !important;"></i> Clear Search</button>
						</div>

						<div class="row g-3">
							<div class="col-md-6 col-xl-4">
								<div class="project-field-label">Keyword</div>
								<div class="project-search-input-wrap">
									<input type="text" id="filter_keyword" class="form-control" placeholder="Search project name, type or form...">
								</div>
							</div>

							<div class="col-md-6 col-xl-2">
								<div class="project-field-label">Form</div>
								<select id="filter_form" class="form-select">
									<option value="">All Forms</option>
									@foreach($project->pluck('project_form')->filter()->unique()->sort()->values() as $form)
										<option value="{{ $form }}">{{ $form }}</option>
									@endforeach
								</select>
							</div>

							<div class="col-md-6 col-xl-2">
								<div class="project-field-label">Type</div>
								<select id="filter_category" class="form-select">
									<option value="">All Types</option>
									@foreach($categories as $category)
										<option value="{{ $category }}">{{ $category }}</option>
									@endforeach
								</select>
							</div>

							<div class="col-md-6 col-xl-2">
								<div class="project-field-label">Start Date</div>
								<input type="date" id="filter_start" class="form-control">
							</div>

							<div class="col-md-6 col-xl-2">
								<div class="project-field-label">End Date</div>
								<input type="date" id="filter_end" class="form-control">
							</div>

							<div class="col-md-6 col-xl-2">
								<div class="project-field-label">Maximum Budget</div>
								<input type="text" inputmode="decimal" id="filter_budget" class="form-control" placeholder="e.g. 500000" autocomplete="off">
							</div>

							<div class="col-md-6 col-xl-2">
								<div class="project-field-label">Status</div>
								<select id="filter_status" class="form-select">
									<option value="">All Statuses</option>
									@foreach($project->pluck('project_status')->filter(function($status){ return trim((string)$status) !== ''; })->unique()->sort()->values() as $status)
										<option value="{{ $status }}">{{ $status }}</option>
									@endforeach
									<option value="__empty__">Not set</option>
								</select>
							</div>
						</div>
					</div>

					<div class="project-table-box">
						<div class="table-responsive">
							<table id="examplee" class="table table-hover" width="100%">
								<thead>
									<tr>
										<th width="5%" class="text-center">No.</th>
										<th width="8%">Form</th>
										<th>Type</th>
										<th>Project Name</th>
										<th>Start - End</th>
										<th>Status</th>
										<th width="8%" class="text-center">Action</th>
									</tr>
								</thead>
								<tbody>
									@foreach($project as $new_project)
										<tr data-start="{{ $new_project->project_from }}" data-end="{{ $new_project->project_to }}" data-category="{{ $new_project->project_categories }}" data-form="{{ $new_project->project_form }}" data-budget="{{ $new_project->project_total_currency }}" data-status="{{ trim((string)($new_project->project_status ?? '')) !== '' ? $new_project->project_status : '__empty__' }}">
											<td class="project-no"></td>
											<td>
												@if(!empty($new_project->project_form))
													<span class="project-form-badge">{{ $new_project->project_form }}</span>
												@else
													-
												@endif
											</td>
											<td>
												@if(!empty($new_project->project_categories))
													<span class="project-type-badge">{{ $new_project->project_categories }}</span>
												@else
													-
												@endif
											</td>
											<td>
												<div class="project-name">
													@if(!empty($new_project->project_name_en))
														{{ $new_project->project_name_en }}
													@else
														-
													@endif
												</div>
											</td>
											<td>
												<div class="project-duration">
													@if(!empty($new_project->project_from))
														{{ date('d M Y', strtotime($new_project->project_from)) }}
													@else
														-
													@endif
													<span class="duration-separator">→</span>
													@if(!empty($new_project->project_to))
														{{ date('d M Y', strtotime($new_project->project_to)) }}
													@else
														-
													@endif
												</div>
											</td>
											<td>
												@php
													$status = trim((string)($new_project->project_status ?? ''));
													$statusClass = match($status){
														'Draft' => 'project-status-draft',
														'Under Review' => 'project-status-review',
														'Pending Code Assignment' => 'project-status-code',
														'In Progress' => 'project-status-progress',
														'Completed' => 'project-status-completed',
														'Not Recommended', 'Disapproved', 'Rejected' => 'project-status-rejected',
														default => 'project-status-other'
													};
												@endphp
												@if($status !== '')
													<span class="project-status-pill {{ $statusClass }}">{{ $status }}</span>
												@else
													<span class="project-status-empty">Not set</span>
												@endif
											</td>
											<td class="text-center">
												<a href="{{ url('/projectview/'.$new_project->project_id) }}" class="btn-project-view" title="View Project">
													<i class="uil uil-eye"></i> View
												</a>
											</td>
										</tr>
									@endforeach
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	@include('layouts.footer')

@endsection