@extends('layouts.app')

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

@section('content')
<div class="max-w-2xl mx-auto px-8 py-8">

    {{-- Back link --}}
    <a href="{{ route('projects.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-slate-700 transition-colors duration-150 mb-6">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Projects
    </a>

    <h1 class="text-xl font-semibold text-slate-900 mb-6">New project</h1>

    {{-- Global error banner --}}
    @if ($errors->any())
        <div class="mb-6 flex items-start gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div>
                <p class="font-medium mb-1">Please fix the following errors:</p>
                <ul class="list-disc list-inside space-y-0.5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <form method="POST" action="{{ route('projects.store') }}">
        @csrf

        <div class="bg-white border border-slate-100 rounded-xl p-8 space-y-8">

            {{-- Section 1: Project details --}}
            <div class="space-y-5">
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Project details</p>

                {{-- Title --}}
                <div>
                    <label for="title" class="block text-sm font-medium text-slate-700 mb-1.5">
                        Title <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           id="title"
                           name="title"
                           value="{{ old('title') }}"
                           required
                           placeholder="e.g. Brand Identity Refresh"
                           class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors @error('title') border-red-300 focus:border-red-500 focus:ring-red-500/10 @enderror">
                    @error('title')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Description --}}
                <div>
                    <label for="description" class="block text-sm font-medium text-slate-700 mb-1.5">
                        Description
                    </label>
                    <textarea id="description"
                              name="description"
                              rows="4"
                              placeholder="Brief project overview…"
                              class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors resize-none @error('description') border-red-300 focus:border-red-500 focus:ring-red-500/10 @enderror">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="border-t border-slate-100"></div>

            {{-- Section 2: Assignment & status --}}
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Assignment &amp; status</p>

                <div class="grid grid-cols-2 gap-4">

                    {{-- Client --}}
                    <div>
                        <label for="client_id" class="block text-sm font-medium text-slate-700 mb-1.5">
                            Client <span class="text-red-500">*</span>
                        </label>
                        <select id="client_id"
                                name="client_id"
                                required
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors @error('client_id') border-red-300 focus:border-red-500 focus:ring-red-500/10 @enderror">
                            <option value="">— Select client —</option>
                            @foreach ($clients as $client)
                                <option value="{{ $client->id }}"
                                        {{ old('client_id', request('client_id')) == $client->id ? 'selected' : '' }}>
                                    {{ $client->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('client_id')
                            <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Status --}}
                    <div>
                        <label for="status" class="block text-sm font-medium text-slate-700 mb-1.5">
                            Status <span class="text-red-500">*</span>
                        </label>
                        <select id="status"
                                name="status"
                                required
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors @error('status') border-red-300 focus:border-red-500 focus:ring-red-500/10 @enderror">
                            @foreach ($statuses as $status)
                                <option value="{{ $status->value }}"
                                        {{ old('status', 'active') === $status->value ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $status->value)) }}
                                </option>
                            @endforeach
                        </select>
                        @error('status')
                            <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>

            <div class="border-t border-slate-100"></div>

            {{-- Section 3: Timeline --}}
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Timeline</p>

                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label for="start_date" class="block text-sm font-medium text-slate-700 mb-1.5">Start Date</label>
                        <input type="date"
                               id="start_date"
                               name="start_date"
                               value="{{ old('start_date') }}"
                               onchange="calcDuration()"
                               class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors @error('start_date') border-red-300 focus:border-red-500 focus:ring-red-500/10 @enderror">
                        @error('start_date')
                            <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="end_date" class="block text-sm font-medium text-slate-700 mb-1.5">End Date</label>
                        <input type="date"
                               id="end_date"
                               name="end_date"
                               value="{{ old('end_date') }}"
                               onchange="calcDuration()"
                               class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors @error('end_date') border-red-300 focus:border-red-500 focus:ring-red-500/10 @enderror">
                        @error('end_date')
                            <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div id="duration-display" class="mb-4 text-sm text-sky-700 font-medium hidden"></div>

                <div>
                    <label for="estimated_days" class="block text-sm font-medium text-slate-700 mb-1.5">
                        Estimated Duration (days)
                        <span class="text-slate-400 font-normal ml-1">— fallback if dates not set</span>
                    </label>
                    <input type="number"
                           id="estimated_days"
                           name="estimated_days"
                           value="{{ old('estimated_days') }}"
                           min="1"
                           max="3650"
                           placeholder="e.g. 30"
                           class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors @error('estimated_days') border-red-300 focus:border-red-500 focus:ring-red-500/10 @enderror">
                    @error('estimated_days')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            {{-- Form footer --}}
            <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
                <a href="{{ route('projects.index') }}"
                   class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 hover:border-slate-300 text-slate-700 text-sm font-medium rounded-lg transition-colors duration-150">
                    Cancel
                </a>
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2.5 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors duration-150 cursor-pointer">
                    Create project
                </button>
            </div>

        </div>

    </form>

</div>

@push('scripts')
<script>
function calcDuration() {
    const s = document.getElementById('start_date').value;
    const e = document.getElementById('end_date').value;
    const el = document.getElementById('duration-display');
    if (s && e) {
        const days = Math.round((new Date(e) - new Date(s)) / 86400000);
        if (days > 0) {
            el.textContent = days + (days === 1 ? ' day' : ' days') + ' between selected dates';
            el.classList.remove('hidden');
            return;
        }
    }
    el.classList.add('hidden');
}
</script>
@endpush
@endsection