@extends('layouts.portal')

@section('title', __('appointments.appointment_details') . ' — ' . config('app.name'))
@section('page_title', $appointment->patient_name)
@section('page_subtitle', $appointment->consultation_topic)

@section('page_actions')
    <a href="{{ route('portal.appointments.index') }}" class="btn-ghost !px-5 !py-2.5 text-sm no-underline">{{ __('common.back') }}</a>
@endsection

@section('content')
    <div class="grid gap-5 lg:grid-cols-3">
        <div class="lg:col-span-2">
            <div class="card-sc">
                <h2 class="text-lg">{{ __('appointments.appointment_details') }}</h2>
                <div class="mt-4 grid gap-4 md:grid-cols-2">
                    <div>
                        <p class="field-label">{{ __('appointments.patient_name') }}</p>
                        <p class="font-semibold text-ink-900">{{ $appointment->patient_name }}</p>
                    </div>
                    <div>
                        <p class="field-label">{{ __('appointments.phone') }}</p>
                        <p class="font-semibold text-ink-900" dir="ltr">{{ $appointment->phone }}</p>
                    </div>
                    <div>
                        <p class="field-label">{{ __('appointments.gender') }}</p>
                        <p class="font-semibold text-ink-900">{{ __('common.' . $appointment->gender) }}</p>
                    </div>
                    <div>
                        <p class="field-label">{{ __('appointments.date_of_birth') }}</p>
                        <p class="font-semibold text-ink-900">{{ $appointment->date_of_birth->format('M d, Y') }} ({{ $appointment->age }})</p>
                    </div>
                    @if ($appointment->weight_kg)
                        <div>
                            <p class="field-label">{{ __('appointments.weight_kg') }}</p>
                            <p class="font-semibold text-ink-900 numeric">{{ $appointment->weight_kg }} {{ __('common.kg') }}</p>
                        </div>
                    @endif
                    @if ($appointment->height_cm)
                        <div>
                            <p class="field-label">{{ __('appointments.height_cm') }}</p>
                            <p class="font-semibold text-ink-900 numeric">{{ $appointment->height_cm }} {{ __('common.cm') }}</p>
                        </div>
                    @endif
                    @if ($appointment->address)
                        <div class="md:col-span-2">
                            <p class="field-label">{{ __('appointments.address') }}</p>
                            <p class="font-semibold text-ink-900">{{ $appointment->address }}</p>
                        </div>
                    @endif
                    <div class="md:col-span-2">
                        <p class="field-label">{{ __('appointments.consultation_topic') }}</p>
                        <p class="font-semibold text-ink-900">{{ $appointment->consultation_topic }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="card-sc text-center">
                <p class="text-3xl font-extrabold text-brand-700">{{ $appointment->appointment_date->format('M d') }}</p>
                <p class="mt-1 text-xl text-ink-600 numeric">{{ \Carbon\Carbon::parse($appointment->appointment_time)->format('h:i A') }}</p>
                <hr class="my-4 border-ink-100">

                @if (in_array($appointment->status, ['cancelled', 'completed']))
                    <div class="rounded-2xl bg-ink-50 px-4 py-3 text-sm text-ink-500">
                        {{ __('appointments.appointment_locked') }}
                    </div>
                    <div class="mt-4">
                        @php
                            $tone = $appointment->status === 'completed' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-700';
                        @endphp
                        <span class="badge-sc {{ $tone }}">{{ __('appointments.statuses.' . $appointment->status) }}</span>
                    </div>
                    @if ($appointment->status === 'cancelled' && $appointment->cancellation_reason)
                        <div class="mt-4 text-start">
                            <p class="field-label">{{ __('appointments.cancellation_reason') }}</p>
                            <p class="rounded-xl bg-ink-50 px-3 py-2 text-sm text-ink-600">{{ $appointment->cancellation_reason }}</p>
                        </div>
                    @endif
                @else
                    <form method="POST" action="{{ route('portal.appointments.update', $appointment) }}" class="space-y-4 text-start">
                        @csrf
                        @method('PATCH')
                        <div>
                            <label for="statusSelect" class="field-label">{{ __('common.status') }}</label>
                            <select name="status" id="statusSelect" required class="field-input @error('status') is-invalid @enderror">
                                @foreach (['pending', 'confirmed', 'completed', 'cancelled'] as $status)
                                    <option value="{{ $status }}" @selected($appointment->status === $status)>{{ __('appointments.statuses.' . $status) }}</option>
                                @endforeach
                            </select>
                            @error('status')<p class="field-error">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="notesField" id="notesLabel" class="field-label">{{ __('appointments.notes') }}</label>
                            <textarea name="notes" id="notesField" rows="3" class="field-input @error('notes') is-invalid @enderror"
                                      placeholder="{{ __('appointments.notes_optional') }}">{{ old('notes', $appointment->notes ?? $appointment->cancellation_reason) }}</textarea>
                            @error('notes')<p class="field-error">{{ $message }}</p>@enderror
                            <p id="notesHelp" class="mt-1 hidden text-xs text-red-600">{{ __('appointments.cancellation_reason_required') }}</p>
                        </div>

                        <button type="submit" class="btn-brand w-full">{{ __('common.save') }}</button>
                    </form>
                @endif
            </div>

            @if (!in_array($appointment->status, ['cancelled', 'completed']))
                <form method="POST" action="{{ route('portal.appointments.destroy', $appointment) }}" class="mt-4"
                      onsubmit="return confirm('{{ __('appointments.are_you_sure') }}')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn-soft w-full !text-red-600">{{ __('common.delete') }}</button>
                </form>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const statusSelect = document.getElementById('statusSelect');
    const notesField = document.getElementById('notesField');
    const notesLabel = document.getElementById('notesLabel');
    const notesHelp = document.getElementById('notesHelp');
    if (!statusSelect) return;

    const cancelLabel = @json(__('appointments.cancellation_reason'));
    const cancelPlaceholder = @json(__('appointments.cancellation_reason_required'));
    const notesLabelText = @json(__('appointments.notes'));
    const notesPlaceholder = @json(__('appointments.notes_optional'));

    function updateNotesFieldState() {
        const isCancelled = statusSelect.value === 'cancelled';
        notesLabel.textContent = isCancelled ? cancelLabel + ' *' : notesLabelText;
        notesField.placeholder = isCancelled ? cancelPlaceholder : notesPlaceholder;
        notesField.required = isCancelled;
        notesHelp.classList.toggle('hidden', !isCancelled);
        notesField.classList.toggle('border-red-400', isCancelled);
    }

    statusSelect.addEventListener('change', updateNotesFieldState);
    updateNotesFieldState();
});
</script>
@endpush