@extends('layouts.demo10.base')

@section('content')
<div class="grid gap-1 lg:gap-1.5">
    <!-- begin: Toolbar -->
    <div class="flex flex-wrap items-center justify-between gap-5">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-xl text-mono">
                Create Project
            </h1>
            <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                <a class="hover:text-primary transition-colors" href="/">Home</a>
                <span class="text-muted-foreground">/</span>
                <a class="hover:text-primary transition-colors" href="{{ route('demo10.tenants.project.projects') }}">Projects</a>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">Create</span>
            </div>
        </div>
        <div class="flex items-center gap-2.5">
            <a class="kt-btn kt-btn-outline" href="{{ route('demo10.tenants.project.projects') }}">
                <i class="ki-filled ki-arrow-left"></i>
                Back to Projects
            </a>
        </div>
    </div>
    <!-- end: Toolbar -->

    <div class="kt-card max-w-[600px]">
        <div class="kt-card-header">
            <h3 class="kt-card-title text-base font-semibold">Project Details</h3>
        </div>
        <div class="kt-card-content p-5 lg:p-7.5">
            <form action="{{ route('projects.store') }}" method="POST" class="flex flex-col gap-6">
                @csrf

                <!-- Project Name -->
                <div class="flex flex-col gap-2">
                    <label for="name" class="text-sm font-semibold text-foreground">Project Name</label>
                    <div class="kt-input">
                        <input type="text"
                            name="name"
                            id="name"
                            placeholder="e.g. Health Survey" 
                            class="input"
                            required />
                    </div>
                    <p class="text-xs text-muted-foreground">Enter a unique and descriptive name for your project.</p>
                </div>

                <!-- Submit Button -->
                <div class="flex justify-end pt-3">
                    <button type="submit" class="kt-btn kt-btn-primary min-w-[150px]">
                        <i class="ki-filled ki-check"></i>
                        Confirm & Create
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection