@extends('layouts.app')

@section('title', 'Notes — Hisab')

@section('content')
@php
$colors = ['#1f2937', '#7f1d1d', '#78350f', '#713f12', '#365314', '#134e4a', '#1e3a8a', '#4c1d95', '#831843', '#3f3f46'];
$filtered = $notes;
$search = request('search', '');
if ($search) {
    $filtered = $notes->filter(fn($n) => str_contains(strtolower($n->title . ' ' . $n->content), strtolower($search)));
}
$pinned = $filtered->where('pinned', true);
$others = $filtered->where('pinned', false);
@endphp

<div class="mx-auto max-w-6xl space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center gap-3">
        <div>
            <h1 class="font-display text-2xl font-semibold">Notes</h1>
            <p class="text-sm text-muted-foreground">Google Keep style — dhoroner note niye rakhun</p>
        </div>
        <div class="sm:ml-auto flex gap-2 w-full sm:w-auto">
            <form method="GET" class="relative flex-1 sm:w-64">
                <x-icon name="search" class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <input type="text" name="search" value="{{ $search }}" placeholder="Notes khujun..." class="w-full rounded-lg border border-border bg-background pl-8 pr-3 py-2 text-sm">
            </form>
            <button onclick="document.getElementById('add-note-modal').showModal()" class="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground"><x-icon name="plus" class="h-4 w-4" /> Note</button>
        </div>
    </div>

    @if ($pinned->count() > 0)
        <div class="space-y-2">
            <h2 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground px-1">Pinned</h2>
            <div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-3">
                @foreach ($pinned as $note)
                    @include('notes.card', ['note' => $note, 'colors' => $colors])
                @endforeach
            </div>
        </div>
    @endif

    <div class="space-y-2">
        @if ($pinned->count() > 0)
            <h2 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground px-1">Others</h2>
        @endif
        @if ($others->isEmpty() && $pinned->isEmpty())
            <div class="text-center py-16 text-muted-foreground">
                <p class="mb-3">Kono note nei. Notun ekta lekhun.</p>
                <button onclick="document.getElementById('add-note-modal').showModal()" class="inline-flex items-center gap-1 rounded-md border border-border px-3 py-2 text-sm"><x-icon name="plus" class="h-4 w-4" /> Notun note</button>
            </div>
        @else
            <div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-3">
                @foreach ($others as $note)
                    @include('notes.card', ['note' => $note, 'colors' => $colors])
                @endforeach
            </div>
        @endif
    </div>
</div>

<dialog id="add-note-modal" class="rounded-2xl border border-border bg-card p-0 backdrop:bg-black/50">
    <div class="w-full max-w-md p-6">
        <h3 class="font-display text-lg font-semibold mb-4">Notun note</h3>
        <form method="POST" action="{{ route('notes.store') }}" class="space-y-3">
            @csrf
            <div>
                <label class="block text-sm font-medium">Title</label>
                <input type="text" name="title" class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium">Content</label>
                <textarea name="content" rows="4" class="mt-1 block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium">Color</label>
                <div class="flex flex-wrap gap-1.5 mt-1">
                    @foreach ($colors as $c)
                        <label class="cursor-pointer">
                            <input type="radio" name="color" value="{{ $c }}" class="peer sr-only" @if ($c === '#1f2937') checked @endif>
                            <span class="block h-6 w-6 rounded-full border-2 border-transparent peer-checked:border-primary peer-checked:scale-110 transition" style="background: {{ $c }}"></span>
                        </label>
                    @endforeach
                </div>
            </div>
            <div class="flex justify-end gap-2 pt-2">
                <button type="button" onclick="document.getElementById('add-note-modal').close()" class="rounded-lg border border-border px-4 py-2 text-sm">Cancel</button>
                <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">Save</button>
            </div>
        </form>
    </div>
</dialog>
@endsection