@extends('layouts.master')

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

@section('style')
<style>
	.code-page-container{
		max-width:900px;
	}
	.project-detail-shell{
		background:#fff;
		border-radius:24px;
		box-shadow:0 20px 60px rgba(30,34,40,.08);
		border:1px solid rgba(120,90,255,.12);
		overflow:hidden;
	}
	.project-detail-topbar{
		padding:30px 32px;
		background:linear-gradient(135deg,#f7f2ff,#f4f9ff);
		border-bottom:1px solid rgba(120,90,255,.12);
	}
	.project-detail-topbar h1{
		margin:12px 0 0;
		font-size:28px;
		font-weight:800;
		color:#5b35c4;
	}
	.project-detail-topbar .form-title{
		margin-top:10px;
		font-size:17px;
		font-weight:600;
		color:#45445b;
		line-height:1.6;
		overflow-wrap:anywhere;
	}
	.code-editor{
		padding:30px 32px;
		background:#fff;
	}
	.code-editor h3{
		font-size:19px;
		font-weight:800;
		color:#35265c;
		margin:0 0 6px;
	}
	.code-editor p{
		font-size:14px;
		color:#6e7286;
		margin:0 0 22px;
	}
	.code-editor .form-control{
		height:50px;
		border-radius:12px;
		border:1px solid #dcd3ed;
	}
	.code-save{
		background:#7137c9;
		color:#fff;
		border:0;
		border-radius:11px;
		padding:12px 22px;
		font-weight:800;
	}
	.code-save:hover{
		background:#5828a4;
		color:#fff;
	}
	.code-back{
		font-size:13px;
		color:#6b46ad;
		font-weight:700;
		text-decoration:none;
	}
	@media(max-width:575.98px){
		.project-detail-topbar,
		.code-editor{
			padding:22px 18px;
		}
		.project-detail-topbar h1{
			font-size:24px;
		}
	}
</style>
@endsection

@section('content')
	@include('layouts.header')
	@include('layouts.header-sub')
	<section class="wrapper bg-light">
		<div class="container code-page-container py-10 py-md-12">
			<div class="project-detail-shell">
				<div class="project-detail-topbar">
					<a class="code-back" href="{{ route('project.code.list') }}">
						<i class="uil uil-arrow-left"></i> Back to Project Code List
					</a>
					<h1>Assign Project Code</h1>
					<div class="form-title">{{ $project->project_name_en ?: ($project->project_name_th ?: 'Project #'.$project->project_id) }}</div>
				</div>
				<div class="code-editor">
					<h3>Project Code</h3>
					<p>Enter the project code after the approval workflow is complete. Only this field and the project status will be updated.</p>
					@if(session('error'))
						<div class="alert alert-danger">{{ session('error') }}</div>
					@endif
					<form method="POST" action="{{ route('project.code.save', ['project_id' => $project->project_id]) }}">
						@csrf
						<label for="project_code" class="form-label fw-bold">Project Code <span class="text-danger">*</span></label>
						<input type="text" class="form-control @error('project_code') is-invalid @enderror" id="project_code" name="project_code" maxlength="100" value="{{ old('project_code', $project->project_code ?? '') }}" required autocomplete="off">
						@error('project_code')
							<div class="text-danger small mt-2">{{ $message }}</div>
						@enderror
						<button class="code-save mt-3" type="submit" onclick="return confirm('Assign this project code and set the project status to In Progress?')">
							<i class="uil uil-check-circle me-1"></i> Save Project Code
						</button>
					</form>
				</div>
			</div>
		</div>
	</section>
	@include('layouts.footer')
@endsection