@extends('layouts.admin-apoteker')

@section('title', 'Tambah Kunjungan')
<style>
    /* Select2 container - dark mode override */
    .select2-container--default .select2-selection--single {
        background-color: #1f2937; /* Tailwind dark:bg-gray-800 */
        color: #f3f4f6; /* Tailwind text-gray-100 */
        border-color: #374151;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #f3f4f6;
    }

    .select2-container--default .select2-results__option {
        background-color: #111827; /* Tailwind dark:bg-gray-900 */
        color: #f9fafb;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #2563eb; /* Tailwind blue-600 */
        color: white;
    }

    .select2-container--default .select2-dropdown {
        background-color: #1f2937; /* Tailwind dark:bg-gray-800 */
        color: #121417;
        border-color: #4b5563;
    }
</style>

@section('content')
<div class="max-w-xl mx-auto space-y-6">
    <h1 class="text-xl font-bold text-purple-600 dark:text-purple-400">📝 Tambah Kunjungan Baru</h1>

    <form action="{{ route('home-pharmacy-care.store') }}" method="POST" class="space-y-4">
        @csrf

        {{-- Dropdown Pasien --}}
<select name="user_id" id="user_id" class="w-full select2 border rounded bg-white dark:bg-gray-800 dark:text-white" required>
    @if(old('user_id'))
        <option value="{{ old('user_id') }}" selected>Pasien terpilih</option>
    @endif
</select>



        {{-- Tanggal Kunjungan --}}
        <div>
            <label class="block mb-1 font-medium dark:text-white">Tanggal Kunjungan</label>
            <input type="date" name="tanggal_kunjungan"
                   class="w-full border rounded bg-white dark:bg-gray-800 dark:text-white"
                   required>
        </div>

        {{-- Catatan --}}
        <div>
            <label class="block mb-1 font-medium dark:text-white">Catatan</label>
            <textarea name="catatan"
                      class="rich-text w-full border rounded bg-white dark:bg-gray-800 dark:text-white"
                      rows="5"></textarea>
        </div>

        <button type="submit"
                class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded">
            Simpan
        </button>
        <a href="{{ route('home-pharmacy-care.index') }}"
   class="inline-block px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition">
   ✖️ Batal
</a>

    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
      tinymce.init({
          selector: 'textarea.rich-text',
          menubar: false,
          height: 300,
          plugins: 'lists link',
          toolbar: 'undo redo | bold italic underline | bullist numlist | link',
          content_style: 'body { font-family:Arial; font-size:14px }'
      });
  });
    $(document).ready(function () {
        $('#user_id').select2({
            placeholder: '🔍 Cari pasien berdasarkan nama...',
            allowClear: true,
            minimumInputLength: 1,
            ajax: {
                url: '{{ route("users.search.pasien") }}',
                dataType: 'json',
                delay: 300,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                }
            },
            templateResult: function (data) {
                if (!data.id) return data.text;

                return $(`
                    <div class="flex gap-3 items-center">
                        <img src="${data.foto_url}" class="w-8 h-8 rounded-full object-cover border" alt="Foto Pasien">
                        <div class="text-sm">
                            <div class="font-semibold text-gray-900 dark:text-white">${data.text}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-300">
                                ${data.gender || '-'}, ${data.umur || '-'} tahun — ${data.lokasi || '-'}
                            </div>
                        </div>
                    </div>
                `);
            },
            templateSelection: function (data) {
                return data.text || data.id;
            }
        });
    });
</script>
@endpush