@extends('layouts.app')

@section('title', 'Notes')

@push('styles')
<style>
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .modal-content { background: var(--card-bg); border-radius: var(--radius); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
    .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; justify-content: space-between; }
    .modal-body { padding: 24px; }
    .modal-footer { padding: 16px 24px; border-top: 1px solid var(--card-border); display: flex; justify-content: flex-end; gap: 8px; }
    .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-input:focus { border-color: var(--primary-light); }
    .form-select { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-select:focus { border-color: var(--primary-light); }
    .form-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); resize: vertical; min-height: 100px; }
    .form-textarea:focus { border-color: var(--primary-light); }
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
    .btn-outline:hover { background: #F5F3F1; }
    .btn-danger { background: var(--danger); color: white; }
    .btn-danger:hover { background: #B91C1C; }
    .btn-sm { padding: 4px 10px; font-size: 13px; }
    .note-card { border-radius: var(--radius); padding: 16px; min-height: 120px; display: flex; flex-direction: column; position: relative; transition: box-shadow 0.15s; }
    .note-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
    [x-cloak] { display: none !important; }
</style>
@endpush

@section('content')

@php
    $noteColors = ['#FEF3C7', '#D1FAE5', '#DBEAFE', '#FCE7F3'];
    $noteJson = $notes->map(function ($n) {
        return ['id' => $n->id, 'content' => $n->content, 'color' => $n->color, 'pinned' => $n->pinned];
    });
@endphp

<div x-data="{
    addOpen: false,
    editOpen: false,
    editId: null,
    editContent: '',
    delModal: false,
    delId: null,
    notes: {{ $noteJson }},
    openDelete(id) { delId = id; delModal = true; },
    closeDelete() { delModal = false; delId = null; },
    openEdit(id) {
        this.editId = id;
        const n = this.notes.find(i => i.id === id) || {};
        this.editContent = n.content;
        this.editOpen = true;
    }
}">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
        <div>
            <h1 style="font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;">Quick notes</h1>
        </div>
        <button @click="addOpen = true" class="btn btn-primary">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Add Note
        </button>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;">
        @forelse ($notes as $note)
            <div class="note-card" style="background: {{ $note->color }};">
                @if($note->pinned)
                    <div style="position: absolute; top: 8px; right: 8px; font-size: 14px; color: var(--text-muted);">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                    </div>
                @endif
                <div style="flex: 1; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; padding-right: 20px;">{{ $note->content }}</div>
                <div style="display: flex; gap: 6px; margin-top: 12px; justify-content: flex-end;">
                    <form method="POST" action="{{ route('notes.toggle-pin', $note) }}" style="display: inline;">
                        @csrf
                        <button type="submit" class="btn btn-outline btn-sm" style="background: rgba(255,255,255,0.6);">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        </button>
                    </form>
                    <button @click="openEdit({{ $note->id }})" class="btn btn-outline btn-sm" style="background: rgba(255,255,255,0.6);">Edit</button>
                    <button @click="openDelete({{ $note->id }})" class="btn btn-danger btn-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                    </button>
                </div>
            </div>
        @empty
            <div style="grid-column: 1 / -1; padding: 48px; text-align: center; color: var(--text-muted); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);">
                No notes yet. Click "Add Note" to create one.
            </div>
        @endforelse
    </div>

    <div x-show="addOpen" x-cloak class="modal-overlay" x-on:click.self="addOpen = false" x-transition>
        <div class="modal-content">
            <div class="modal-header">
                <h3 style="font-size: 16px; font-weight: 600;">Add note</h3>
                <button @click="addOpen = false" style="background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            <form method="POST" action="{{ route('notes.store') }}">
                @csrf
                <div class="modal-body">
                    <div style="display: grid; gap: 16px;">
                        <div>
                            <label class="form-label">Content</label>
                            <textarea name="content" required class="form-textarea" placeholder="Write your note here..."></textarea>
                        </div>
                        <div>
                            <label class="form-label">Color</label>
                            <select name="color" class="form-select">
                                <option value="#FEF3C7">Yellow</option>
                                <option value="#D1FAE5">Green</option>
                                <option value="#DBEAFE">Blue</option>
                                <option value="#FCE7F3">Pink</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" @click="addOpen = false" class="btn btn-outline">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add</button>
                </div>
            </form>
        </div>
    </div>

    <div x-show="editOpen" x-cloak class="modal-overlay" x-on:click.self="editOpen = false" x-transition>
        <div class="modal-content">
            <div class="modal-header">
                <h3 style="font-size: 16px; font-weight: 600;">Edit note</h3>
                <button @click="editOpen = false" style="background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            <form method="POST" x-bind:action="'/notes/' + editId">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div>
                        <label class="form-label">Content</label>
                        <textarea name="content" required class="form-textarea" x-model="editContent"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" @click="editOpen = false" class="btn btn-outline">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>

    <div x-show="delModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center">
        <div class="fixed inset-0 bg-black/50" @click="closeDelete()"></div>
        <div class="relative bg-white rounded-xl shadow-xl p-6 w-full max-w-sm mx-4">
            <h3 class="text-lg font-semibold mb-2">Confirm Delete</h3>
            <p class="text-gray-600 text-sm mb-6">Are you sure? This cannot be undone.</p>
            <div class="flex justify-end gap-3">
                <button @click="closeDelete()" class="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50">Cancel</button>
                <form method="POST" x-bind:action="'/notes/' + delId" style="display:inline">
                    @csrf @method('DELETE')
                    <button type="submit" class="px-4 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>