<!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">
      <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img src=".<?= base_url('assets/images/arowleft.svg') ?>" alt="" width="15px"> Back</button>
   <div class="row justify-content-center">
    <div class="col-md-10">
      
      <div class="row  ">
        <div class="col-md-6">
            <div class="d-flex gap-3">
                <img class="avatarImage" src="<?= base_url('assets/images/avatars/avd.png') ?>" alt="">
                <div>
                    <p class="fh3 mb-0 fw-bolder">Chavez Julian Jose</p>
                    <div class="d-flex gap-3 align-items-center">
                        <img class="" src="<?= base_url('assets/images/tick.png') ?>" alt="" width="25px">
                        <p class="mb-0 fh4">No need to call house</p>
                    </div>
                </div>
            </div>
            <div class="">
           
              <p class="fos3 mb-0 fw-bolder">House information</p>
              
          <div class="d-flex align-items-center gap-2 mt-3">
              <div class="num d-flex justify-content-center align-items-center">
                  <p class="mb-0">93</p>
              </div>
              <div>
                  <p class="fw-bold mb-0">Javier Vega Odio</p>
                  <p class="fw-bold mb-0">Zone:5c</p>
                  <p class="mb-0">+98 765 432 10</p>
              </div>
             
          </div>
         
      </div>
      <button class="btn autBtn px-4 py-2 my-3 d-b " type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
       Additional Phone Numbers
      </button>
    </p>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        <div class="mb-2">
          <p class="fos3 fwb-bolder">Jaun Jose Estrada (Owner)</p>
          <p >+9876543210</p>
        </div>
        <div class="mb-2">
          <p class="fos3 fwb-bolder">Gerardo Campos (Tenent)</p>
          <p >+9876543210</p>
        </div>
      </div>
    </div>
        </div>
        <div class=" col-md-6">
          <div class="d-flex justify-content-between align-items-center">
              <p class="fos3 mb-0 fw-bolder">Visitor information</p>
              <div class="subButtons d-flex align-items-center gap-2">
                  <button class="btn actImg"><img class="" src="<?= base_url('assets/images/ser.png') ?>" alt="" ></button>
                  <button class="btn actImg"><img class="" src="<?= base_url('assets/images/edi.png') ?>" alt=""></button>
              </div>
          </div>
          <div class="my-2">
              <p class="fos5 mb-2">ID: <span>Card</span></p>
              <p class="fos5 mb-2">Full Name: <span>Erin Moriarty</span></p>
              <p class="fos5 mb-2">License Plate:
                   <span> LS-859-5D</span></p>
                   <p class="fos5 mb-2">Type of visit:
                      <span>Visit for dinner</span></p>
                      <p class="fos5 mb-2"> Date & Time of Visit:
                          <span>22-jan-24 08:00 pm</span></p>
                           <p class="fos5 mb-2"> Parking Assigned:
                          <span>block B</span></p>
          </div>
      </div>
    </div>
 
    <div class="row my-2">
      <div class="col-md-12 mt-2">
           
        <p class="fos3 mb-0 fw-bolder"> Entry Rules </p>
        <div class="">
          <div class="card-body  my-2">
           
            <div class=" mt-2 ">
               <div class="d-flex gap-2 align-items-center my-3">

                <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">

                <p class="foss3 mb-0">Is the alarm armed?</p>
               </div>
               <div class="d-flex gap-2 align-items-center my-3">

                <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">

                <p class="foss3 mb-0">Does the alarm sound when a Zora is activated?</p>
               </div>
               <div class="d-flex gap-2 align-items-center my-3">

                <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">

                <p class="foss3 mb-0">Is there any vegetation obstruction that could activate the alarm?</p>
               </div>
            </div>
            <!-- common areas -->
           
            <div class=" mt-2 ">
               <div class="d-flex gap-2 align-items-center my-3 justify-content-between">

               <div class="d-flex gap-2 align-items-center">
                <img src="<?= base_url('assets/images/cross.png') ?>" alt="" width="20px">

                <p class="foss3 mb-0">Is the gym clean?</p>
               </div>

            
               </div>
               <div class="d-flex gap-2 align-items-center my-3">

                <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">

                <p class="foss3 mb-0">Does the pool water have a good color?</p>
               </div>
               <div class="d-flex gap-2 align-items-center my-3">

                <img src="<?= base_url('assets/images/tick.png') ?>" alt="" width="20px">

                <p class="foss3 mb-0">Are the playground equipment in the parks in good condition?</p>
               </div>
             
            </div>
        </div>
        </div>
        
  
 </div>
</div>
        <div class="col-md-12 mt-2">
           
                <p class="fos3 mb-0 fw-bolder">Resident Comments</p>
                <p class="mt-2 fos5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                <div>
                  <textarea class="form-control textarea" id="note" placeholder="Note" rows="5" oninput="countWords()"></textarea>
                 <div class="d-flex justify-content-end">
                  <small class="fw-bolder" id="wordCount">0/2000</small>
                 </div>
              </div>
              
         <div class="d-flex justify-content-center">
          <button class="btn autBtn px-4 py-2 my-3 d-b ">Authorize the Visit</button>
         </div>
        </div>
    </div>
    </div>
   </div>
    </div>
   
    
  </main>
  <!--end main wrapper-->