@extends('layouts.nurse')

@section('title', 'Create Health Record')

@section('content')
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="bg-white rounded-xl shadow-lg p-8 mb-8 border border-gray-100">
        <div class="flex items-center">
            <div class="bg-red-100 rounded-full w-16 h-16 flex items-center justify-center mr-4">
                <i class="fas fa-file-medical text-red-600 text-2xl"></i>
            </div>
            <div>
                <h1 class="text-3xl font-bold text-gray-900 mb-1">Create Health Record</h1>
                <p class="text-gray-600 text-lg">Record maternal health information for today's visit</p>
            </div>
        </div>
    </div>

    <!-- Patient Information (if from appointment) -->
    @if($appointment)
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
            <h3 class="text-lg font-semibold text-blue-900 mb-4">
                <i class="fas fa-user-circle mr-2"></i>Patient Information
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <p class="text-sm text-blue-700 font-medium">Patient Name</p>
                    <p class="text-blue-900 font-semibold">{{ $appointment->mother->expectantMother->mother_full_name ?? $appointment->mother->name }}</p>
                </div>
                <div>
                    <p class="text-sm text-blue-700 font-medium">IC Number</p>
                    <p class="text-blue-900 font-semibold">{{ $appointment->mother->expectantMother->ic_number ?? 'N/A' }}</p>
                </div>
                <div>
                    <p class="text-sm text-blue-700 font-medium">Appointment Time</p>
                    <p class="text-blue-900 font-semibold">{{ $appointment->slot_label }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- Form -->
    <div class="bg-white rounded-lg shadow-md p-8">
        <form action="{{ route('nurse.health-records.store') }}" method="POST">
            @csrf

            @if($appointment)
                <input type="hidden" name="mother_user_id" value="{{ $appointment->mother_id }}">
                <input type="hidden" name="clinic_appointment_id" value="{{ $appointment->id }}">
            @endif

            <!-- Visit Information -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">
                    <i class="fas fa-calendar-day mr-2 text-red-600"></i>Visit Information
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Visit Date -->
                    <div>
                        <label for="visit_date" class="block text-sm font-medium text-gray-700 mb-2">
                            Visit Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date"
                               id="visit_date"
                               name="visit_date"
                               value="{{ old('visit_date', now()->toDateString()) }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
                               required>
                        @error('visit_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Gestational Week -->
                    <div>
                        <label for="gestational_week" class="block text-sm font-medium text-gray-700 mb-2">
                            Gestational Week
                        </label>
                        <input type="number"
                               id="gestational_week"
                               name="gestational_week"
                               value="{{ old('gestational_week') }}"
                               min="1"
                               max="42"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
                               placeholder="e.g., 20">
                        @error('gestational_week')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- General Notes -->
                <div class="mt-6">
                    <label for="general_notes" class="block text-sm font-medium text-gray-700 mb-2">
                        General Notes
                    </label>
                    <textarea id="general_notes"
                              name="general_notes"
                              rows="3"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
                              placeholder="Any general observations or notes about this visit...">{{ old('general_notes') }}</textarea>
                    @error('general_notes')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Test Selection -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">
                    <i class="fas fa-vial mr-2 text-red-600"></i>Select Tests to Perform
                </h3>
                <p class="text-sm text-gray-600 mb-4">
                    Select the tests you want to perform during this visit. You can add more tests later.
                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @foreach($availableTests as $testType => $testName)
                        <label class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition">
                            <input type="checkbox"
                                   name="selected_tests[]"
                                   value="{{ $testType }}"
                                   class="mt-1 h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
                                   {{ in_array($testType, old('selected_tests', [])) ? 'checked' : '' }}>
                            <span class="ml-3 text-sm font-medium text-gray-900">{{ $testName }}</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-between items-center pt-6 border-t">
                <a href="{{ route('nurse.health-records.index') }}"
                   class="px-6 py-3 bg-gray-500 text-white rounded-lg font-semibold hover:bg-gray-600 transition">
                    <i class="fas fa-arrow-left mr-2"></i>Cancel
                </a>

                <button type="submit"
                        class="px-6 py-3 text-white rounded-lg font-semibold transition-all hover:scale-105 shadow-md"
                        style="background: linear-gradient(135deg, #F14C8F 0%, #C43670 100%);">
                    <i class="fas fa-save mr-2"></i>Create Record
                </button>
            </div>
        </form>
    </div>

    <!-- Help Text -->
    <div class="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-yellow-600"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800">Quick Tips</h3>
                <div class="mt-2 text-sm text-yellow-700">
                    <ul class="list-disc list-inside space-y-1">
                        <li>Select the tests you plan to perform during this visit</li>
                        <li>You can add more tests later from the edit page</li>
                        <li>The record will be saved as "Draft" until you mark it as completed</li>
                        <li>All selected tests must be filled before marking as completed</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection