@extends('layouts.mother')

@section('title', 'Clinic Change Request')

@section('content')
<div class="py-8">
    <!-- Page Header -->
    <div class="modern-card p-8 mb-6">
        <div class="text-center">
            <div class="accent-bg-light rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-hospital accent-text text-3xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Clinic Change Request</h1>
            <p class="text-gray-600 text-lg">Request to transfer to a different clinic during your pregnancy</p>
        </div>
    </div>

    <div class="modern-card p-6">
        <!-- Flash Messages -->
        @if (session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
            </div>
        @endif

        <!-- Current Clinic Info -->
        <div class="accent-bg-light rounded-xl p-6 mb-6 border border-gray-100">
            <h2 class="text-lg font-semibold text-gray-900 mb-3">
                <i class="fas fa-map-marker-alt accent-text mr-2"></i>
                Your Current Clinic
            </h2>
            <div class="flex items-center">
                <div class="flex-1">
                    <h3 class="font-medium text-gray-800">{{ $currentClinic->name }}</h3>
                    <p class="text-gray-600">{{ $currentClinic->address }}</p>
                </div>
                <div class="text-right">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium accent-bg-light accent-text border border-gray-200">
                        <i class="fas fa-check-circle mr-1"></i>
                        Current Clinic
                    </span>
                </div>
            </div>
        </div>

        <!-- Request Form -->
        @if (!$pendingRequest)
            <div class="bg-gray-50 rounded-lg p-6 mb-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold text-gray-900">
                        <i class="fas fa-edit text-gray-600 mr-2"></i>
                        Submit Clinic Change Request
                    </h2>
                </div>

                <form action="{{ route('mother.clinic-change-request.store') }}" method="POST" enctype="multipart/form-data" id="changeRequestForm" class="space-y-4">
                    @csrf
                    
                    <!-- Clinic Selection -->
                    <div>
                        <label for="requested_clinic_id" class="block text-sm font-medium text-gray-700 mb-2">
                            Select New Clinic <span class="text-red-500">*</span>
                        </label>
                        <select name="requested_clinic_id"
                                id="requested_clinic_id"
                                required
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">Choose a clinic</option>
                            @foreach($availableClinics as $clinic)
                                <option value="{{ $clinic->id }}" {{ old('requested_clinic_id') == $clinic->id ? 'selected' : '' }}>
                                    {{ $clinic->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('requested_clinic_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Reason -->
                    <div>
                        <label for="reason" class="block text-sm font-medium text-gray-700 mb-2">
                            Reason for Change <span class="text-red-500">*</span>
                        </label>
                        <textarea name="reason"
                                  id="reason"
                                  rows="4"
                                  required
                                  minlength="10"
                                  maxlength="500"
                                  placeholder="Please explain why you need to change clinics (e.g., moved to a new area, closer to home, etc.)"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">{{ old('reason') }}</textarea>
                        @error('reason')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-sm text-gray-500">
                            Minimum 10 characters, maximum 500 characters
                        </p>
                    </div>

                    <!-- Supporting Documents -->
                    <div>
                        <label for="supporting_documents" class="block text-sm font-medium text-gray-700 mb-2">
                            Supporting Documents <span class="text-gray-500">(Optional)</span>
                        </label>
                        <input type="file"
                               name="supporting_documents"
                               id="supporting_documents"
                               accept=".pdf,.jpg,.jpeg,.png"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        @error('supporting_documents')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-xs text-gray-500">
                            <i class="fas fa-info-circle mr-1"></i>
                            Upload proof of address, relocation letter, or other relevant documents (PDF, JPG, JPEG, or PNG, max 2MB)
                        </p>
                        <div id="filePreview" class="mt-2 hidden p-2 bg-green-50 border border-green-200 rounded-lg">
                            <i class="fas fa-file text-green-600 mr-2"></i>
                            <span id="fileName" class="text-sm text-green-700 font-medium"></span>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex justify-end space-x-3">
                        <a href="{{ route('dashboard.mother') }}"
                           class="px-6 py-3 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 font-medium">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                        <button type="submit"
                                id="submitBtn"
                                class="modern-button inline-flex items-center">
                            <i class="fas fa-paper-plane mr-2"></i>Submit Request
                        </button>
                    </div>
                </form>
            </div>
        @else
            <!-- Pending Request Notice -->
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-6">
                <div class="flex items-start">
                    <i class="fas fa-clock text-yellow-600 mt-1 mr-3"></i>
                    <div class="flex-1">
                        <h3 class="font-medium text-yellow-800 mb-2">
                            @if($pendingRequest->status === 'INFO_REQUESTED')
                                Additional Information Requested
                            @else
                                Request Under Review
                            @endif
                        </h3>
                        <p class="text-yellow-700 mb-3">
                            @if($pendingRequest->status === 'INFO_REQUESTED')
                                The Clinic Admin has requested additional information for your clinic change request.
                            @else
                                You have an active clinic change request under review.
                            @endif
                        </p>
                        <div class="bg-white rounded-md p-3">
                            <p class="text-sm text-gray-600 mb-1">
                                <strong>Requested Clinic:</strong> {{ $pendingRequest->requestedClinic->name }}
                            </p>
                            <p class="text-sm text-gray-600 mb-1">
                                <strong>Submitted:</strong> {{ $pendingRequest->created_at->format('M d, Y \a\t g:i A') }}
                            </p>
                            <p class="text-sm text-gray-600">
                                <strong>Reason:</strong> {{ Str::limit($pendingRequest->reason, 100) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Request History -->
        @if($requests->count() > 0)
            <div class="mt-8">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-history text-gray-600 mr-2"></i>
                    Request History
                </h2>

                <div class="space-y-4">
                    @foreach($requests as $request)
                        <div class="bg-gray-50 rounded-lg p-4 border-l-4 {{ $request->isApproved() ? 'border-green-500' : ($request->isRejected() ? 'border-red-500' : 'border-yellow-500') }}">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <h3 class="font-medium text-gray-900 mr-3">
                                            {{ $request->currentClinic->name }} → {{ $request->requestedClinic->name }}
                                        </h3>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $request->status_color }}">
                                            {{ $request->status }}
                                        </span>
                                    </div>

                                    <p class="text-sm text-gray-600 mb-2">
                                        <strong>Reason:</strong> {{ $request->reason }}
                                    </p>

                                    <div class="flex items-center text-xs text-gray-500 space-x-4">
                                        <span>
                                            <i class="fas fa-calendar mr-1"></i>
                                            Submitted: {{ $request->created_at->format('M d, Y') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
// File preview
document.getElementById('supporting_documents').addEventListener('change', function(e) {
    const filePreview = document.getElementById('filePreview');
    const fileName = document.getElementById('fileName');
    
    if (e.target.files.length > 0) {
        fileName.textContent = e.target.files[0].name;
        filePreview.classList.remove('hidden');
    } else {
        filePreview.classList.add('hidden');
    }
});

// Form submission
document.getElementById('changeRequestForm').addEventListener('submit', function(e) {
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Submitting...';
});
</script>
@endpush
@endsection