@extends('layouts.main')
@section('main-container')

<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
    
                    <h2 class="page-title">
                        Add Project
                    </h2>
                </div>
				<!-- Page title actions -->
				<div class="col-auto ms-auto d-print-none">
					<div class="btn-list">
	                    <span class="d-none d-sm-inline">
                            <a href="/project/" class="btn btn-1">View List</a>
	                    </span>
                        <a href="" class="btn btn-primary btn-5 d-none d-sm-inline-block">
                    
                                Report
                        </a>  
                    </div>
                </div>
            </div>
	    </div>
    </div>
</div>

<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-md-10 mx-auto">
                <div class="card">

                    <!-- Success Message -->
                    @if (session('success'))
                        <div id="success-message" class="alert alert-success m-4">
                            {{ session('success') }}
                        </div>
                        <script>
                            setTimeout(() => {
                                const msg = document.getElementById('success-message');
                                if (msg) msg.style.display = 'none';
                            }, 5000);
                        </script>
                    @endif
                        <div class="card-header bg-primary text-white">
                            <h3 class="card-title">Add Project</h3>
                        </div>
                    <!-- Form Start -->
                    <form action="{{ route('project.store') }}" method="POST">
                        @csrf

                    

                        <!-- Card Body -->
                        <div class="card-body">

                            <!-- Project Name -->
                            <div class="mb-3">
                                <label for="name" class="form-label required">Project Name</label>
                                <input type="text" name="name" id="name" class="form-control" placeholder="Enter Project Name" required>
                            </div>

                            <!-- Project Type -->
                            <div class="mb-3">
                                <label for="type" class="form-label required">Project Type</label>
                                <select name="type" id="type" class="form-select" required>
                                    <option value="" disabled selected>Select Project Type</option>
                                    <option value="WHS">WHS</option>
                                    <option value="Watershed Project">Watershed Project</option>
                                </select>
                            </div>

                            <!-- Start Date -->
                            <div class="mb-3">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="date" name="start_date" id="start_date" class="form-control">
                            </div>

                            <!-- End Date -->
                            <div class="mb-3">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="date" name="end_date" id="end_date" class="form-control">
                            </div>

                            <!-- Status -->
                            <div class="mb-3">
                                <label for="status" class="form-label required">Project Status</label>
                                <select name="status" id="status" class="form-select" required>
                                    <option value="Planned" selected>Planned</option>
                                    <option value="Ongoing">Ongoing</option>
                                    <option value="Completed">Completed</option>
                                </select>
                            </div>

                        </div>

                        <!-- Card Footer -->
                        <div class="card-footer text-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-check"></i> Create Project
                            </button>
                        </div>

                    </form>
                    <!-- Form End -->

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

@endsection