Healthcare_Medical_Modal_Component

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-70 dark:bg-gray-900 dark:bg-opacity-80">
  <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-100 opacity-100
      border-t-4 border-orange-500 dark:border-red-600
      sm:w-11/12 md:w-3/4 lg:w-2/3 xl:w-1/2
      animate-fade-in-up">

    <!-- Modal Header -->
    <div class="flex items-center justify-between p-6 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-600 dark:to-orange-700 text-white rounded-t-md">
      <h2 class="text-2xl font-bold font-sans tracking-wide">Patient Consultation Details</h2>
      <button class="text-white hover:text-gray-100 transition-colors duration-200 text-3xl leading-none">
        &times;
      </button>
    </div>

    <!-- Modal Body -->
    <div class="p-6 space-y-6 md:space-y-8">

      <!-- Patient Info Section -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center border-b border-gray-200 dark:border-gray-700 pb-6">
        <div class="md:col-span-1 flex justify-center">
          <img class="w-24 h-24 rounded-full border-4 border-orange-300 dark:border-red-500 shadow-md transform transition-transform duration-300 hover:scale-105" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Patient Avatar">
        </div>
        <div class="md:col-span-2 text-center md:text-left">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">ID: P-34567 | Age: 45 | Blood Type: O+</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Last Visit: 2023-10-26</p>
        </div>
      </div>

      <!-- Consultation Form -->
      <form class="space-y-6">
        <div>
          <label for="diagnosis" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Diagnosis</label>
          <textarea id="diagnosis" rows="4" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
              bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
              shadow-sm transition-colors duration-200 resize-y" placeholder="Enter the diagnosis details..."></textarea>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="medication" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Prescribed Medication</label>
            <input type="text" id="medication" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
                bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                shadow-sm transition-colors duration-200" placeholder="e.g., Amoxicillin 500mg">
          </div>
          <div>
            <label for="dosage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dosage & Frequency</label>
            <input type="text" id="dosage" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
                bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                shadow-sm transition-colors duration-200" placeholder="e.g., 1 tablet, 2 times a day">
          </div>
        </div>

        <div>
          <label for="follow-up" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Follow-up Date</label>
          <input type="date" id="follow-up" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
              bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100
              shadow-sm transition-colors duration-200">
        </div>

        <!-- Attachments Section -->
        <div class="mt-8">
          <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-4">Attachments</h4>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            <div class="relative group rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-200 hover:shadow-md">
              <img class="w-full h-24 object-cover" src="https://picsum.photos/id/1018/150/100" alt="Attachment 1">
              <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <span class="text-white text-xs font-semibold">X-Ray.jpg</span>
              </div>
            </div>
            <div class="relative group rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-200 hover:shadow-md">
              <img class="w-full h-24 object-cover" src="https://picsum.photos/id/1020/150/100" alt="Attachment 2">
              <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <span class="text-white text-xs font-semibold">Lab_Results.pdf</span>
              </div>
            </div>
            <div class="flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-4 min-h-[96px]
                hover:border-orange-400 dark:hover:border-red-500 transition-colors duration-200 cursor-pointer">
              <label for="file-upload" class="flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 cursor-pointer">
                <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                </svg>
                <span class="text-xs font-medium">Add File</span>
                <input id="file-upload" type="file" class="hidden">
              </label>
            </div>
          </div>
        </div>

      </form>

    </div>

    <!-- Modal Footer -->
    <div class="flex justify-end p-6 bg-gray-100 dark:bg-gray-700 rounded-b-md border-t border-gray-200 dark:border-gray-600 space-x-4">
      <button class="px-6 py-2 rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300
          hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm font-medium">
        Cancel
      </button>
      <button class="px-6 py-2 rounded-md bg-orange-500 hover:bg-orange-600 dark:bg-red-600 dark:hover:bg-red-700 text-white font-semibold transition-colors duration-200 shadow-md
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-red-600">
        Save Consultation
      </button>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out forwards;
  }
</style>