@push('styles')
<style>
    .btn-primary {
        background: linear-gradient(135deg, #F14C8F, #F9DB7B);
        color: white;
        transition: all 0.2s;
    }
    .btn-primary:hover {
        background: linear-gradient(135deg, #E63B7A, #F8D568);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .btn-secondary {
        background: #f3f4f6;
        color: #374151;
        border: 1px solid #e5e7eb;
        transition: all 0.2s;
    }
    .btn-secondary:hover {
        background: #e5e7eb;
        transform: translateY(-1px);
    }
</style>
@endpush

<div class="min-h-screen py-8" style="background-color: #F8F9ED;">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        <i class="fas fa-hospital text-blue-600 mr-3"></i>
                        Clinic Change Requests
                    </h1>
                    <p class="text-gray-600 mt-1">Manage your clinic change requests and track their status</p>
                </div>
                @if($canCreateNew)
                    <a href="{{ route('mother.clinic-change-request.create') }}"
                       class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-plus mr-2"></i>New Request
                    </a>
                @endif
            </div>
        </div>

        <!-- Active Request Alert -->
        @if($activeRequest)
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-600 mt-1 mr-3"></i>
                    <div class="flex-1">
                        <h3 class="text-sm font-medium text-blue-900">Active Request</h3>
                        <p class="text-sm text-blue-800 mt-1">
                            You have an active clinic change request
                            @if($activeRequest->isInfoRequested())
                                that requires additional information.
                            @else
                                that is currently being reviewed.
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Request History Section -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-history text-blue-600 mr-2"></i>
                    Request History
                </h2>
            </div>

            @if($requests->isEmpty())
                <div class="text-center py-12">
                    <i class="fas fa-hospital text-gray-400 text-6xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No Clinic Change Requests</h3>
                    <p class="text-gray-600 mb-6">You haven't submitted any clinic change requests yet.</p>
                    @if($canCreateNew)
                        <a href="{{ route('mother.clinic-change-request.create') }}"
                           class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors inline-block">
                            <i class="fas fa-plus mr-2"></i>Submit Your First Request
                        </a>
                    @endif
                </div>
            @else
                <!-- Requests List -->
                <div class="divide-y divide-gray-200">
                    @foreach($requests as $request)
                        <div class="p-6 hover:bg-gray-50 transition-colors">
                            <!-- Header -->
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <h3 class="text-base font-semibold 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_display }}
                                        </span>
                                        @if($request->urgency === 'URGENT')
                                            <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                <i class="fas fa-exclamation-triangle mr-1"></i>Urgent
                                            </span>
                                        @endif
                                    </div>
                                    <p class="text-sm text-gray-600">
                                        Submitted {{ $request->created_at->format('M j, Y g:i A') }}
                                        @if(in_array($request->status, ['APPROVED', 'REJECTED']))
                                            • Processed {{ $request->updated_at->format('M j, Y g:i A') }}
                                        @endif
                                    </p>
                                </div>

                                <!-- Actions -->
                                <div class="flex items-center space-x-3">
                                    <a href="{{ route('mother.clinic-change-request.show', $request->uuid) }}"
                                       class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors text-sm">
                                        <i class="fas fa-eye mr-1"></i>View Details
                                    </a>

                                    @if($request->isInfoRequested())
                                        <a href="{{ route('mother.clinic-change-request.respond', $request->uuid) }}"
                                           class="bg-amber-600 text-white px-4 py-2 rounded-md hover:bg-amber-700 transition-colors text-sm">
                                            <i class="fas fa-reply mr-1"></i>Respond
                                        </a>
                                    @endif

                                    @if($request->canBeWithdrawn())
                                        <button wire:click="withdrawRequest('{{ $request->uuid }}')"
                                                wire:confirm="Are you sure you want to withdraw this request?"
                                                class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition-colors text-sm">
                                            <i class="fas fa-times mr-1"></i>Withdraw
                                        </button>
                                    @endif
                                </div>
                            </div>

                            <!-- Reason -->
                            <div class="mb-4">
                                <p class="text-sm text-gray-700">
                                    <span class="font-medium">Reason:</span>
                                    {{ Str::limit($request->reason, 150) }}
                                </p>
                            </div>

                            <!-- Status-specific information -->
                            @if($request->isInfoRequested())
                                <div class="bg-amber-50 rounded-lg p-4 mb-4">
                                    <div class="flex items-start">
                                        <i class="fas fa-question-circle text-amber-600 mt-1 mr-3"></i>
                                        <div>
                                            <h4 class="text-sm font-medium text-amber-900">Additional Information Requested</h4>
                                            <p class="text-sm text-amber-800 mt-1">
                                                The Clinic Admin has requested additional information. Please respond to continue processing your request.
                                            </p>
                                            <a href="{{ route('mother.clinic-change-request.respond', $request->uuid) }}"
                                               class="inline-flex items-center mt-2 text-sm font-medium text-amber-700 hover:text-amber-900">
                                                <i class="fas fa-reply mr-1"></i>Respond Now
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @elseif($request->isApproved())
                                <div class="bg-green-50 rounded-lg p-4 mb-4">
                                    <div class="flex items-start">
                                        <i class="fas fa-check-circle text-green-600 mt-1 mr-3"></i>
                                        <div>
                                            <h4 class="text-sm font-medium text-green-900">Request Approved</h4>
                                            <p class="text-sm text-green-800 mt-1">
                                                Your clinic change has been approved.
                                                @if($request->decision_effective_date)
                                                    Effective date: {{ $request->decision_effective_date->format('M j, Y') }}
                                                @endif
                                            </p>
                                            @if($request->decision_note)
                                                <p class="text-sm text-green-700 mt-2 italic">
                                                    "{{ $request->decision_note }}"
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @elseif($request->isRejected())
                                <div class="bg-red-50 rounded-lg p-4 mb-4">
                                    <div class="flex items-start">
                                        <i class="fas fa-times-circle text-red-600 mt-1 mr-3"></i>
                                        <div>
                                            <h4 class="text-sm font-medium text-red-900">Request Rejected</h4>
                                            @if($request->decision_note)
                                                <p class="text-sm text-red-800 mt-1">
                                                    {{ $request->decision_note }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- Attachments -->
                            @if($request->attachments->count() > 0)
                                <div class="flex items-center text-sm text-gray-600">
                                    <i class="fas fa-paperclip mr-2"></i>
                                    <span>{{ $request->attachments->count() }} attachment(s)</span>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>