@extends('layouts.main', ['title' => 'Gia sư | Liên hệ', 'sidebarSelected' => 'contact'])

@push('style')
  @vite(['resources/css/layout/tutor/breadcrumb.css', 'resources/css/tutor.css'])
@endpush

@section('content')
  <section class="tutor-wrap bg-white">
    <div class="breadcrumb-tutor-wrap pb-2 pt-3">
      <nav aria-label="breadcrumb-tutor">
        <ol class="breadcrumb-tutor d-flex flex-wrap">
          <li class="breadcrumb-tutor-item">
            <a href="{{ route('tutors.dashboard') }}"
              class="breadcrumb-tutor-link text-capitalize text-decoration-none">Dashboard</a>
          </li>
          <span class="breadcrumb-tutor-separation fw-light">/</span>
          <li class="breadcrumb-tutor-item active text-neutral-05 fw-semibold text-capitalize text-decoration-none"
            aria-current="page">
            Liên Hệ
          </li>
        </ol>
      </nav>
    </div>
    <section class="tutor-content-wrap pb-5 pt-4">
      <div class="container-fluid p-sm-0">
        <section class="contact bg-white">
          <div class="contact-form">
            <form action="{{ route('tutors.createContact') }}" method="POST">
              @csrf
              <div class="d-flex flex-column align-items-center">
                <span class="contact-title fs-32 text-secondary-color text-uppercase text-center">
                  Giải đáp thắc mắc
                </span>
                <span class="fs-6 text-red-main mt-1 text-center">
                  <em>Để lại thông tin chúng tôi sẽ liên hệ lại với bạn sớm nhất có thể</em>
                </span>
              </div>
              @if (session()->has('message'))
                <div>
                  <div class="alert alert-success d-flex align-items-center w-100 mt-2" role="alert">
                    <div>
                      <p class="mb-0">{{ session('message') }}</p>
                    </div>
                  </div>
                </div>
              @endif
              @if (session()->has('error'))
                <div>
                  <div class="alert alert-danger d-flex align-items-center w-100 mt-2" role="alert">
                    <div>
                      <p class="mb-0">{{ session('message') }}</p>
                    </div>
                  </div>
                </div>
              @endif
              <div class="row mt-4">
                <div class="col-12">
                  <label for="parents" class="fw-500">Họ tên</label>
                  <input name="name" type="text" id="name" placeholder="Nhập tên của bạn"
                    class="form-input w-100" value="{{ Auth::check() ? Auth::user()->fullname : '' }}">
                  @error('name')
                    <span class="error_text text-danger">{{ $message }}</span>
                  @enderror
                </div>
              </div>
              <div class="row mt-4">
                <div class="d-flex flex-column col-lg-6 pr-lg-2 pb-lg-0 flex-row pb-2">
                  <label for="email" class="fw-500">Email</label>
                  <input name="email" type="email" id="email" placeholder="Nhập Email của bạn" class="form-input"
                    value="{{ Auth::check() ? Auth::user()->email : '' }}">
                  @error('email')
                    <span class="error_text text-danger">{{ $message }}</span>
                  @enderror
                </div>
                <div class="d-flex flex-column col-lg-6 pl-lg-2 pt-lg-0 pt-3">
                  <label for="phone" class="fw-500">Số điện thoại</label>
                  <input name="phone" type="number" placeholder="Nhập số điện thoại của bạn" class="form-input"
                    value="{{ Auth::check() ? Auth::user()->phone : '' }}">
                  @error('phone')
                    <span class="error_text text-danger">{{ $message }}</span>
                  @enderror
                </div>
              </div>
              <div class="row mt-4">
                <div class="col-12">
                  <label for="question" class="fw-500">Thắc mắc</label>
                  <textarea name="question" id="question" cols="30" rows="5" class="w-100 form-input"
                    placeholder="Nhập yêu cầu của bạn" value="">{{ old('question') !== null ? old('question') : '' }}</textarea>
                  @error('question')
                    <span class="error_text text-danger">{{ $message }}</span>
                  @enderror
                </div>
              </div>
              <div class="d-flex justify-content-center">
                <button
                  class="prevent-submit button-contact btn-fill-primary fw-600 fs-14 hover-bg-primary mt-4 border border-white"
                  type="submit">
                  Gửi thông tin
                </button>
              </div>
            </form>
          </div>
          <div class="contact-infomation container-fluid pb-5">
            <div class="row">
              <div class="col-lg-7 pr-lg-4 pl-lg-2 px-1">
                <div class="contact-map">
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.149070325472!2d106.71591347420983!3d10.7998925893503!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317529d7845738f3%3A0x6fd8270abc8b4947!2sPearl%20Plaza!5e0!3m2!1svi!2s!4v1718675771433!5m2!1svi!2s"
                    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
              </div>
              <div class="col-lg-5 pr-lg-2 pl-lg-4 px-1">
                <div class="company-information mt-lg-0 mb-4 mt-3">
                  <p class="company-information-name fw-600 text-secondary-color text-capitalize fs-4 mb-2">
                    {{ isset($footerInfo) ? $footerInfo->company_name : '' }}
                  </p>
                  <p class="company-information-slogan fw-500 text-new-blue mb-0">
                    {{ isset($footerInfo) ? $footerInfo->slogan : '' }}</p>
                </div>
                <div class="company-information-contact pt-4">
                  <div class="d-flex company-information-contact-item company-information-address">
                    <div class="contact-icon">
                      <span class="icon-address d-flex align-items-start">
                        <span class="d-flex justify-content-center align-items-center icon-wrap">
                          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 12 15"
                            fill="none">
                            <path
                              d="M11.4987 6.26827C11.4987 10.5107 6.04414 14.1471 6.04414 14.1471C6.04414 14.1471 0.5896 10.5107 0.5896 6.26827C0.5896 4.82163 1.16427 3.43425 2.1872 2.41132C3.21012 1.38839 4.59751 0.813721 6.04414 0.813721C7.49078 0.813721 8.87816 1.38839 9.90109 2.41132C10.924 3.43425 11.4987 4.82163 11.4987 6.26827Z"
                              stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path
                              d="M6.04426 8.08656C7.04841 8.08656 7.86244 7.27253 7.86244 6.26838C7.86244 5.26422 7.04841 4.4502 6.04426 4.4502C5.0401 4.4502 4.22607 5.26422 4.22607 6.26838C4.22607 7.27253 5.0401 8.08656 6.04426 8.08656Z"
                              stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                        </span>
                      </span>
                    </div>
                    <div class="contact-info ms-2">
                      <div class="contact-info-header text-red-main fw-600 mb-1">
                        Địa chỉ
                      </div>
                      <div class="contact-info-content text-paragraph">
                        {{ isset($footerInfo) ? $footerInfo->address : '' }}
                      </div>
                    </div>
                  </div>
                  <div class="d-flex company-information-contact-item company-information-phone">
                    <div class="contact-icon">
                      <span class="icon-phone d-flex align-items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                          fill="none">
                          <g clip-path="url(#clip0_80_21274)">
                            <path
                              d="M14.7109 11.7605V13.7605C14.7116 13.9461 14.6736 14.1299 14.5992 14.3C14.5249 14.4701 14.4158 14.6228 14.2789 14.7484C14.1421 14.8739 13.9806 14.9694 13.8047 15.0289C13.6288 15.0884 13.4425 15.1105 13.2576 15.0938C11.2061 14.8709 9.23556 14.1699 7.50423 13.0471C5.89344 12.0236 4.52778 10.6579 3.50423 9.04712C2.37755 7.30792 1.67639 5.32778 1.45756 3.26712C1.4409 3.08276 1.46281 2.89696 1.52189 2.72153C1.58098 2.54611 1.67594 2.38491 1.80074 2.2482C1.92553 2.11149 2.07743 2.00226 2.24675 1.92747C2.41608 1.85268 2.59912 1.81396 2.78423 1.81379H4.78423C5.10776 1.8106 5.42142 1.92517 5.66673 2.13614C5.91205 2.34711 6.07228 2.64008 6.11756 2.96045C6.20197 3.6005 6.35853 4.22894 6.58423 4.83379C6.67392 5.0724 6.69333 5.33173 6.64016 5.58104C6.58699 5.83035 6.46347 6.05919 6.28423 6.24045L5.43756 7.08712C6.3866 8.75615 7.76853 10.1381 9.43756 11.0871L10.2842 10.2405C10.4655 10.0612 10.6943 9.93769 10.9436 9.88451C11.1929 9.83134 11.4523 9.85076 11.6909 9.94045C12.2957 10.1662 12.9242 10.3227 13.5642 10.4071C13.8881 10.4528 14.1838 10.6159 14.3952 10.8654C14.6067 11.115 14.719 11.4335 14.7109 11.7605Z"
                              stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
                          </g>
                          <defs>
                            <clipPath id="clip0_80_21274">
                              <rect width="16" height="16" fill="white"
                                transform="translate(0.0441895 0.480469)"></rect>
                            </clipPath>
                          </defs>
                        </svg>
                      </span>
                    </div>
                    <div class="contact-info ms-2">
                      <div class="contact-info-header text-red-main fw-600 mb-1">
                        Hotline
                      </div>
                      <div class="contact-info-content text-paragraph">
                        {{ isset($footerInfo) ? $footerInfo->hotline : '' }}
                      </div>
                    </div>
                  </div>
                  <div class="d-flex company-information-contact-item company-information-email">
                    <div class="contact-icon">
                      <span class="icon-email d-flex align-items-start">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                          fill="none">
                          <g clip-path="url(#clip0_80_21280)">
                            <path
                              d="M2.71077 3.14722H13.3774C14.1108 3.14722 14.7108 3.74722 14.7108 4.48055V12.4805C14.7108 13.2139 14.1108 13.8139 13.3774 13.8139H2.71077C1.97744 13.8139 1.37744 13.2139 1.37744 12.4805V4.48055C1.37744 3.74722 1.97744 3.14722 2.71077 3.14722Z"
                              stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M14.7108 4.48047L8.04411 9.14714L1.37744 4.48047" stroke="white"
                              stroke-linecap="round" stroke-linejoin="round"></path>
                          </g>
                          <defs>
                            <clipPath id="clip0_80_21280">
                              <rect width="16" height="16" fill="white"
                                transform="translate(0.0441895 0.480469)"></rect>
                            </clipPath>
                          </defs>
                        </svg>
                      </span>
                    </div>
                    <div class="contact-info ms-2">
                      <div class="contact-info-header text-red-main fw-600 mb-1">
                        Email
                      </div>
                      <div class="contact-info-content text-paragraph word text-break">
                        {{ isset($footerInfo) ? $footerInfo->email : '' }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="company-information-social d-flex justify-content-start mt-5 flex-wrap pt-2">
                  <!-- FB -->
                  <a class="text-decoration-none me-3 mt-2"
                    href="{{ isset($footerInfo) ? $footerInfo->facebook_link : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"
                      fill="none">
                      <g clip-path="url(#clip0_80_21285)">
                        <path
                          d="M32.0442 16.4805C32.0442 7.64397 24.8807 0.480469 16.0442 0.480469C7.20769 0.480469 0.0441895 7.64384 0.0441895 16.4805C0.0441895 24.4665 5.89519 31.0858 13.5442 32.2861V21.1055H9.48169V16.4805H13.5442V12.9555C13.5442 8.94547 15.9329 6.73047 19.5876 6.73047C21.3382 6.73047 23.1692 7.04297 23.1692 7.04297V10.9805H21.1517C19.1639 10.9805 18.5442 12.2138 18.5442 13.4792V16.4805H22.9817L22.2723 21.1055H18.5442V32.2861C26.1932 31.0858 32.0442 24.4666 32.0442 16.4805Z"
                          fill="#1877F2"></path>
                        <path
                          d="M22.2723 21.1055L22.9817 16.4805H18.5442V13.4792C18.5442 12.2137 19.1641 10.9805 21.1517 10.9805H23.1692V7.04297C23.1692 7.04297 21.3382 6.73047 19.5876 6.73047C15.9329 6.73047 13.5442 8.94547 13.5442 12.9555V16.4805H9.48169V21.1055H13.5442V32.2861C14.3712 32.4157 15.2071 32.4807 16.0442 32.4805C16.8813 32.4807 17.7172 32.4157 18.5442 32.2861V21.1055H22.2723Z"
                          fill="white"></path>
                      </g>
                      <defs>
                        <clipPath id="clip0_80_21285">
                          <rect width="32" height="32" fill="white"
                            transform="translate(0.0441895 0.480469)">
                          </rect>
                        </clipPath>
                      </defs>
                    </svg>
                  </a>
                  <!-- Instagram -->
                  <a class="text-decoration-none me-3 mt-2"
                    href="{{ isset($footerInfo) ? $footerInfo->instagram_link : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"
                      fill="none">
                      <path
                        d="M16.0442 3.36172C20.3192 3.36172 20.8254 3.38047 22.5067 3.45547C24.0692 3.52422 24.9129 3.78672 25.4754 4.00547C26.2192 4.29297 26.7567 4.64297 27.3129 5.19922C27.8754 5.76172 28.2192 6.29297 28.5067 7.03672C28.7254 7.59922 28.9879 8.44922 29.0567 10.0055C29.1317 11.693 29.1504 12.1992 29.1504 16.468C29.1504 20.743 29.1317 21.2492 29.0567 22.9305C28.9879 24.493 28.7254 25.3367 28.5067 25.8992C28.2192 26.643 27.8692 27.1805 27.3129 27.7367C26.7504 28.2992 26.2192 28.643 25.4754 28.9305C24.9129 29.1492 24.0629 29.4117 22.5067 29.4805C20.8192 29.5555 20.3129 29.5742 16.0442 29.5742C11.7692 29.5742 11.2629 29.5555 9.58169 29.4805C8.01919 29.4117 7.17544 29.1492 6.61294 28.9305C5.86919 28.643 5.33169 28.293 4.77544 27.7367C4.21294 27.1742 3.86919 26.643 3.58169 25.8992C3.36294 25.3367 3.10044 24.4867 3.03169 22.9305C2.95669 21.243 2.93794 20.7367 2.93794 16.468C2.93794 12.193 2.95669 11.6867 3.03169 10.0055C3.10044 8.44297 3.36294 7.59922 3.58169 7.03672C3.86919 6.29297 4.21919 5.75547 4.77544 5.19922C5.33794 4.63672 5.86919 4.29297 6.61294 4.00547C7.17544 3.78672 8.02544 3.52422 9.58169 3.45547C11.2629 3.38047 11.7692 3.36172 16.0442 3.36172ZM16.0442 0.480469C11.7004 0.480469 11.1567 0.499219 9.45044 0.574219C7.75044 0.649219 6.58169 0.924219 5.56919 1.31797C4.51294 1.73047 3.61919 2.27422 2.73169 3.16797C1.83794 4.05547 1.29419 4.94922 0.881689 5.99922C0.487939 7.01797 0.212939 8.18047 0.137939 9.88047C0.0629395 11.593 0.0441895 12.1367 0.0441895 16.4805C0.0441895 20.8242 0.0629395 21.368 0.137939 23.0742C0.212939 24.7742 0.487939 25.943 0.881689 26.9555C1.29419 28.0117 1.83794 28.9055 2.73169 29.793C3.61919 30.6805 4.51294 31.2305 5.56294 31.6367C6.58169 32.0305 7.74419 32.3055 9.44419 32.3805C11.1504 32.4555 11.6942 32.4742 16.0379 32.4742C20.3817 32.4742 20.9254 32.4555 22.6317 32.3805C24.3317 32.3055 25.5004 32.0305 26.5129 31.6367C27.5629 31.2305 28.4567 30.6805 29.3442 29.793C30.2317 28.9055 30.7817 28.0117 31.1879 26.9617C31.5817 25.943 31.8567 24.7805 31.9317 23.0805C32.0067 21.3742 32.0254 20.8305 32.0254 16.4867C32.0254 12.143 32.0067 11.5992 31.9317 9.89297C31.8567 8.19297 31.5817 7.02422 31.1879 6.01172C30.7942 4.94922 30.2504 4.05547 29.3567 3.16797C28.4692 2.28047 27.5754 1.73047 26.5254 1.32422C25.5067 0.930469 24.3442 0.655469 22.6442 0.580469C20.9317 0.499219 20.3879 0.480469 16.0442 0.480469Z"
                        fill="url(#paint0_linear_230_8798)"></path>
                      <path
                        d="M16.0442 8.26172C11.5067 8.26172 7.82544 11.943 7.82544 16.4805C7.82544 21.018 11.5067 24.6992 16.0442 24.6992C20.5817 24.6992 24.2629 21.018 24.2629 16.4805C24.2629 11.943 20.5817 8.26172 16.0442 8.26172ZM16.0442 21.8117C13.1004 21.8117 10.7129 19.4242 10.7129 16.4805C10.7129 13.5367 13.1004 11.1492 16.0442 11.1492C18.9879 11.1492 21.3754 13.5367 21.3754 16.4805C21.3754 19.4242 18.9879 21.8117 16.0442 21.8117Z"
                        fill="url(#paint1_linear_230_8798)"></path>
                      <path
                        d="M26.5067 7.93658C26.5067 8.99908 25.6442 9.85533 24.5879 9.85533C23.5254 9.85533 22.6692 8.99283 22.6692 7.93658C22.6692 6.87407 23.5317 6.01782 24.5879 6.01782C25.6442 6.01782 26.5067 6.88032 26.5067 7.93658Z"
                        fill="url(#paint2_linear_230_8798)"></path>
                      <defs>
                        <linearGradient id="paint0_linear_230_8798" x1="16.0348" y1="0.480469" x2="16.0348"
                          y2="32.4742" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#2615DF"></stop>
                          <stop offset="0.317708" stop-color="#9019A4"></stop>
                          <stop offset="0.723958" stop-color="#EC4B19"></stop>
                          <stop offset="1" stop-color="#FF9900"></stop>
                        </linearGradient>
                        <linearGradient id="paint1_linear_230_8798" x1="16.0442" y1="8.26172" x2="16.0442"
                          y2="24.6992" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#2615DF"></stop>
                          <stop offset="0.317708" stop-color="#9019A4"></stop>
                          <stop offset="0.723958" stop-color="#EC4B19"></stop>
                          <stop offset="1" stop-color="#FF9900"></stop>
                        </linearGradient>
                        <linearGradient id="paint2_linear_230_8798" x1="24.5879" y1="6.01782" x2="24.5879"
                          y2="9.85533" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#2615DF"></stop>
                          <stop offset="0.317708" stop-color="#9019A4"></stop>
                          <stop offset="0.723958" stop-color="#EC4B19"></stop>
                          <stop offset="1" stop-color="#FF9900"></stop>
                        </linearGradient>
                      </defs>
                    </svg>
                  </a>
                  <!-- Tiktok -->
                  <a class="text-decoration-none me-3 mt-2"
                    href="{{ isset($footerInfo) ? $footerInfo->tiktok_link : '' }}">
                    <svg fill="#ffffff" width="32" height="32" viewBox="-51.2 -51.2 614.40 614.40"
                      id="icons" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
                      <g id="SVGRepo_bgCarrier" stroke-width="0">
                        <rect x="-51.2" y="-51.2" width="614.40" height="614.40" rx="110.59199999999998"
                          fill="#000000" strokewidth="0"></rect>
                      </g>
                      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                      <g id="SVGRepo_iconCarrier">
                        <path
                          d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z">
                        </path>
                      </g>
                    </svg>
                  </a>
                  <!-- LinkedIn -->
                  <a class="text-decoration-none me-3 mt-2"
                    href="{{ isset($footerInfo) ? $footerInfo->linkedin_link : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"
                      fill="none">
                      <g clip-path="url(#clip0_230_8952)">
                        <path
                          d="M29.682 0.480469H2.40641C1.77991 0.480469 1.17907 0.729345 0.736069 1.17235C0.293066 1.61535 0.0441895 2.21619 0.0441895 2.84269V30.1182C0.0441895 30.7447 0.293066 31.3456 0.736069 31.7886C1.17907 32.2316 1.77991 32.4805 2.40641 32.4805H29.682C30.3085 32.4805 30.9093 32.2316 31.3523 31.7886C31.7953 31.3456 32.0442 30.7447 32.0442 30.1182V2.84269C32.0442 2.21619 31.7953 1.61535 31.3523 1.17235C30.9093 0.729345 30.3085 0.480469 29.682 0.480469ZM9.58197 27.7405H4.77086V12.4582H9.58197V27.7405ZM7.17308 10.3405C6.62734 10.3374 6.09474 10.1727 5.6425 9.86725C5.19026 9.56178 4.83864 9.12918 4.63203 8.62405C4.42541 8.11893 4.37305 7.56392 4.48156 7.02908C4.59008 6.49423 4.85459 6.0035 5.24173 5.61884C5.62887 5.23418 6.12128 4.97283 6.65681 4.86775C7.19235 4.76267 7.74701 4.81859 8.25079 5.02845C8.75458 5.23831 9.18491 5.59269 9.48748 6.04689C9.79004 6.50108 9.95129 7.03472 9.95086 7.58047C9.95601 7.94585 9.88754 8.30852 9.74954 8.64688C9.61154 8.98523 9.40683 9.29234 9.14762 9.54989C8.8884 9.80745 8.57999 10.0102 8.24076 10.146C7.90152 10.2818 7.53842 10.348 7.17308 10.3405ZM27.3153 27.7538H22.5064V19.4049C22.5064 16.9427 21.4597 16.1827 20.1086 16.1827C18.682 16.1827 17.282 17.2582 17.282 19.4671V27.7538H12.4709V12.4694H17.0975V14.5871H17.1597C17.6242 13.6471 19.2509 12.0405 21.7331 12.0405C24.4175 12.0405 27.3175 13.6338 27.3175 18.3005L27.3153 27.7538Z"
                          fill="#0A66C2"></path>
                      </g>
                      <defs>
                        <clipPath id="clip0_230_8952">
                          <rect width="32" height="32" fill="white"
                            transform="translate(0.0441895 0.480469)">
                          </rect>
                        </clipPath>
                      </defs>
                    </svg>
                  </a>
                  <!-- Youtube -->
                  <a class="d-flex justify-content-center align-items-center text-decoration-none icon-youtube mt-2"
                    href="{{ isset($footerInfo) ? $footerInfo->youtube_link : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="17" viewBox="0 0 23 17"
                      fill="none">
                      <path
                        d="M21.5586 3.0654C21.4324 2.59163 21.1863 2.15972 20.8447 1.81266C20.503 1.4656 20.0779 1.21551 19.6115 1.08729C17.9042 0.614258 11.0327 0.614258 11.0327 0.614258C11.0327 0.614258 4.16092 0.628576 2.45358 1.1016C1.98721 1.22983 1.56205 1.47994 1.22042 1.82701C0.878802 2.17409 0.632643 2.60602 0.506461 3.0798C-0.00996912 6.16156 -0.210302 10.8574 0.520641 13.8159C0.646837 14.2897 0.893002 14.7216 1.23462 15.0687C1.57624 15.4157 2.0014 15.6658 2.46776 15.794C4.1751 16.2671 11.0467 16.2671 11.0467 16.2671C11.0467 16.2671 17.9183 16.2671 19.6255 15.794C20.0919 15.6658 20.5171 15.4157 20.8587 15.0687C21.2004 14.7216 21.4465 14.2897 21.5727 13.8159C22.1174 10.7298 22.2853 6.03689 21.5586 3.06549V3.0654Z"
                        fill="white"></path>
                      <path d="M8.8457 11.7947L14.5461 8.44058L8.8457 5.08643V11.7947Z" fill="#FF0000"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </section>
  </section>
@endsection