<app-breadcrumb [breadcrumb]="breadcrumb" />
<section class="contact-box-section">
  <div class="container-fluid-lg">
    <div class="row g-lg-5 g-3">
      <div class="col-lg-6">
        <div class="left-sidebar-box">
          <div class="row">
            @if(contactData && contactData.contact_image_url){
            <div class="col-xl-12">
              <div class="contact-image">
                <img
                  src="{{ storageURL + contactData.contact_image_url }}"
                  class="img-fluid"
                  alt="contact-us"
                />
              </div>
            </div>
            }
            <div class="col-xl-12">
              <div class="contact-title">
                <h3>{{ 'get_in_touch' | translate }}</h3>
              </div>
              <div class="contact-detail">
                <div class="row g-4">
                  @if(contactData && contactData.detail_1.text){
                  <div class="col-xxl-6 col-lg-12 col-sm-6">
                    <div class="contact-detail-box">
                      @if(!!contactData.detail_1.icon){
                      <div class="contact-icon">
                        <i [class]="contactData.detail_1.icon"></i>
                      </div>
                      }
                      <div class="contact-detail-title">
                        <h4>{{ contactData.detail_1.label }}</h4>
                      </div>

                      <div class="contact-detail-contain">
                        <p>{{ contactData.detail_1.text }}</p>
                      </div>
                    </div>
                  </div>
                  } @if(contactData && contactData.detail_2.text){
                  <div class="col-xxl-6 col-lg-12 col-sm-6">
                    <div class="contact-detail-box">
                      @if(!!contactData.detail_2.icon){
                      <div class="contact-icon">
                        <i [class]="contactData.detail_2.icon"></i>
                      </div>
                      }

                      <div class="contact-detail-title">
                        <h4>{{ contactData.detail_2.label }}</h4>
                      </div>

                      <div class="contact-detail-contain">
                        <p>{{ contactData.detail_2.text }}</p>
                      </div>
                    </div>
                  </div>
                  } @if(contactData && contactData.detail_3.text){
                  <div class="col-xxl-6 col-lg-12 col-sm-6">
                    <div class="contact-detail-box">
                      @if(!!contactData.detail_3.icon){
                      <div class="contact-icon">
                        <i [class]="contactData.detail_3.icon"></i>
                      </div>
                      }

                      <div class="contact-detail-title">
                        <h4>{{ contactData.detail_3.label }}</h4>
                      </div>

                      <div class="contact-detail-contain">
                        <p>{{ contactData.detail_3.text }}</p>
                      </div>
                    </div>
                  </div>
                  } @if(contactData && contactData.detail_4.text){
                  <div class="col-xxl-6 col-lg-12 col-sm-6">
                    <div class="contact-detail-box">
                      @if(!!contactData.detail_4.icon){
                      <div class="contact-icon">
                        <i [class]="contactData.detail_4.icon"></i>
                      </div>
                      }

                      <div class="contact-detail-title">
                        <h4>{{ contactData.detail_4.label }}</h4>
                      </div>

                      <div class="contact-detail-contain">
                        <p>{{ contactData.detail_4.text }}</p>
                      </div>
                    </div>
                  </div>
                  }
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="title d-xxl-none d-block">
          <h2>{{ 'contact_us' | translate }}</h2>
        </div>
        <div class="right-sidebar-box">
          <div class="row" [formGroup]="form">
            <div class="col-12">
              <div class="mb-md-4 mb-3 custom-form">
                <label for="fullname" class="form-label">{{ 'full_name' | translate }}</label>
                <div class="custom-input">
                  <input
                    type="text"
                    class="form-control"
                    id="fullname"
                    placeholder="{{ 'enter_full_name' | translate }}"
                    formControlName="name"
                  />
                  <i class="ri-user-3-fill"></i>

                  @if(form.controls['name'].touched && form.controls['name'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'name_is_required' | translate }}</div>
                  }
                </div>
              </div>
            </div>
            <div class="col-xxl-6 col-lg-12 col-sm-6">
              <div class="mb-md-4 mb-3 custom-form">
                <label for="email" class="form-label">{{ 'email_address' | translate }}</label>
                <div class="custom-input">
                  <input
                    type="email"
                    class="form-control"
                    id="email"
                    placeholder="{{ 'enter_email_address' | translate }}"
                    formControlName="email"
                  />
                  <i class="ri-mail-fill"></i>

                  @if(form.controls['email'].touched &&
                  form.controls['email'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'email_is_required' | translate }}</div>
                  } @if(form.controls['email'].errors?.['email']){
                  <div class="invalid-feedback">{{ 'invalid_email' | translate }}</div>
                  }
                </div>
              </div>
            </div>
            <div class="col-xxl-6 col-lg-12 col-sm-6">
              <div class="mb-md-4 mb-3 custom-form">
                <label for="phonenumner" class="form-label">{{ 'phone_number' | translate }}</label>
                <div class="custom-input">
                  <input
                    type="number"
                    class="form-control"
                    id="phonenumner"
                    placeholder="{{ 'enter_your_phone_number' | translate }}"
                    formControlName="phone"
                  />
                  <i class="ri-smartphone-line"></i>

                  @if(form.controls['phone'].touched &&
                  form.controls['phone'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'phone_number_is_required' | translate }}</div>
                  }
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="mb-md-4 mb-3 custom-form">
                <label for="exampleFormControlInput" class="form-label"
                  >{{ 'subject' | translate }}</label
                >
                <div class="custom-input">
                  <input
                    type="text"
                    class="form-control"
                    id="subject"
                    placeholder="{{ 'enter_subject' | translate }}"
                    formControlName="subject"
                  />
                  <i class="ri-user-3-fill"></i>

                  @if(form.controls['subject'].touched &&
                  form.controls['subject'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'subject_is_required' | translate }}</div>
                  }
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="mb-md-4 mb-3 custom-form">
                <label for="message" class="form-label">{{ 'message' | translate }}</label>
                <div class="custom-textarea">
                  <textarea
                    class="form-control"
                    id="message"
                    placeholder="{{ 'enter_your_message' | translate }}"
                    rows="6"
                    formControlName="message"
                  ></textarea>
                  <i class="ri-chat-2-fill"></i>

                  @if(form.controls['message'].touched &&
                  form.controls['message'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'message_is_required' | translate }}</div>
                  }
                </div>
              </div>
            </div>
          </div>
          <app-button
            [class]="'btn btn-animation btn-md fw-bold ms-auto'"
            [type]="'button'"
            [id]="'send_message'"
            [spinner]="true"
            (click)="submit()"
          >
            {{ 'send_message' | translate }}
          </app-button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="map-section">
  <div class="container-fluid p-0">
    <div class="map-box">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m23!1m12!1m3!1d2994.3803116994895!2d55.29773782339708!3d25.222534631321!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e6!4m5!1s0x3e5f43496ad9c645%3A0xbde66e5084295162!2sDubai%20-%20United%20Arab%20Emirates!3m2!1d25.2048493!2d55.2707828!4m0!5e1!3m2!1sen!2sin!4v1652217109535!5m2!1sen!2sin"
        style="border: 0"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
      >
      </iframe>
    </div>
  </div>
</section>
