@extends('layouts.app')
@section('title', ($project->exists ? $project->title : 'Add project').' — InLynq')
@section('heading', 'Projects')

@section('content')
<form method="POST" action="{{ $project->exists ? route('projects.update', $project) : route('projects.store') }}" enctype="multipart/form-data" class="app-narrow" style="max-width:920px">
  @csrf @if($project->exists) @method('PUT') @endif
  <x-iq.page-head :title="$project->exists ? $project->title : 'Add project'" crumb="Projects" :crumb-href="route('projects.index')">
    <a class="iq-btn iq-btn-quiet" href="{{ route('projects.index') }}">Cancel</a>
    <button class="iq-btn iq-btn-primary">{{ $project->exists ? 'Save changes' : 'Add to profile' }}</button>
  </x-iq.page-head>

  <x-iq.form-group title="Basics" description="What it was and why it matters.">
    <x-iq.field label="Title" name="title" span><x-iq.input name="title" :value="$project->title" required maxlength="120" /></x-iq.field>
    <x-iq.field label="Description" name="description" :counter="mb_strlen((string) $project->description).' / 500'" span><x-iq.textarea name="description" :value="$project->description" max="500" /></x-iq.field>
    <x-iq.field label="Link" name="url" optional><x-iq.affix name="url" prefix="https://" :value="preg_replace('#^https?://#', '', (string) $project->url)" /></x-iq.field>
    <x-iq.field label="Tags" name="tags" optional help="Up to three, separated by commas."><x-iq.input name="tags" :value="implode(', ', old('tags', $project->tags ?? []) ?: [])" placeholder="Web, Brand" /></x-iq.field>
  </x-iq.form-group>
  <x-iq.form-group title="Cover" description="16:7, cropped centre. Without an image the card shows the kind and year.">
    <div style="grid-column:1/-1"><x-iq.upload name="image" :src="$project->image_url" help="Wide image, at least 640px. Avoid text-heavy screenshots." /></div>
  </x-iq.form-group>
  <x-iq.form-group title="Details">
    <x-iq.field label="Kind" name="category"><x-iq.select name="category" :options="$categories" :value="$project->category" /></x-iq.field>
    <x-iq.field label="Status" name="status"><x-iq.select name="status" :options="$statuses" :value="$project->status" /></x-iq.field>
    <x-iq.field label="Started" name="started_at" optional><x-iq.input type="month" name="started_at" :value="$project->started_at?->format('Y-m')" /></x-iq.field>
    <x-iq.field label="Completed" name="completed_at" optional><x-iq.input type="month" name="completed_at" :value="$project->completed_at?->format('Y-m')" /></x-iq.field>
    <x-iq.field label="Company" name="company_id" optional><x-iq.select name="company_id" :options="$companies->pluck('name', 'id')->all()" :value="$project->company_id" placeholder="Independent" /></x-iq.field>
    <label class="iq-row" style="gap:12px;font-size:14px;align-self:end"><x-iq.switch name="is_visible" :checked="$project->is_visible ?? true" /> Show on my profile</label>
  </x-iq.form-group>
  <div class="app-formactions"><a class="iq-btn iq-btn-quiet" href="{{ route('projects.index') }}">Cancel</a><button class="iq-btn iq-btn-primary">{{ $project->exists ? 'Save changes' : 'Add to profile' }}</button></div>
</form>
@if ($project->exists)
<form method="POST" action="{{ route('projects.destroy', $project) }}" style="margin-top:32px" data-confirm="Delete {{ $project->title }}?" data-confirm-action="Delete project">@csrf @method('DELETE')<button class="iq-btn iq-btn-danger iq-btn-sm"><x-iq.icon name="trash" /> Delete project</button></form>
@endif
@endsection