@extends('layouts.app')

@section('title', 'Notes - Jadwal Therapist')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    .notes-table { font-size: 0.75rem; }
    .notes-cell { 
        min-width: var(--cell-min, 100px); 
        max-width: var(--cell-max, 3000px); 
        padding: 6px;
        cursor: pointer;
        transition: all 0.2s;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        vertical-align: top;
    }
    /* Konten sel: melebar horizontal dulu (max-content), baru wrap saat capai max */
    .notes-cell .cell-inner {
        display: block;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        white-space: pre-wrap; /* hormati enter/newline dan tetap wrap */
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.2;
    }
    /* Tighter spacing for first time-slot row (paling atas) */
    tr.therapist-row td.notes-cell { padding-top: 2px; padding-bottom: 2px; }
    tr.therapist-row td.notes-cell .cell-inner { line-height: 1.1; }
    .notes-cell:hover { 
        transform: none; 
        box-shadow: none;
        z-index: 10;
    }
    .therapist-row { border-bottom: 2px solid #e5e7eb; }
    .sticky-col { position: sticky; left: 0; z-index: 20; background: white; box-shadow: 2px 0 4px rgba(0,0,0,0.1); overflow: hidden; box-sizing: border-box; }
    .sticky-header { position: sticky; top: 0; z-index: 30; background: white; }
    .sticky-col-right { position: sticky; right: 0; z-index: 25; background: white; box-shadow: -2px 0 4px rgba(0,0,0,0.1); }
    .table-scroll { overflow: auto; max-height: calc(100vh - 300px); -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain; }
    .time-slot-cell { min-width: var(--w-jam); width: var(--w-jam); max-width: var(--w-jam); overflow: hidden; }

    /* Sticky columns dynamic widths via CSS variables (computed from content) */
    :root {
        --w-no: 40px;
        --w-terapis: auto;
        --w-domisili: auto;
        --w-transportasi: auto;
        --w-jam: auto;
        --cell-min: 100px;
        --cell-max: 3000px;
        --left-terapis: 40px;
        --left-domisili: 240px;
        --left-transportasi: 360px;
        --left-jam: 500px;
        --w-day: 120px;
        --visible-days: 10;
    }
    /* Responsive day width */
    @media (max-width: 1280px) {
        :root { --w-day: 100px; }
    }
    @media (max-width: 1024px) {
        :root { --w-day: 90px; }
    }
    @media (max-width: 768px) {
        :root { --w-day: 72px; }
    }
    @media (max-width: 640px) {
        :root { --w-day: 64px; }
    }
    @media (max-width: 420px) {
        :root { --w-day: 56px; }
    }
    .col-no { width: var(--w-no); min-width: 36px; }
    .col-terapis { width: var(--w-terapis); min-width: 100px; }
    .col-domisili { width: var(--w-domisili); min-width: 80px; }
    .col-transportasi { width: var(--w-transportasi); min-width: 100px; }
    .col-jam { width: var(--w-jam); min-width: 90px; }
    .col-day { min-width: var(--w-day); width: var(--w-day); max-width: var(--w-day); box-sizing: border-box; }
    .col-day .cell-inner { width: 100%; }

    .sticky-no { left: 0; }
    .sticky-terapis { left: var(--left-terapis); }
    .sticky-domisili { left: var(--left-domisili); }
    .sticky-transportasi { left: var(--left-transportasi); }
    .sticky-jam { left: var(--left-jam); }
    /* Pastikan kolom tanggal 1 berada di atas kolom sticky JAM untuk menerima klik */
    tbody tr > td.notes-cell:first-of-type { position: relative; z-index: 40; }

    /* Responsive enhancements */
    /* Mobile: no sticky columns; canvas shows A–D width; scroll inside canvas for JAM, days & aksi */
    @media (max-width: 768px) {
        /* Nonaktifkan sticky untuk semua kolom agar ikut bergeser saat scroll */
        .sticky-col { position: static; left: auto; right: auto; box-shadow: none; }
        .sticky-col-right { position: static; right: auto; box-shadow: none; }
        /* Izinkan scroll horizontal di dalam canvas tanpa melebarkan halaman */
        .table-scroll { max-width: 100% !important; overflow: auto; }
    }
    /* Tighten sticky time column on small screens */
    @media (max-width: 640px) {
        :root { --w-jam: 84px; }
    }
    .notes-table { font-size: clamp(0.65rem, 1.2vw, 0.8rem); }
    .table-scroll { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior: contain; }
    @media (max-width: 640px) { /* mobile */
        .table-scroll { max-height: calc(100vh - 220px); }
    }
    @media (hover: none) {
        .notes-cell:hover { transform: none; box-shadow: none; }
    }

    /* Scrollbar styling */
    .table-scroll::-webkit-scrollbar { height: 8px; }
    .table-scroll::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.5); border-radius: 8px; }
    .dark .table-scroll::-webkit-scrollbar-thumb { background: rgba(75, 85, 99, 0.5); }

    /* Edge fade to indicate horizontal scroll */
    .table-scroll-mask { position: relative; }
    .table-scroll-mask::after { display: none; }
    .dark .table-scroll-mask::after { display: none; }

    /* Sticky header subtle blur */
    .sticky-header { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

    /* Scroll container for memos */
    .memos-scroll { -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
    .memos-scroll::-webkit-scrollbar { width: 8px; }
    .memos-scroll::-webkit-scrollbar-thumb { background: rgba(236, 72, 153, 0.35); border-radius: 8px; }
    .dark .memos-scroll::-webkit-scrollbar-thumb { background: rgba(244, 114, 182, 0.35); }
</style>
@endpush

@section('content')
<div x-data="notesApp()" x-init="init()">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">📝 Notes Therapist</h1>
                <p class="text-gray-600 dark:text-gray-400 mt-1">Jadwal & Catatan Therapist Momkind.id</p>
            </div>
            <div class="flex flex-wrap items-center gap-2 sm:gap-3">
                <button @click="showAddTherapistModal = true" class="bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white px-3 py-2 sm:px-4 rounded-lg flex items-center gap-2 transition">
                    <i class="fas fa-plus"></i>
                    <span class="hidden sm:inline">Tambah Therapist</span>
                </button>
                <a :href="`{{ route('notes.export-pdf') }}?month=${currentMonth}&year=${currentYear}`" class="bg-red-600 dark:bg-red-500 hover:bg-red-700 dark:hover:bg-red-600 text-white px-3 py-2 sm:px-4 rounded-lg flex items-center gap-2 transition">
                    <i class="fas fa-file-pdf"></i>
                    <span class="hidden sm:inline">Export PDF</span>
                </a>
                <a :href="`{{ route('notes.export-excel') }}?month=${currentMonth}&year=${currentYear}`" class="bg-green-600 dark:bg-green-500 hover:bg-green-700 dark:hover:bg-green-600 text-white px-3 py-2 sm:px-4 rounded-lg flex items-center gap-2 transition">
                    <i class="fas fa-file-excel"></i>
                    <span class="hidden sm:inline">Export Excel</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Filter & Navigation -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Navigasi Bulan -->
            <div class="col-span-1 md:col-span-2 lg:col-span-1">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Periode</label>
                <div class="flex items-center gap-2">
                    <button @click="previousMonth()" class="bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 p-2 rounded-lg transition">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <select x-model="currentMonth" @change="changeMonth()" class="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="1">Januari</option>
                        <option value="2">Februari</option>
                        <option value="3">Maret</option>
                        <option value="4">April</option>
                        <option value="5">Mei</option>
                        <option value="6">Juni</option>
                        <option value="7">Juli</option>
                        <option value="8">Agustus</option>
                        <option value="9">September</option>
                        <option value="10">Oktober</option>
                        <option value="11">November</option>
                        <option value="12">Desember</option>
                    </select>
                    <select x-model="currentYear" @change="changeMonth()" class="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="2024">2024</option>
                        <option value="2025">2025</option>
                        <option value="2026">2026</option>
                        <option value="2027">2027</option>
                    </select>
                    <button @click="nextMonth()" class="bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 p-2 rounded-lg transition">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <button @click="goToToday()" class="mt-2 w-full bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-3 py-1 rounded text-sm transition">
                    📅 Go to Today
                </button>
            </div>

            <!-- Search -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">🔎 Cari Therapist</label>
                <input type="text" x-model="search" @input.debounce.300ms="applyFilters()" placeholder="Nama therapist..." class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>

            <!-- Filter Domisili -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">🏠 Domisili</label>
                <select x-model="filterDomicile" @change="applyFilters()" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <option value="">Semua</option>
                    @foreach($domiciles as $domicile)
                        <option value="{{ $domicile }}">{{ $domicile }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Filter Transportasi -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">🚗 Transportasi</label>
                <select x-model="filterTransportation" @change="applyFilters()" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <option value="">Semua</option>
                    @foreach($transportations as $transportation)
                        <option value="{{ $transportation }}">{{ $transportation }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <!-- Tabel Notes -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="sm:hidden px-4 py-2 text-xs text-gray-500">Geser ke samping untuk melihat kolom JAM dan tanggal ➜</div>
        <div class="table-scroll table-scroll-mask">
            <table class="notes-table w-full border-collapse">
                <thead class="sticky-header bg-gradient-to-r from-indigo-50 to-blue-50">
                    <tr>
                        <th class="sticky-col sticky-no col-no border border-gray-300 px-2 py-3 text-xs font-semibold text-gray-700" data-col="no">NO</th>
                        <th class="sticky-col sticky-terapis col-terapis border border-gray-300 px-2 py-3 text-xs font-semibold text-gray-700" data-col="terapis">TERAPIS</th>
                        <th class="sticky-col sticky-domisili col-domisili border border-gray-300 px-2 py-3 text-xs font-semibold text-gray-700" data-col="domisili">DOMISILI</th>
                        <th class="sticky-col sticky-transportasi col-transportasi border border-gray-300 px-2 py-3 text-xs font-semibold text-gray-700" data-col="transportasi">TRANSPORTASI</th>
                        <th class="sticky-col sticky-jam col-jam border border-gray-300 px-2 py-3 text-xs font-semibold text-gray-700" data-col="jam">JAM</th>
                        @for($day = 1; $day <= $daysInMonth; $day++)
                            <th class="col-day border border-gray-300 px-2 py-3 text-xs font-semibold text-gray-700">{{ $day }}</th>
                        @endfor
                        <th class="sticky-col-right border border-gray-300 px-2 py-3 text-xs font-semibold text-gray-700" data-col="aksi">AKSI</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $groupedTherapists = $therapists->groupBy('order_no');
                    @endphp
                    @foreach($groupedTherapists as $orderNo => $therapistGroup)
                        @php $rowCount = $therapistGroup->count(); @endphp
                        @foreach($therapistGroup as $index => $therapist)
                            <tr class="{{ $index === 0 ? 'therapist-row' : '' }}">
                                @if($index === 0)
                                    <td rowspan="{{ $rowCount }}" class="sticky-col sticky-no col-no border border-gray-300 px-2 py-2 text-center font-semibold bg-gray-50" style="background-color: {{ $therapist->info_bg_color ?? '#f9fafb' }};">
                                        {{ $orderNo }}
                                    </td>
                                    <td rowspan="{{ $rowCount }}" class="sticky-col sticky-terapis col-terapis border border-gray-300 px-2 py-2 font-medium bg-gray-50" style="background-color: {{ $therapist->info_bg_color ?? '#f9fafb' }};">
                                        <div class="flex items-center justify-between">
                                            <span>{{ $therapist->name }}</span>
                                            <button @click="editTherapist({{ $therapist->id }}, @js($therapist->name), @js($therapist->domicile), @js($therapist->transportation), @js($therapist->info_bg_color))" class="text-blue-600 hover:text-blue-800">
                                                <i class="fas fa-edit text-xs"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td rowspan="{{ $rowCount }}" class="sticky-col sticky-domisili col-domisili border border-gray-300 px-2 py-2 text-center bg-gray-50" style="background-color: {{ $therapist->info_bg_color ?? '#f9fafb' }};">
                                        {{ $therapist->domicile }}
                                    </td>
                                    <td rowspan="{{ $rowCount }}" class="sticky-col sticky-transportasi col-transportasi border border-gray-300 px-2 py-2 text-center bg-gray-50" style="background-color: {{ $therapist->info_bg_color ?? '#f9fafb' }};">
                                        {{ $therapist->transportation }}
                                    </td>
                                @endif
                                <td class="sticky-col sticky-jam col-jam border border-gray-300 px-2 py-2 text-center text-xs font-medium time-slot-cell" style="background-color: {{ $therapist->time_bg_color ?? '#eff6ff' }};">
                                    <div class="flex items-center justify-between gap-1">
                                        <span class="flex-1">{{ $therapist->time_slot }}</span>
                                        <div class="flex gap-1">
                                            <button @click="editTimeSlot({{ $therapist->id }}, @js($therapist->time_slot), @js($therapist->time_bg_color))" class="text-blue-600 hover:text-blue-800" title="Edit Jam">
                                                <i class="fas fa-edit text-xs"></i>
                                            </button>
                                            @if($therapistGroup->count() > 1)
                                            <button @click="deleteTimeSlot({{ $therapist->id }})" class="text-red-600 hover:text-red-800" title="Hapus Jam">
                                                <i class="fas fa-times text-xs"></i>
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                @for($day = 1; $day <= $daysInMonth; $day++)
                                    @php
                                        $scheduleDate = \Carbon\Carbon::create($year, $month, $day);
                                        $entry = $therapist->getScheduleEntry($scheduleDate);
                                        $bgColor = $entry ? $entry->bg_color : '#ffffff';
                                        $content = $entry ? $entry->content : '';
                                    @endphp
                                    <td class="notes-cell col-day border border-gray-300" 
                                        style="background-color: {{ $bgColor }};"
                                        @click="editCell({{ $therapist->id }}, @js($scheduleDate->format('Y-m-d')), @js($content), @js($bgColor))">
                                        <div class="cell-inner text-xs leading-tight">
                                            {!! nl2br(e($content)) !!}
                                        </div>
                                    </td>
                                @endfor
                                @if($index === 0)
                                    <td rowspan="{{ $rowCount }}" class="sticky-col-right border border-gray-300 px-2 py-2 text-center bg-gray-50" data-col="aksi">
                                        <div class="flex flex-col gap-2">
                                            <button @click="addTimeSlot({{ $orderNo }}, @js($therapist->name), @js($therapist->domicile), @js($therapist->transportation))" class="text-green-600 hover:text-green-800" title="Tambah Jam">
                                                <i class="fas fa-plus text-sm"></i>
                                            </button>
                                            <button @click="deleteTherapist({{ $orderNo }}, @js($therapist->name))" class="text-red-600 hover:text-red-800" title="Hapus Therapist">
                                                <i class="fas fa-trash text-sm"></i>
                                            </button>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Catatan Memo -->
    <div class="mt-6 bg-white dark:bg-gray-800 rounded-2xl shadow-soft p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">📝 Catatan</h3>
        <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
        <a href="{{ route('notes.export-memo-excel') }}?month={{ $date->month }}&year={{ $date->year }}" class="inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-xl text-sm shadow-sm transition w-full sm:w-auto justify-center">
        <i class="fas fa-file-excel"></i><span class="hidden sm:inline">Export Excel Catatan</span>
        </a>
        <button @click="showAddMemoModal = true" class="inline-flex items-center gap-2 bg-gradient-to-r from-pink-600 to-rose-600 hover:from-pink-700 hover:to-rose-700 text-white px-4 py-2 rounded-xl text-sm shadow-sm transition w-full sm:w-auto justify-center">
        <i class="fas fa-plus"></i><span class="hidden sm:inline">Tambah Catatan</span>
        </button>
        </div>
        </div>

        @if($memos->isEmpty())
            <div class="text-center py-12">
                <div class="w-16 h-16 mx-auto rounded-full bg-amber-50 dark:bg-amber-900/20 flex items-center justify-center mb-4">
                    <i class="fas fa-note-sticky text-amber-500"></i>
                </div>
                <p class="text-gray-600 dark:text-gray-400">Belum ada catatan</p>
            </div>
        @else
            <div class="max-h-[60vh] overflow-y-auto pr-1 memos-scroll">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                @foreach($memos as $memo)
                    <div class="group rounded-2xl p-5 bg-gradient-to-br from-pink-50 to-rose-50 dark:from-gray-800 dark:to-gray-900 border border-pink-200/60 dark:border-gray-700 shadow-soft hover:shadow-soft-lg transition relative">
                        <div class="absolute right-2 top-2 sm:right-3 sm:top-3 flex items-center gap-1 z-10">
                            <button @click="openMemoDetail({ id: {{ $memo->id }}, date: @js($memo->memo_date->format('d/m/Y')), content: @js($memo->content), creator: @js(optional($memo->creator)->name ?? 'Unknown'), created_at: @js($memo->created_at->format('d M Y H:i')), updated_at: @js($memo->updated_at->format('d M Y H:i')), updater: @js(optional($memo->updater)->name ?? null) })" class="inline-flex items-center justify-center w-9 h-9 sm:w-8 sm:h-8 rounded-md bg-pink-600 text-white hover:bg-pink-700 transition" title="Detail">
                                <i class="fa-regular fa-eye text-sm"></i>
                            </button>
                            <button @click="editMemo({{ $memo->id }}, @js($memo->content))" class="inline-flex items-center justify-center w-9 h-9 sm:w-8 sm:h-8 rounded-md text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20" title="Edit">
                                <i class="fas fa-edit text-sm"></i>
                            </button>
                            <button @click="deleteMemo({{ $memo->id }})" class="inline-flex items-center justify-center w-9 h-9 sm:w-8 sm:h-8 rounded-md text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" title="Hapus">
                                <i class="fas fa-trash text-sm"></i>
                            </button>
                        </div>
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex-1 pr-16 sm:pr-10">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-semibold bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300">
                                    {{ $memo->memo_date->format('d/m/Y') }}
                                </span>
                                @php $preview = collect(preg_split('/\r\n|\r|\n/', $memo->content))->take(3)->implode(PHP_EOL); @endphp
                                <p class="mt-3 text-[13px] leading-relaxed text-gray-800 dark:text-gray-300 break-words whitespace-pre-wrap">{!! nl2br(e($preview)) !!}</p>
                                <div class="mt-3 text-[11px] text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-x-3 gap-y-1">
                                    <span class="inline-flex items-center gap-1"><i class="fa-regular fa-user"></i> <span>oleh {{ optional($memo->creator)->name ?? 'Unknown' }}</span></span>
                                    <span>•</span>
                                    <span class="inline-flex items-center gap-1"><i class="fa-regular fa-calendar"></i> <span>dibuat {{ $memo->created_at->format('d M Y H:i') }}</span></span>
                                    @if($memo->updated_at && $memo->updated_at->ne($memo->created_at))
                                        <span>•</span>
                                        <span class="inline-flex items-center gap-1"><i class="fa-regular fa-pen-to-square"></i> <span>diedit {{ $memo->updated_at->format('d M Y H:i') }} oleh {{ optional($memo->updater)->name ?? optional($memo->creator)->name ?? 'Unknown' }}</span></span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                </div>
            </div>
        @endif
    </div>

    <!-- Modal Tambah Therapist -->
    <div id="addTherapistModal" x-show="showAddTherapistModal" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="showAddTherapistModal = false">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Tambah Therapist Baru</h3>
            <form @submit.prevent="addTherapist()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Therapist</label>
                        <input type="text" x-model="newTherapist.name" required class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Domisili</label>
                        <input type="text" x-model="newTherapist.domicile" required class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Transport</label>
                        <input type="text" x-model="newTherapist.transportation" required class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                </div>
                <div class="flex gap-2 mt-6">
                    <button type="button" @click="showAddTherapistModal = false" class="flex-1 bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg transition">Batal</button>
                    <button type="submit" class="flex-1 bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white px-4 py-2 rounded-lg transition">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Edit Time Slot -->
    <div id="editTimeSlotModal" x-show="showEditTimeSlotModal" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="showEditTimeSlotModal = false">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h3 class="text-xl font-semibold mb-4">Edit Jam</h3>
            <form @submit.prevent="updateTimeSlot()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Jam</label>
                        <input type="text" x-model="editTimeSlotData.time_slot" required placeholder="Contoh: 08.00-10.00" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Warna Jam (kolom E)</label>
                        <div class="flex items-center gap-2">
                            <input type="color" x-model="editTimeSlotData.time_bg_color" class="h-10 w-10 border rounded p-0">
                            <input type="text" x-model="editTimeSlotData.time_bg_color" class="border rounded px-2 py-1 text-sm flex-1" placeholder="#RRGGBB">
                        </div>
                    </div>
                </div>
                <div class="flex gap-2 mt-6">
                    <button type="button" @click="showEditTimeSlotModal = false" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition">Batal</button>
                    <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition">Update</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Add Time Slot -->
    <div id="addTimeSlotModal" x-show="showAddTimeSlotModal" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="showAddTimeSlotModal = false">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h3 class="text-xl font-semibold mb-4">Tambah Jam</h3>
            <form @submit.prevent="saveAddTimeSlot()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Jam</label>
                        <input type="text" x-model="addTimeSlotData.time_slot" required placeholder="Contoh: 17.00-19.00" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                </div>
                <div class="flex gap-2 mt-6">
                    <button type="button" @click="showAddTimeSlotModal = false" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition">Batal</button>
                    <button type="submit" class="flex-1 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition">Tambah</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Edit Therapist -->
    <div id="editTherapistModal" x-show="showEditTherapistModal" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="showEditTherapistModal = false">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h3 class="text-xl font-semibold mb-4">Edit Therapist</h3>
            <form @submit.prevent="updateTherapist()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nama Therapist</label>
                        <input type="text" x-model="editTherapistData.name" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Domisili</label>
                        <input type="text" x-model="editTherapistData.domicile" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Transportasi</label>
                        <input type="text" x-model="editTherapistData.transportation" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Warna Info (kolom A–D)</label>
                        <div class="flex items-center gap-2">
                            <input type="color" x-model="editTherapistData.info_bg_color" class="h-10 w-10 border rounded p-0">
                            <input type="text" x-model="editTherapistData.info_bg_color" class="border rounded px-2 py-1 text-sm flex-1" placeholder="#RRGGBB">
                        </div>
                    </div>
                </div>
                <div class="flex gap-2 mt-6">
                    <button type="button" @click="showEditTherapistModal = false" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition">Batal</button>
                    <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition">Update</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Edit Cell -->
    <div id="editCellModal" x-show="showEditCellModal" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="showEditCellModal = false">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h3 class="text-xl font-semibold mb-4">Edit Jadwal</h3>
            <form @submit.prevent="updateCell()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Isi Jadwal</label>
                        <textarea x-model="editCellData.content" rows="4" class="w-full border border-gray-300 rounded-lg px-3 py-2" placeholder="Contoh: baby 6959, REQ LIBUR, unpaid, dll"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Warna Background</label>
                        <div class="grid grid-cols-6 gap-2">
                            <!-- Basic -->
                            <button type="button" @click="editCellData.bg_color = '#ffffff'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#ffffff' ? 'border-indigo-600' : 'border-gray-300'" style="background: #ffffff;"></button>
                            <button type="button" @click="editCellData.bg_color = '#d1d5db'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#d1d5db' ? 'border-indigo-600' : 'border-gray-300'" style="background: #d1d5db;"></button>
                            <button type="button" @click="editCellData.bg_color = '#e5e7eb'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#e5e7eb' ? 'border-indigo-600' : 'border-gray-300'" style="background: #e5e7eb;"></button>

                            <!-- Reds -->
                            <button type="button" @click="editCellData.bg_color = '#fecaca'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#fecaca' ? 'border-indigo-600' : 'border-gray-300'" style="background: #fecaca;"></button>
                            <button type="button" @click="editCellData.bg_color = '#fca5a5'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#fca5a5' ? 'border-indigo-600' : 'border-gray-300'" style="background: #fca5a5;"></button>
                            <button type="button" @click="editCellData.bg_color = '#f87171'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#f87171' ? 'border-indigo-600' : 'border-gray-300'" style="background: #f87171;"></button>

                            <!-- Oranges -->
                            <button type="button" @click="editCellData.bg_color = '#fed7aa'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#fed7aa' ? 'border-indigo-600' : 'border-gray-300'" style="background: #fed7aa;"></button>
                            <button type="button" @click="editCellData.bg_color = '#fdba74'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#fdba74' ? 'border-indigo-600' : 'border-gray-300'" style="background: #fdba74;"></button>

                            <!-- Yellows -->
                            <button type="button" @click="editCellData.bg_color = '#fef08a'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#fef08a' ? 'border-indigo-600' : 'border-gray-300'" style="background: #fef08a;"></button>
                            <button type="button" @click="editCellData.bg_color = '#fde68a'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#fde68a' ? 'border-indigo-600' : 'border-gray-300'" style="background: #fde68a;"></button>

                            <!-- Greens -->
                            <button type="button" @click="editCellData.bg_color = '#bbf7d0'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#bbf7d0' ? 'border-indigo-600' : 'border-gray-300'" style="background: #bbf7d0;"></button>
                            <button type="button" @click="editCellData.bg_color = '#86efac'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#86efac' ? 'border-indigo-600' : 'border-gray-300'" style="background: #86efac;"></button>
                            <button type="button" @click="editCellData.bg_color = '#4ade80'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#4ade80' ? 'border-indigo-600' : 'border-gray-300'" style="background: #4ade80;"></button>

                            <!-- Blues -->
                            <button type="button" @click="editCellData.bg_color = '#bfdbfe'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#bfdbfe' ? 'border-indigo-600' : 'border-gray-300'" style="background: #bfdbfe;"></button>
                            <button type="button" @click="editCellData.bg_color = '#93c5fd'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#93c5fd' ? 'border-indigo-600' : 'border-gray-300'" style="background: #93c5fd;"></button>
                            <button type="button" @click="editCellData.bg_color = '#60a5fa'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#60a5fa' ? 'border-indigo-600' : 'border-gray-300'" style="background: #60a5fa;"></button>

                            <!-- Purples -->
                            <button type="button" @click="editCellData.bg_color = '#e9d5ff'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#e9d5ff' ? 'border-indigo-600' : 'border-gray-300'" style="background: #e9d5ff;"></button>
                            <button type="button" @click="editCellData.bg_color = '#d8b4fe'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#d8b4fe' ? 'border-indigo-600' : 'border-gray-300'" style="background: #d8b4fe;"></button>
                            <button type="button" @click="editCellData.bg_color = '#c4b5fd'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#c4b5fd' ? 'border-indigo-600' : 'border-gray-300'" style="background: #c4b5fd;"></button>

                            <!-- Pinks / Cyan / Teal -->
                            <button type="button" @click="editCellData.bg_color = '#fbcfe8'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#fbcfe8' ? 'border-indigo-600' : 'border-gray-300'" style="background: #fbcfe8;"></button>
                            <button type="button" @click="editCellData.bg_color = '#a7f3d0'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#a7f3d0' ? 'border-indigo-600' : 'border-gray-300'" style="background: #a7f3d0;"></button>
                            <button type="button" @click="editCellData.bg_color = '#a5f3fc'" class="h-10 rounded border-2" :class="editCellData.bg_color === '#a5f3fc' ? 'border-indigo-600' : 'border-gray-300'" style="background: #a5f3fc;"></button>
                        </div>
                        <div class="mt-3 flex items-center gap-2">
                            <input type="color" x-model="editCellData.bg_color" class="h-10 w-10 border rounded p-0">
                            <input type="text" x-model="editCellData.bg_color" class="border rounded px-2 py-1 text-sm flex-1" placeholder="#RRGGBB">
                        </div>
                    </div>
                </div>
                <div class="flex gap-2 mt-6">
                    <button type="button" @click="showEditCellModal = false" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition">Batal</button>
                    <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Detail Memo (Large) -->
    <div id="memoDetailModal" x-show="showMemoDetailModal" x-cloak class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex items-center justify-center z-[60]" @click.self="showMemoDetailModal = false">
        <div class="bg-white dark:bg-gray-900 rounded-2xl w-full max-w-3xl md:max-w-4xl shadow-2xl overflow-hidden">
            <div class="px-4 sm:px-6 py-3 sm:py-4 bg-gradient-to-r from-pink-600 to-rose-600 text-white">
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2 sm:gap-3">
                        <h3 class="text-lg sm:text-xl font-semibold">Detail Catatan</h3>
                        <span class="hidden sm:inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-white/20 text-white" x-text="memoDetailData.date"></span>
                    </div>
                    <button type="button" @click="showMemoDetailModal = false" class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-white/20 hover:bg-white/30">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
            </div>
            <div class="p-4 sm:p-6 max-h-[70vh] overflow-y-auto">
                <div class="sm:hidden mb-2 text-xs text-gray-500"><span x-text="memoDetailData.date"></span></div>
                <div class="whitespace-pre-wrap text-gray-800 dark:text-gray-100 text-[15px] leading-relaxed" x-text="memoDetailData.content"></div>
                <div class="mt-6 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-x-3 gap-y-1">
                    <span class="inline-flex items-center gap-1"><i class="fa-regular fa-user"></i> <span x-text="memoDetailData.creator"></span></span>
                    <span>•</span>
                    <span class="inline-flex items-center gap-1"><i class="fa-regular fa-calendar"></i> <span x-text="memoDetailData.created_at"></span></span>
                    <template x-if="memoDetailData.updated_at && memoDetailData.updated_at !== memoDetailData.created_at">
                        <span class="inline-flex items-center gap-1"><i class="fa-regular fa-pen-to-square"></i> <span x-text="'diedit ' + memoDetailData.updated_at + (memoDetailData.updater ? (' oleh ' + memoDetailData.updater) : '')"></span></span>
                    </template>
                </div>
            </div>
                    </div>
    </div>

    <!-- Modal Tambah Memo -->
    <div id="addMemoModal" x-show="showAddMemoModal" x-cloak class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex items-center justify-center z-50" @click.self="showAddMemoModal = false">
        <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 w-full max-w-3xl md:max-w-4xl shadow-2xl">
            <h3 class="text-2xl font-semibold mb-4 text-pink-700 dark:text-pink-300">Tambah Catatan</h3>
            <form @submit.prevent="addMemo()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal</label>
                        <input type="date" x-model="newMemo.date" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
                        <textarea x-model="newMemo.content" rows="8" required class="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-pink-500" placeholder="Tulis catatan... contoh:\n- halo hai\n- nama saya yana\nGunakan Enter untuk pindah baris."></textarea>
                        <p class="mt-1 text-[11px] text-gray-500">Gunakan Enter untuk berpindah baris. Baris baru akan tampil di bawahnya.</p>
                    </div>
                </div>
                <div class="flex gap-2 mt-6">
                    <button type="button" @click="showAddMemoModal = false" class="flex-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 px-4 py-2 rounded-lg transition">Batal</button>
                    <button type="submit" class="flex-1 bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-lg transition">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Edit Memo -->
    <div id="editMemoModal" x-show="showEditMemoModal" x-cloak class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex items-center justify-center z-50" @click.self="showEditMemoModal = false">
        <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 w-full max-w-3xl md:max-w-4xl shadow-2xl">
            <h3 class="text-2xl font-semibold mb-4 text-pink-700 dark:text-pink-300">Edit Catatan</h3>
            <form @submit.prevent="updateMemo()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
                        <textarea x-model="editMemoData.content" rows="8" required class="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-pink-500" placeholder="Tulis catatan... contoh:\n- halo hai\n- nama saya yana\nGunakan Enter untuk pindah baris."></textarea>
                        <p class="mt-1 text-[11px] text-gray-500">Gunakan Enter untuk berpindah baris. Baris baru akan tampil di bawahnya.</p>
                    </div>
                </div>
                <div class="flex gap-2 mt-6">
                    <button type="button" @click="showEditMemoModal = false" class="flex-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 px-4 py-2 rounded-lg transition">Batal</button>
                    <button type="submit" class="flex-1 bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-lg transition">Update</button>
                </div>
            </form>
        </div>
    </div>

    </div>
@endsection

@push('scripts')
<script>
function notesApp() {
    return {
        currentMonth: {{ $month }},
        currentYear: {{ $year }},
        search: @js(request('search', '')),
        filterDomicile: @js(request('domicile', '')),
        filterTransportation: @js(request('transportation', '')),
        showAddTherapistModal: false,
        showEditTherapistModal: false,
        showEditCellModal: false,
        showAddMemoModal: false,
        showEditMemoModal: false,
        showMemoDetailModal: false,
        showExportModal: false,
        showEditTimeSlotModal: false,
        showAddTimeSlotModal: false,
        newTherapist: { name: '', domicile: '', transportation: '' },
        editTherapistData: { id: null, name: '', domicile: '', transportation: '', info_bg_color: '#ffffff' },
        editTimeSlotData: { id: null, time_slot: '', time_bg_color: '#ffffff' },
        addTimeSlotData: { order_no: null, name: '', domicile: '', transportation: '', time_slot: '' },
        editCellData: { therapist_note_id: null, schedule_date: '', content: '', bg_color: '#ffffff' },
        newMemo: { date: '', content: '' },
        editMemoData: { id: null, content: '' },
        memoDetailData: { id: null, date: '', content: '' },

        init() {
            const today = new Date();
            this.newMemo.date = today.toISOString().split('T')[0];
            this.$nextTick(() => {
                this.computeStickyOffsets();
                window.addEventListener('resize', () => this.computeStickyOffsets());
            });
        },

        previousMonth() {
            if (this.currentMonth === 1) {
                this.currentMonth = 12;
                this.currentYear--;
            } else {
                this.currentMonth--;
            }
            this.changeMonth();
        },

        nextMonth() {
            if (this.currentMonth === 12) {
                this.currentMonth = 1;
                this.currentYear++;
            } else {
                this.currentMonth++;
            }
            this.changeMonth();
        },

        goToToday() {
            const today = new Date();
            this.currentMonth = today.getMonth() + 1;
            this.currentYear = today.getFullYear();
            this.changeMonth();
        },

        computeStickyOffsets() {
            try {
                const table = document.querySelector('.notes-table');
                if (!table) return;
                const headRow = table.querySelector('thead tr');
                if (!headRow) return;

                const no = headRow.querySelector('th[data-col="no"]');
                const terapis = headRow.querySelector('th[data-col="terapis"]');
                const domisili = headRow.querySelector('th[data-col="domisili"]');
                const transportasi = headRow.querySelector('th[data-col="transportasi"]');
                const jam = headRow.querySelector('th[data-col="jam"]');

                const wNo = no ? no.offsetWidth : 40;
                const wTerapis = terapis ? terapis.offsetWidth : 100;
                const wDomisili = domisili ? domisili.offsetWidth : 80;
                const wTransportasi = transportasi ? transportasi.offsetWidth : 100;
                const wJam = jam ? jam.offsetWidth : 90;

                document.documentElement.style.setProperty('--w-no', wNo + 'px');
                document.documentElement.style.setProperty('--w-terapis', wTerapis + 'px');
                document.documentElement.style.setProperty('--w-domisili', wDomisili + 'px');
                document.documentElement.style.setProperty('--w-transportasi', wTransportasi + 'px');
                document.documentElement.style.setProperty('--w-jam', wJam + 'px');

                document.documentElement.style.setProperty('--left-terapis', wNo + 'px');
                document.documentElement.style.setProperty('--left-domisili', (wNo + wTerapis) + 'px');
                document.documentElement.style.setProperty('--left-transportasi', (wNo + wTerapis + wDomisili) + 'px');
                document.documentElement.style.setProperty('--left-jam', (wNo + wTerapis + wDomisili + wTransportasi) + 'px');

                // Desktop lebar: coba tampilkan 10 hari + AKSI jika muat; selain itu gunakan lebar penuh
                const scroller = document.querySelector('.table-scroll');
                if (scroller) {
                    const aksi = headRow.querySelector('th[data-col="aksi"]');
                    const wAksi = aksi ? aksi.offsetWidth : 80;
                    const rootStyles = getComputedStyle(document.documentElement);
                    const dayWidthRaw = rootStyles.getPropertyValue('--w-day') || '120px';
                    const dayWidth = parseFloat(dayWidthRaw);

                    const visibleDaysDesktop = 10;
                    const computedWidth = wNo + wTerapis + wDomisili + wTransportasi + wJam + wAksi + (visibleDaysDesktop * dayWidth);
                    const parentW = scroller.parentElement ? scroller.parentElement.clientWidth : window.innerWidth;

                    if (window.matchMedia('(min-width: 1280px)').matches && computedWidth <= parentW) {
                        scroller.style.maxWidth = computedWidth + 'px';
                    } else {
                        scroller.style.maxWidth = '100%';
                    }

                    // Mobile: kunci lebar canvas hanya sampai kolom NO|TERAPIS|DOMISILI|TRANSPORTASI.
                    // Kolom JAM & tanggal bisa digeser horizontal di dalam canvas tanpa melebarkan halaman.
                    if (window.matchMedia('(max-width: 768px)').matches) {
                        const wCanvas = wNo + wTerapis + wDomisili + wTransportasi;
                        scroller.style.width = wCanvas + 'px';
                        scroller.style.overflowX = 'auto';
                    } else {
                        scroller.style.width = '';
                    }
                }
            } catch (e) {
                // no-op
            }
        },

        changeMonth() {
            window.location.href = `{{ route('notes.index') }}?month=${this.currentMonth}&year=${this.currentYear}`;
        },

        applyFilters() {
            const params = new URLSearchParams();
            params.append('month', this.currentMonth);
            params.append('year', this.currentYear);
            if (this.search) params.append('search', this.search);
            if (this.filterDomicile) params.append('domicile', this.filterDomicile);
            if (this.filterTransportation) params.append('transportation', this.filterTransportation);
            window.location.href = `{{ route('notes.index') }}?${params.toString()}`;
        },

        async addTherapist() {
            try {
                const response = await fetch('{{ route('notes.therapist.store') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(this.newTherapist)
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        editTherapist(id, name, domicile, transportation, infoBgColor) {
            this.editTherapistData = { id, name, domicile, transportation, info_bg_color: infoBgColor || '#ffffff' };
            this.showEditTherapistModal = true;
        },

        async updateTherapist() {
            try {
                const response = await fetch(`/notes/therapist/${this.editTherapistData.id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(this.editTherapistData)
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        async deleteTherapist(orderNo, name) {
            if (!confirm(`Hapus therapist ${name}?`)) return;
            try {
                const response = await fetch(`/notes/therapist/${orderNo}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        editTimeSlot(id, timeSlot, timeBgColor) {
            this.editTimeSlotData = { id, time_slot: timeSlot, time_bg_color: timeBgColor || '#ffffff' };
            this.showEditTimeSlotModal = true;
        },

        async updateTimeSlot() {
            try {
                const response = await fetch(`/notes/timeslot/${this.editTimeSlotData.id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ time_slot: this.editTimeSlotData.time_slot, time_bg_color: this.editTimeSlotData.time_bg_color })
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || 'Terjadi kesalahan');
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        async deleteTimeSlot(id) {
            if (!confirm('Hapus jam ini?')) return;
            try {
                const response = await fetch(`/notes/timeslot/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || 'Terjadi kesalahan');
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        addTimeSlot(orderNo, name, domicile, transportation) {
            this.addTimeSlotData = { order_no: orderNo, name, domicile, transportation, time_slot: '' };
            this.showAddTimeSlotModal = true;
        },

        async saveAddTimeSlot() {
            try {
                const response = await fetch('{{ route('notes.timeslot.store') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(this.addTimeSlotData)
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || 'Terjadi kesalahan');
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        editCell(therapistNoteId, scheduleDate, content, bgColor) {
            this.editCellData = { 
                therapist_note_id: therapistNoteId, 
                schedule_date: scheduleDate, 
                content: content, 
                bg_color: bgColor 
            };
            this.showEditCellModal = true;
        },

        async updateCell() {
            try {
                const response = await fetch('{{ route('notes.schedule-entry.update') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(this.editCellData)
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        async addMemo() {
            try {
                const response = await fetch('{{ route('notes.memo.store') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ memo_date: this.newMemo.date, content: this.newMemo.content })
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        openMemoDetail(payload) { this.memoDetailData = payload; this.showMemoDetailModal = true; },

        editMemo(id, content) {
            this.editMemoData = { id, content };
            this.showEditMemoModal = true;
        },

        async updateMemo() {
            try {
                const response = await fetch(`/notes/memo/${this.editMemoData.id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ content: this.editMemoData.content })
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        },

        async deleteMemo(id) {
            if (!confirm('Hapus catatan ini?')) return;
            try {
                const response = await fetch(`/notes/memo/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });
                const data = await response.json();
                if (data.success) {
                    location.reload();
                }
            } catch (error) {
                alert('Terjadi kesalahan');
            }
        }
    }
}
</script>
@endpush