@extends('user.layout')

@section('content')
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css"
  rel="stylesheet"
/>
<style>
    /* Card Styling */
.invite-card {
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2.card-title.mb-4 {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.11428570002317429px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* Invite Link Section */
.invite-link-section {
  margin-bottom: 30px;
}

.copy-btn {
  padding: 10px 15px;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}



/* Notes Section */

h3.fw-bold.text-primary {
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1C1C1C !important;
}
p.invitenotes {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #858585;
}




/* Social Media Icons Section */
.social-icons {
  text-align: center;
  margin-top: 20px;
}

.icon {
  display: inline-block;
  margin: 0 10px;
}

.icon img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.icon img:hover {
  transform: scale(1.2);
}
</style>

<div class="row mb-3">
            <div class="col">
                <h4 class="page-title">Invite Link</h4> 
            </div>
        </div>


        <div class="container ">
  <div class="card invite-card shadow-lg">
    <div class="card-body">
      <!-- Title -->
      <h2 class="card-title  mb-4">Send an Invite</h2>

      <div class="d-flex justify-content-center inviteimage">
      <img src="{{ asset('/assets/images/pages/invite.svg') }}" alt="inviteimage" style="width:272px;height:272px;">
      </div>


      <!-- Invite Link Section -->
      <div class="mb-4">
        <label for="inviteLink" class="form-label fw-bold">Invite Link</label>
        <div class="input-group">
          <input
            type="text"
            id="inviteLink"
            class="form-control"
            value="http://www.sbdfbnd65sfdvb.invite.com"
            readonly
          />
          <button class="copy-btn" onclick="copyToClipboard()"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 11C6 8.172 6 6.757 6.879 5.879C7.757 5 9.172 5 12 5H15C17.828 5 19.243 5 20.121 5.879C21 6.757 21 8.172 21 11V16C21 18.828 21 20.243 20.121 21.121C19.243 22 17.828 22 15 22H12C9.172 22 7.757 22 6.879 21.121C6 20.243 6 18.828 6 16V11Z" stroke="#494949" stroke-width="1.5"/>
<path d="M6 19C5.20435 19 4.44129 18.6839 3.87868 18.1213C3.31607 17.5587 3 16.7956 3 16V10C3 6.229 3 4.343 4.172 3.172C5.344 2.001 7.229 2 11 2H15C15.7956 2 16.5587 2.31607 17.1213 2.87868C17.6839 3.44129 18 4.20435 18 5" stroke="#494949" stroke-width="1.5"/>
</svg>
</button>
        </div>
      </div>

      <div class="mb-4 d-flex">
        <p class="fw-bold text-dark me-2">Notes:</p>
        <p class="invitenotes mt-1">Simply click the invite link provided to you. It will take you directly to our website.If you’re a new user, sign up for an account to start shopping.
          If you’re already a member, log in to your account.
          Explore our wide range of fresh produce, pantry staples, household items, and more.
          Select the items you need and add them to your shopping cart.
          Once you’ve finished shopping, proceed to checkout. You can choose your preferred payment method and delivery options.
        </p><p>
      </p></div>

      <!-- Social Media Icons Section -->
      <div class=" d-flex text-center justify-content-evenly">
        <a href="#">
        <img src="{{asset('/assets')}}/images/pages/whatsapp.svg" alt="inviteimage" style="width:72px;height:72px;"><p>WhatsApp</p> 
        </a>
        <a href="#">
        <img src="{{asset('/assets')}}/images/pages/telegram.svg" alt="inviteimage" style="width:72px;height:72px;"><p>Telegram</p>  
        </a>
        <a href="#">
        <img src="{{asset('/assets')}}/images/pages/Instagram.svg" alt="inviteimage" style="width:72px;height:72px;"><p>Instagram</p>  
        </a>
        <a href="#">
        <img src="{{asset('/assets')}}/images/pages/facebook.svg" alt="inviteimage" style="width:72px;height:72px;"> <p>facebook</p>  
        </a>
        </div>
       
<script>
    function copyToClipboard() {
  const copyText = document.getElementById("inviteLink");
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile compatibility
  navigator.clipboard.writeText(copyText.value).then(() => {
    alert("Link copied to clipboard!");
  });
}

</script>

@endsection