@extends('layouts.admin-apoteker')

@section('title', 'Tambah Konseling')

@section('content')
<div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded shadow p-6 space-y-6">
    <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-300">📝 Form Tambah Konseling</h1>

    <form action="{{ route('web.apotek2.konseling.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
        @csrf


        {{-- Pilih Pasien --}}
        <div>
            <label for="user_id" class="block font-medium text-gray-900 dark:text-white">Pilih Pasien</label>
            <select name="user_id" id="user_id" required class="select2 w-full rounded border-blue-600 dark:bg-gray-700 text-black">
                <option value="">-- Pilih Pasien --</option>
                @foreach($users as $user)
    <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
        {{ $user->name }} ({{ $user->ktp ?? 'KTP tidak tersedia' }})
    </option>
@endforeach
            </select>
            @error('user_id') <p class="text-sm text-red-500">{{ $message }}</p> @enderror
        </div>

        {{-- Tanggal Konseling --}}
        <div>
            <label for="tanggal_konseling" class="block font-medium text-gray-900 dark:text-white">Tanggal Konseling</label>
            <input type="date" name="tanggal_konseling" id="tanggal_konseling" value="{{ old('tanggal_konseling') }}" required class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white">
            @error('tanggal_konseling') <p class="text-sm text-red-500">{{ $message }}</p> @enderror
        </div>

        {{-- Input Teks Dinamis --}}
        @foreach(['nama_dokter' => 'Nama Dokter', 'diagnosa' => 'Diagnosa', 'nama_obat' => 'Nama Obat', 'riwayat_alergi' => 'Riwayat Alergi', 'keluhan' => 'Keluhan', 'tindak_lanjut' => 'Tindak Lanjut'] as $field => $label)
        <div>
            <label for="{{ $field }}" class="block font-medium text-gray-900 dark:text-white">{{ $label }}</label>
            <textarea name="{{ $field }}" class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white">{{ old($field) }}</textarea>
        </div>
        @endforeach

        {{-- Radio Konseling Sebelumnya --}}
        <div>
            <label class="block font-medium text-gray-900 dark:text-white">Pernah Konseling Sebelumnya?</label>
            <div class="space-x-4">
                <label><input type="radio" name="pernah_konseling_sebelumnya" value="1" {{ old('pernah_konseling_sebelumnya') == '1' ? 'checked' : '' }}> Ya</label>
                <label><input type="radio" name="pernah_konseling_sebelumnya" value="0" {{ old('pernah_konseling_sebelumnya', '0') == '0' ? 'checked' : '' }}> Tidak</label>
            </div>
        </div>

        {{-- Upload Rekaman --}}
        <div>
            <label class="block font-medium text-gray-900 dark:text-white">Upload Rekaman Konseling</label>
            <input type="file" name="rekaman_konseling" id="rekaman_konseling" accept="audio/*,video/*" class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white" onchange="previewMedia(event)">
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">📁 Maksimal ukuran file: 20MB. Format: mp3, wav, ogg, mp4, webm</p>
            <div id="preview-container" class="mt-2"></div>
            @error('rekaman_konseling') <p class="text-sm text-red-500">{{ $message }}</p> @enderror
        </div>

        {{-- Tombol --}}
        <div class="flex gap-2">
            <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Simpan</button>
            <a href="{{ route('web.apotek2.konseling.index') }}" class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">Batal</a>
        </div>
    </form>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        $('#user_id').select2({
            placeholder: 'Cari nama pasien...',
            allowClear: true,
            width: '100%'
        });
    });

    function previewMedia(event) {
        const file = event.target.files[0];
        const container = document.getElementById('preview-container');
        container.innerHTML = '';

        if (file) {
            const url = URL.createObjectURL(file);
            const isVideo = file.type.startsWith('video/');
            const media = document.createElement(isVideo ? 'video' : 'audio');
            media.src = url;
            media.controls = true;
            media.className = 'w-full mt-2 rounded';
            container.appendChild(media);
        }
    }
</script>
@endpush