<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ID template</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet" href="{{ asset('assets_business_id/styles/pages.css') }}" />
</head>

<body class="vh-100">
  <section class="template">
    <header class="head"></header>
    <div class="container">
      <div class="d-flex flex-row justify-content-between">
        <div class="template_id" style="margin: -8px;">
          <div class="info text-center">
            <img style="width: 220px; margin-top: 5px" src="{{ asset('assets_business_id/images/logo.svg') }}" alt="east logo" />
            <div class="info_details">

              <span style="font-weight: bold; color: #4D4E4D; font-size: 1.9rem;">{{ $employee->name_in_id_card }}</span>

              <h5 style="padding-bottom: 10px; color: #EB1C24; font-weight: bold; ">{{ $employee->position->name }}</h5>

              @if($employee->sector->name != '.')
              <h4 style="margin-bottom: 20px; color: #4D4E4D; margin-top: -15px;">{{ $employee->sector->name }}</h4>
              @endif

            </div>
            <div class=" position_info">
              <p style="font-size: 0.8rem; margin:-1px;">ENGINEERING AND SERVICES TECHNOLOGY S.A.E</p>

              <p class="email">{{ $employee->email }}</p>
              <p style="margin:-3px;">
                <span>Mobile</span>
                <span class="mobile" style="color: #EB1C24">+20 {{ $employee->mobile }}</span>
              </p>
            </div>
          </div>
          <div class="img"></div>
        </div>
        <div class="id_image col-md-3 col-4 d-flex flex-column">
          <div class="person_img">
            <img src="{{ $employee->img_path }}" alt="" />
          </div>
          <div class="qr_code" style="margin-left: 23%;">
            <div class="img-fluid h-100 mr-3">{{ $qr }}</div>
          </div>
        </div>
      </div>
    </div>
    <footer class="mt-1">
      <div class="d-flex justify-content-between">
        <img style="width: 80px; height: 45px" src="{{ asset('assets_business_id/images/Vector-gray.png') }}" alt="" class="img-fluid" />
        <img style="width: 100px; height: 45px" src="{{ asset('assets_business_id/images/Vector-red.png') }}" alt="" class="img-fluid" />
      </div>
    </footer>
  </section>
  <section class="contact">
    <header class="head"></header>
    <div class="container">
      <div class="row">
        <div class="col-7" style="margin-inline-start: -70px; margin-inline-end: 20px;">
          <div class="list-group d-flex flex-column justify-content-end h-75" style="align-items: start; margin-top: 50px">
            <label class="list-group-item">
              <div class="d-flex flex-row justify-content-center gap-2">
                <div class="start d-flex flex-row">
                  <span class="rounded-circle"></span>
                  <span class="point">
                    <h3 style="margin-right: 30px;">HQ</h3>
                  </span>
                </div>
                <div class="end d-flex flex-column">
                  <h5>{{ $employee->address }}</h5>
                </div>
              </div>
            </label>
            <label class="list-group-item">
              <div class="d-flex flex-row justify-content-center gap-2">
                <div class="start d-flex flex-row ">
                  <span class="rounded-circle"></span>
                  <span class="point gray">
                    <h3 style="margin-right: 30px;">Tel</h3>
                  </span>
                </div>
                <div class="end d-flex flex-column">
                  <h5>+20 {{ $employee->telephone }}</h5>
                </div>
              </div>
            </label>
            <label class="list-group-item">
              <div class="d-flex flex-row justify-content-center gap-2">
                <div class="start d-flex flex-row ">
                  <span class="rounded-circle"></span>
                  <span class="point gray">
                    <h3 style="margin-right: 24px;">Fax</h3>
                  </span>
                </div>
                <div class="end d-flex flex-column">
                  <h5>+20 {{ $employee->fax }}</h5>
                </div>
              </div>
            </label>
          </div>
        </div>
        <div class="col-5">
          <div class="d-flex flex-column justify-content-end">
            <img style="width: 250px; " src="{{ asset('assets_business_id/images/qr-code.png') }}" alt="scan">
          </div>
        </div>
      </div>
    </div>

    <h5 class="text-center" style="color: #e72429; margin: 1rem;">www.east-eg.com</h5>

    <div class="footer">
      <h3 class="d-flex align-items-center justify-content-center text-center h-100" style="font-weight: bold;">SUSTAINABILITY & INNOVATION</h3>
    </div>
  </section>
</body>

</html>