{"version":3,"file":"Welcome-BJv0FYKa.js","sources":["../../../resources/js/Pages/Welcome.vue"],"sourcesContent":["<script setup>\nimport { ref, computed } from 'vue';\nimport PrimaryButton from \"@/Components/PrimaryButton.vue\";\nimport TextInput from \"@/Components/TextInput.vue\";\nimport AppLayout from \"@/Layouts/AppLayout.vue\";\nimport Event from \"@/Components/Dashboard/Event.vue\";\n\nconst props = defineProps({\n    federations: {\n        type: Array,\n        default: []\n    },\n    texte: {\n        type: Object,\n        default: {}\n    },\n    imagini: {\n        type: Object,\n        default: {}\n    }\n});\n\nconst searchQuery = ref('');\n\n// Computed property to filter federations based on the search query\nconst filteredFederations = computed(() => {\n    if (!searchQuery.value) return props.federations;\n    return props.federations.filter(federation =>\n        federation.name.toLowerCase().includes(searchQuery.value.toLowerCase())\n    );\n});\n\n// State to track which federation's accordion is expanded\nconst expandedFederationId = ref(null);\n\n// Toggle accordion for a federation\nconst toggleAccordion = (federationId) => {\n    expandedFederationId.value = (expandedFederationId.value === federationId) ? null : federationId;\n};\n\nconst showPlaceholderImg = (event) => {\n    // change this into a <i> tag with a placeholder icon from font-awesome\n    let e = event.target;\n    let i = document.createElement('i');\n    i.classList.add('fal', 'fa-image', 'text-gray-300', 'text-6xl');\n    e.replaceWith(i);\n\n}\n</script>\n\n\n<template>\n  <div class=\"home min-h-screen bg-gray-900 text-white\">\n  <!-- Header -->\n  <!-- Navbar -->\n    <header class=\"flex justify-between items-center p-6\">\n      <img class=\"h-12 w-auto\" src=\"/img/logo.png\" alt=\"Romania Be Active\" />\n      <nav class=\"space-x-12 hidden md:flex navbar\">\n        <a href=\"#beactive\" class=\"hover:text-green-400 text-lg\">Romania Be Active 2024</a>\n        <a href=\"#despre\" class=\"hover:text-green-400 text-lg\">Despre app</a>\n        <a href=\"#parteneri\" class=\"hover:text-green-400 text-lg\">Parteneri</a>\n        <a href=\"#unde\" class=\"hover:text-green-400 text-lg\">Unde</a>\n      </nav>\n      <a\n        :href=\"route('login')\"\n        class=\"bg-transparent border border-green-400 text-green-400 py-2 px-4 hover:bg-green-400 hover:text-gray-900 text-lg\"\n        >Intră in app</a\n      >\n    </header>\n\n    <!-- Hero Section -->\n    <section\n      class=\"flex flex-col justify-center items-center text-center space-y-12 py-24 px-16 bg-cover bg-center\"\n      :style=\"'background-image: url('+props.imagini['hero image']+')'\" id=\"despre\"\n    >\n        <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-extrabold text-green-500 primary\">\n            {{props.texte['Hero Title']}}\n        </h1>\n        <div class=\"text-hero\">\n          <p class=\"text-lg md:text-xl pr-8 pl-6\">\n            {{props.texte['Hero Text']}}\n          </p>\n        </div>\n        <div class=\"space-x-4\">\n          <a href=\"/register\">\n            <button\n              class=\"bg-green-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-green-600 uppercase primary-background\"\n            >\n              Vreau pașaport\n            </button>\n          </a>\n          <a href=\"#federatii\">\n            <button\n              class=\"bg-transparent border border-green-500 text-green-500 font-bold py-3 px-8 rounded-md hover:bg-green-500 hover:text-gray-900 uppercase\"\n            >\n              Vezi activități\n            </button>\n          </a>\n        </div>\n    </section>\n\n    <section id=\"beactive\">\n\n\n      <div class=\"bg-white py-12 px-6\">\n        <div class=\"max-w-7xl mx-auto text-center\">\n          <!-- Heading -->\n          <h2 class=\"text-3xl md:text-4xl font-extrabold text-gray-800\">\n              {{props.texte['Heading']}}\n          </h2>\n          <!-- Paragraph -->\n          <p class=\"mt-4 text-lg md:text-xl text-gray-600\">\n                {{props.texte['Text Heading']}}\n          </p>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-gray-100 py-16 px-4\">\n      <div class=\"max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8\">\n\n        <!-- Trainers Block -->\n        <div class=\"flex bg-white rounded-lg shadow-lg overflow-hidden\">\n          <img\n            class=\"w-1/2 object-cover\"\n            :src=\"props.imagini['imagine stanga']\"\n            alt=\"Trainer and client\"\n          />\n          <div class=\"w-1/2 p-8 bg-green-100\">\n            <h3 class=\"text-2xl font-bold text-gray-800\">Activități</h3>\n            <p class=\"text-gray-700 mt-4\">\n              {{ props.texte['Box stanga Text'] }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Members Block -->\n        <div class=\"flex bg-white rounded-lg shadow-lg overflow-hidden\">\n          <img\n            class=\"w-1/2 object-cover\"\n            :src=\"props.imagini['imagine dreapta']\"\n            alt=\"Members working out\"\n          />\n          <div class=\"w-1/2 p-8 bg-green-100\">\n            <h3 class=\"text-2xl font-bold text-gray-800\">{{props.texte['Box dreapta titlu']}}</h3>\n            <p class=\"text-gray-700 mt-4\">\n                {{props.texte['Box dreapta text']}}\n            </p>\n\n          </div>\n        </div>\n\n      </div>\n    </section>\n\n    <section class=\"bg-white\" id=\"parteneri\">\n\n    <h2 class=\"font-semibold text-xl leading-tight bg-transparent\">\n        Lista Partenerilor\n    </h2>\n\n\n      <div>\n          <div class=\"max-w-7xl mx-auto sm:px-4 lg:px-4 py-6\">\n              <div class=\"bg-white overflow-hidden shadow-lg sm:rounded-lg p-6\">\n                  <div>\n                      <h3 class=\"text-lg font-semibold mb-4\">Lista Partenerilor</h3>\n\n                      <!-- Search Input -->\n                      <div class=\"mb-6\">\n                          <TextInput\n                              v-model=\"searchQuery\"\n                              placeholder=\"Caută parteneri...\"\n                              class=\"w-full text-gray-700\"\n                          />\n                      </div>\n\n                      <!-- Federation List with Accordion -->\n                      <div v-if=\"filteredFederations.length\" class=\"max-h-[660px] overflow-y-auto\">\n                          <div\n                              v-for=\"federation in filteredFederations\"\n                              :key=\"federation.id\"\n                              class=\"mb-4 p-4 bg-gray-100 rounded-xl cursor-pointer\"\n                          >\n                              <!-- Federation Header -->\n                              <div class=\"flex items-center justify-between\"\n                                  @click=\"toggleAccordion(federation.id)\">\n                                  <div class=\"flex items-center\">\n                                      <!-- Federation Logo -->\n                                      <div class=\"mr-8\">\n                                          <img v-if=\"federation.profile_photo_path\" :src=\"'/storage/' + federation.profile_photo_path\" alt=\"Logo\"\n                                              class=\"h-16 w-16 rounded-full object-cover\"/>\n                                          <div v-else\n                                              class=\"h-16 w-16 bg-gray-300 rounded-full flex items-center justify-center text-gray-600\">\n                                              <span>{{ federation.name.charAt(0) }}</span>\n                                          </div>\n                                      </div>\n\n                                      <!-- Federation Info -->\n                                      <div>\n                                          <p class=\"font-semibold text-lg text-gray-700\">{{ federation.name }}</p>\n                                      </div>\n                                  </div>\n\n                                  <!-- Expand/Collapse Icon -->\n                                  <div>\n                                      <i v-if=\"expandedFederationId === federation.id\"\n                                        class=\"fas fa-chevron-up\"></i>\n                                      <i v-else class=\"fas fa-chevron-down text-gray-700\"></i>\n                                  </div>\n                              </div>\n\n                              <!-- Accordion Content: Federation's Events -->\n                              <div v-if=\"expandedFederationId === federation.id\"\n                                  class=\"mt-4 bg-gray-50 p-4 rounded-lg\">\n                                  <h4 class=\"font-semibold text-md mb-2 text-black\">Activități</h4>\n                                  <div v-if=\"federation.events && federation.events.length\" >\n                                      <div v-for=\"event in federation.events\" class=\"flex items-center py-4\">\n                                          <div class=\"mr-8 flex justify-center h-full items-center\">\n                                              <div class=\"min-w-32 text-center\">\n                                                  <img v-if=\"event.image\" @error=\"showPlaceholderImg($event)\" class=\"max-h-32 max-w-32\"\n                                                      :src=\"'/storage/' + event.image\" alt=\"Event Image\"/>\n                                                  <i v-else class=\"fal fa-image text-gray-300 text-6xl\"></i>\n                                              </div>\n                                          </div>\n                                          <div>\n                                              <p class=\"font-semibold text-gray-700\">{{ event.name }}</p>\n                                              <p class=\"text-sm text-gray-400 py-3\"\n                                                v-html=\"event.description\"></p>\n                                              <div class=\"flex\">\n                                                  <p class=\"text-sm text-gray-600 mr-8\">\n                                                      <i class=\"fal fa-people w-6\"></i>\n                                                      {{ event.participant_count }}\n                                                  </p>\n                                                  <p class=\"text-sm text-gray-600\">\n                                                      <i class=\"fal fa-calendar w-6\"></i>\n                                                      {{ $moment(event.date_start).format('DD MMM YYYY HH:mm') }}\n                                                  </p>\n                                              </div>\n                                          </div>\n                                      </div>\n                                  </div>\n                                  <div v-else>\n                                      <p class=\"text-gray-500\">Nu există activități disponibile.</p>\n                                  </div>\n                              </div>\n                          </div>\n                      </div>\n\n                      <!-- No federations found -->\n                      <div v-else>\n                          <p class=\"text-gray-500\">Nu s-au găsit parteneri.</p>\n                      </div>\n                  </div>\n              </div>\n          </div>\n      </div>\n    </section>\n\n    <section id=\"unde\" class=\"bg-white-100\">\n      <iframe\n        src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.798874677599!2d26.149959712028245!3d44.43728770124616!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1f932b120b96b%3A0x53a7021f11d624a4!2zQXJlbmEgTmHIm2lvbmFsxIM!5e0!3m2!1sro!2sro!4v1726756124967!5m2!1sro!2sro\"\n        width=\"100%\"\n        height=\"400px\"\n        style=\"border:0;\"\n        allowfullscreen=\"\"\n        loading=\"lazy\"\n        referrerpolicy=\"no-referrer-when-downgrade\"\n      ></iframe>\n\n    </section>\n\n\n    <!-- Footer -->\n    <footer class=\"bg-gray-800 text-white py-10 secondary-background\">\n      <div class=\"container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl\">\n\n        <div class=\"logouri\">\n          <img src=\"/img/ce.png\" alt=\"Logo 1\" class=\"mb-4\">\n          <img src=\"/img/GOV1.png\" alt=\"Logo 2\">\n        </div>\n\n\n        <div>\n          <ul>\n            <li><a href=\"/terms-of-service\" class=\"hover:underline\">GDPR</a></li>\n            <li><a href=\"/privacy-policy\" class=\"hover:underline\">Confidențialitatea datelor</a></li>\n          </ul>\n        </div>\n\n\n        <div>\n          <p>Telefon: +40 123 456 789</p>\n          <p>Email: comunicare@sport.gov.ro</p>\n          <p>Adresă: Str. Vasile Conta 16, București</p>\n        </div>\n      </div>\n    </footer>\n\n  </div>\n</template>\n"],"names":["props","__props","searchQuery","ref","filteredFederations","computed","federation","expandedFederationId","toggleAccordion","federationId","showPlaceholderImg","event","e","i"],"mappings":"+mEAOA,MAAMA,EAAQC,EAeRC,EAAcC,EAAI,EAAE,EAGpBC,EAAsBC,EAAS,IAC5BH,EAAY,MACVF,EAAM,YAAY,OAAOM,GAC5BA,EAAW,KAAK,YAAa,EAAC,SAASJ,EAAY,MAAM,aAAa,CAC9E,EAHmCF,EAAM,WAIxC,EAGKO,EAAuBJ,EAAI,IAAI,EAG/BK,EAAmBC,GAAiB,CACtCF,EAAqB,MAASA,EAAqB,QAAUE,EAAgB,KAAOA,CACxF,EAEMC,EAAsBC,GAAU,CAElC,IAAIC,EAAID,EAAM,OACVE,EAAI,SAAS,cAAc,GAAG,EAClCA,EAAE,UAAU,IAAI,MAAO,WAAY,gBAAiB,UAAU,EAC9DD,EAAE,YAAYC,CAAC,CAEnB"}