{{-- resources/views/workspace/notes/index.blade.php --}}
@extends('workspace.layouts.workspace')
@section('title', 'My Notes')
@section('page-title', 'My Notes')

@section('ws-content')

<div style="display:grid; grid-template-columns:280px 1fr; gap:1.25rem; align-items:start;">

    {{-- Create note panel --}}
    <div class="ws-card" style="position:sticky; top:0;">
        <h3 style="font-family:'Fraunces',serif; font-size:0.9rem; font-weight:700; margin-bottom:0.85rem;">New Note</h3>
        <form action="{{ route('workspace.notes.store') }}" method="POST">
            @csrf
            <div style="display:flex; flex-direction:column; gap:0.6rem;">
                <div>
                    <label class="form-label">Title *</label>
                    <input type="text" name="title" placeholder="Note title…" class="form-field" required>
                </div>
                <div>
                    <label class="form-label">Content</label>
                    <textarea name="body" rows="5" class="form-field" placeholder="Write your note here…" style="resize:vertical;"></textarea>
                </div>
                <div>
                    <label class="form-label">Colour</label>
                    <div style="display:flex; gap:0.5rem; margin-top:0.25rem;">
                        @foreach(['yellow'=>'#fef08a','blue'=>'#93c5fd','green'=>'#86efac','pink'=>'#f9a8d4','purple'=>'#d8b4fe'] as $color=>$hex)
                        <label style="cursor:pointer;">
                            <input type="radio" name="color" value="{{ $color }}" {{ $color==='yellow'?'checked':'' }} style="display:none;" class="color-radio">
                            <div class="color-swatch" style="width:1.5rem;height:1.5rem;border-radius:50%;background:{{ $hex }};border:2px solid transparent;transition:border-color 0.15s;" data-color="{{ $color }}"></div>
                        </label>
                        @endforeach
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" style="justify-content:center;">Save Note</button>
            </div>
        </form>
    </div>

    {{-- Notes grid --}}
    <div>
        @if($notes->count())
        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0.75rem;">
            @foreach($notes as $note)
            <div class="note-{{ $note->color }}" style="border-radius:10px; border:1px solid; padding:1rem; position:relative; transition:box-shadow 0.2s;" onmouseover="this.style.boxShadow='0 4px 16px rgba(0,0,0,0.08)'" onmouseout="this.style.boxShadow='none'">
                @if($note->pinned)
                <span style="position:absolute; top:0.5rem; right:0.5rem; font-size:0.75rem;" title="Pinned">📌</span>
                @endif
                <a href="{{ route('workspace.notes.show', $note) }}" style="text-decoration:none;">
                    <h4 style="font-family:'Fraunces',serif; font-size:0.85rem; font-weight:700; color:#0f0f14; margin-bottom:0.4rem; padding-right:1.2rem;">{{ $note->title }}</h4>
                    @if($note->body)
                    <p style="font-size:0.72rem; color:#6b7280; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;">{{ strip_tags($note->body) }}</p>
                    @endif
                </a>
                <div style="display:flex; align-items:center; justify-content:space-between; margin-top:0.75rem; padding-top:0.5rem; border-top:1px solid rgba(0,0,0,0.06);">
                    <span style="font-size:0.62rem; color:#9ca3af;">{{ $note->updated_at->diffForHumans() }}</span>
                    <div style="display:flex; gap:0.3rem;">
                        {{-- Pin toggle --}}
                        <form action="{{ route('workspace.notes.update', $note) }}" method="POST">
                            @csrf @method('PUT')
                            <input type="hidden" name="title" value="{{ $note->title }}">
                            <input type="hidden" name="body" value="{{ $note->body }}">
                            <input type="hidden" name="color" value="{{ $note->color }}">
                            <input type="hidden" name="pinned" value="{{ $note->pinned ? 0 : 1 }}">
                            <button type="submit" class="btn btn-xs btn-outline" title="{{ $note->pinned ? 'Unpin' : 'Pin' }}" style="padding:0.2rem 0.4rem;">{{ $note->pinned ? '📌' : '📍' }}</button>
                        </form>
                        <form action="{{ route('workspace.notes.destroy', $note) }}" method="POST" onsubmit="return confirm('Delete note?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-xs btn-danger" style="padding:0.2rem 0.4rem;">×</button>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div style="text-align:center; padding:4rem 1rem; border:1.5px dashed #e5e7eb; border-radius:12px;">
            <p style="font-family:'Fraunces',serif; font-size:1rem; font-weight:700; color:#0f0f14; margin-bottom:0.4rem;">No notes yet</p>
            <p style="font-size:0.8rem; color:#9ca3af;">Create your first note using the panel on the left.</p>
        </div>
        @endif
    </div>
</div>

@push('ws-scripts')
<script>
    // Highlight selected color swatch
    document.querySelectorAll('.color-radio').forEach(r => {
        r.addEventListener('change', () => {
            document.querySelectorAll('.color-swatch').forEach(s => s.style.borderColor = 'transparent');
            document.querySelector(`.color-swatch[data-color="${r.value}"]`).style.borderColor = '#374151';
        });
    });
    // Init first selected
    document.querySelector('.color-swatch[data-color="yellow"]').style.borderColor = '#374151';
</script>
@endpush

@endsection