@extends('layouts.app')
@section('content')
<div class="bg-light">
    <div class="container pt-3">
        <nav class="mb-0">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
                <li class="breadcrumb-item active" aria-current="page">Compare treatment options</li>
            </ol>
        </nav>
    </div>
</div>
<div class="bg-grey py-5">
  <div class="container py-lg-4">
    <div class="row justify-content-center">
      <div class="col-lg-7 text-center">
        <h5 class="subtitle">Compare treatment options</h5>
        <p>Hemorrhoids get treated at doctors' offices with different treatment options. Snyder Hemband ligation treatment is the most effective, fast, and painless treatment compared to other treatments. It has the least complications and hemorrhoids are less likely to come back than other treatments.</p>
      </div>
    </div>
  </div>
</div>
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-7 py-lg-4 text-center">
      <h5 class="subtitle">Treatment comparisons:</h5>
    </div>
  </div>
  <div class="mt-4 col-lg-12">
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr class="bg-light text-center">
            <th></th>
            <th><h5 class="m-0 my-3">Success rate</h5></th>
            <th><h5 class="m-0 my-3">Recurrence rate</h5></th>
            <th><h5 class="m-0 my-3">Complications</h5></th>
            <th><h5 class="m-0 my-3">Pain level</h5></th>
            <th><h5 class="m-0 my-3">Treatment time</h5></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="p-0">
              <div class="bg-grey center p-4">
                <h5 class="mb-1">Snyder Hemband</h5>
                <small class="m-0">(Rubber band ligation)</small>
              </div>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
              <p class="m-0 text-white">92%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
              <p class="m-0 text-white">8%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
              <p class="m-0 text-white">Uncommon and benign</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
              <p class="m-0 text-white">Low</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
              <p class="m-0 text-white">> 1 minute</p>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-3" style="width:200px;vertical-align:middle;">
              <h5 class="mb-1">Infrared Coagulation</h5>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">68%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">6%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">Bleeding, pain</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">Low</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">Up to 3 minutes</p>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-3" style="width:200px;vertical-align:middle;">
              <h5 class="mb-1">Sclerotherapy</h5>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">90%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">30%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">Pain,Impotence,urinary retention, and abscess formation </p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">Medium</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">15-20 minutes</p>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-3" style="width:200px;vertical-align:middle;">
              <h5 class="mb-1">Stapled Hemorhoidectomy</h5>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">75-88%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">36%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">Pain, urinary retention, anal stenosis, and incontinence.</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">High</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">30-90 minutes</p>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-3" style="width:200px;vertical-align:middle;">
              <h5 class="mb-1">Hemorrhoidal <br class="d-lg-block d-none"> Artery Ligation</h5>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">74%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">24%</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">Pain, bleeding, constipation, difficulty urinating</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">High</p>
            </td>
            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
              <p class="m-0 text-muted">30-60 minutes</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="my-4 d-flex justify-content-center align-items-center">
        <div class="">
          <img src="{{asset('img/medscape.svg')}}" class="w-100" alt="">
        </div>
        <span class="mx-3">|</span>
        <span>Source: Medscape website</span>
    </div>
  </div>
</div>
@endsection