<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Proposal(s)</div>
      <div class="row">
        <div class="col-12 col-md-12">
          <q-card class="my-card">
            <q-card-section>
              <div
                class="text-body1 text-grey-9 q-py-md"
              >Showing active proposal(s) recieved from tutor(s) as a result of connect request(s)</div>
            </q-card-section>
            <q-markup-table>
              <thead>
                <tr>
                  <th class="text-left text-uppercase">DATE</th>
                  <th class="text-left text-uppercase">My Request(s)</th>
                  <th class="text-right text-uppercase">STATUS</th>
                  <th class="text-right text-uppercase">Proposal(s)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-left">Mon, Jan 13, 2020</td>
                  <td class="text-left">
                    Physician/MOH UAE/General Practitioner (GP)
                    <div
                      class="text-blue-5 cursor-pointer hover float-right"
                      @click="dialog = true"
                    >Details</div>
                  </td>
                  <td class="text-right">
                    <q-badge class="q-pa-xs text-uppercase" color="secondary">completed</q-badge>
                  </td>
                  <td class="text-right">
                    <q-badge
                      clickable
                      size="md"
                      class="text-white hover cursor-pointer text-uppercase"
                      color="secondary"
                    ><a class="text-white" href="/#/course/proposal-list">2</a></q-badge>
                  </td>
                </tr>
                <tr>
                  <td class="text-left">Mon, Jan 13, 2020</td>
                  <td class="text-left">
                    Physician/MOH UAE/Surgery
                    <div
                      class="text-blue-5 cursor-pointer hover float-right"
                      @click="dialog = true"
                    >Details</div>
                  </td>
                  <td clickable class="text-right">
                    <q-badge class="q-pa-xs text-uppercase" color="secondary">completed</q-badge>
                  </td>
                  <td class="text-right">
                    <q-badge
                      clickable
                      size="md"
                      class="text-white hover cursor-pointer text-uppercase"
                      color="secondary"
                    ><a class="text-white" href="/#/course/proposal-list">12</a></q-badge>
                  </td>
                </tr>
                <tr>
                  <td class="text-left">Mon, Jan 13, 2020</td>
                  <td class="text-left">
                    Physician/MOH UAE/General Practitioner (GP)
                    <div
                      class="text-blue-5 cursor-pointer hover float-right"
                      @click="dialog = true"
                    >Details</div>
                  </td>
                  <td class="text-right">
                    <q-badge class="q-pa-xs text-uppercase" color="negative">expired</q-badge>
                  </td>
                  <td class="text-right">
                    <q-badge
                      clickable
                      size="md"
                      class="text-white hover cursor-pointer text-uppercase"
                      color="secondary"
                    ><a class="text-white" href="/#/course/proposal-list">1</a></q-badge>
                  </td>
                </tr>
              </tbody>
            </q-markup-table>
            <q-card-section>
              <div
                class="text-body1 text-grey-6 q-py-md"
              >Click at the number of proposals for more details.</div>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <q-dialog v-model="dialog">
        <q-card style="width: auto; max-width: 80vw; max-height: 100vh;">
          <q-card-section class="row items-center q-pb-none">
            <div class="text-h6 text-grey-9">Request Details</div>
            <q-space />
            <q-btn icon="close" flat round dense v-close-popup />
          </q-card-section>
          <q-card-section class="row">
            <div class="col-3 col-md-3 col-xs-6 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Tutor:</div>
              <div class="text-body1 text-grey-8 q-pb-xs">Asim Khan</div>
            </div>
            <div class="col-3 col-md-3 col-xs-6 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Start Date:</div>
              <div class="text-body1 text-grey-8 q-pb-xs">2020/02/22</div>
            </div>
            <div class="col-3 col-md-3 col-xs-6 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Expiry Date:</div>
              <div class="text-body1 text-grey-8 q-pb-xs">2020/03/01</div>
            </div>
            <div class="col-3 col-md-3 col-xs-6 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Phone Number:</div>
              <div class="text-body1 text-grey-8 q-pb-xs">(+996) 123 45678</div>
            </div>
            <div class="col-12 col-md-12 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">My Message:</div>
              <div
                class="text-body1 text-grey-8 q-pb-xs"
              >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad quod eos necessitatibus id, reprehenderit laboriosam perspiciatis?</div>
              <div
                class="text-body1 text-grey-8 q-pb-xs"
              >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad quod eos necessitatibus id, reprehenderit laboriosam perspiciatis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe reprehenderit placeat unde non numquam ad sequi ea, aperiam, sint ratione corrupti eveniet. Debitis, ullam! Ipsa vero quam in unde hic.</div>
            </div>

            <div class="col-12">
              <div class="text-h6 q-py-md">Course Content:</div>
              <q-markup-table dense>
                <tbody>
                  <tr>
                    <td>Physician/MOH UAE/General Practitioner (GP)/Internal Medicine/Respiratory</td>
                  </tr>
                  <tr>
                    <td>Physician/MOH UAE/General Practitioner (GP)/Internal Medicine/Infectious Disease</td>
                  </tr>
                  <tr>
                    <td>Physician/MOH UAE/General Practitioner (GP)/Internal Medicine/Endocrinology</td>
                  </tr>
                </tbody>
              </q-markup-table>
            </div>
            <div class="col-12">
              <div class="text-h6 q-py-md">Days &amp; Time:</div>
              <q-markup-table dense>
                <tbody>
                  <tr>
                    <td>Sunday/15:56:00 - 15:56:00</td>
                  </tr>
                  <tr>
                    <td>Sunday/15:56:00 - 15:56:00</td>
                  </tr>
                  <tr>
                    <td>Sunday/15:56:00 - 15:56:00</td>
                  </tr>
                  <tr>
                    <td>Sunday/15:56:00 - 15:56:00</td>
                  </tr>
                </tbody>
              </q-markup-table>
            </div>
          </q-card-section>
          <q-card-section>
            <div class="col-12 flex flex-center">
              <q-btn
                class="q-ma-sm"
                outline
                color="white"
                text-color="primary"
                label="Cancel"
                @click="dialog = false"
              />
            </div>
          </q-card-section>
        </q-card>
      </q-dialog>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      stdname: "",
      dialog: false
    };
  }
};
</script>

<style lang="css" scoped>
.hide {
  display: none;
}
a {
  text-decoration: none;
}
.show {
  display: inline;
}
.hover {
  filter: grayscale(0);
  transform: scale(1);
  transition: all 0.3s ease;
}
.hover:hover {
  filter: grayscale(100%);
  transform: scale(0.95);
  transition: all 0.3s ease;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
