{"version":3,"file":"Show-BHM5KqvA.js","sources":["../../../resources/js/pages/Events/Show.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport PublicLayout from \"@/layouts/PublicLayout.vue\";\nimport { useForm } from \"@/composables\";\nimport Banner from \"./Partials/Banner.vue\";\nimport { router } from \"@inertiajs/vue3\";\nimport { watch } from \"vue\";\nimport { cn } from \"@/lib/utils\";\nimport { computed } from \"vue\";\n\ndefineOptions({ layout: PublicLayout });\n\ninterface PageProps {\n  event: App.Domain.Events.Http.Resources.EventResource & { fields: any[] };\n  places: App.Domain.Events.Http.Resources.PlaceResource[];\n  vehicles: App.Domain.Events.Http.Resources.VehicleResource[];\n  data: App.Domain.Events.Http.Requests.BookingStoreRequest;\n  tickets: any[];\n  countries: any;\n  hours: any[];\n  days: any[];\n  filters: any;\n  privacy: any;\n  terms: any;\n  hasCoupons: boolean\n}\n\nlet scale = 0.75;\n\nconst props = defineProps<PageProps>();\n\nconst form = useForm<any>(\"post\", route(\"events.bookings.store\", props.event), {\n  ...props.data,\n});\n\nwatch(\n  () => form.placeId,\n  () =>\n    router.reload({\n      data: { placeId: form.placeId },\n    })\n);\n\nwatch(\n  () => form.vehicleId,\n  () =>\n    router.reload({\n      data: { vehicleId: form.vehicleId },\n    })\n);\n\nfunction selectAvailability(disp) {\n  if (isFull(disp) || disp.type != \"online\") return;\n\n  if (form.spot == disp.id) {\n    form.spot = null;\n  } else {\n    form.spot = disp.id;\n  }\n}\n\nfunction isFull(disp) {\n  return bookCount(disp) >= disp.capacity;\n}\n\nfunction bookCount(disp) {\n  return disp.booked + (form.spot == disp.id ? 1 : 0);\n}\n\nconst currentTicket = computed(() => props.tickets.find((t) => t.id == form.ticketId));\n</script>\n\n<template>\n  <Banner\n    :title=\"event.name\"\n    :image=\"event.banner_url\"\n    :payoff=\"event.payoff\"\n  />\n\n  <div class=\"w-full max-w-7xl mx-auto pt-8 flex flex-col gap-8\">\n    <div class=\"\">\n      <Card class=\"w-full px-10 py-6 md:px-16 shadow-none border-none\">\n        <div\n          class=\"prose max-w-none\"\n          v-html=\"event.description\"\n        ></div>\n      </Card>\n    </div>\n  </div>\n\n  <div\n    v-if=\"!event.bookable\"\n    class=\"w-full max-w-7xl mx-auto p-6 md:px-10 flex flex-col gap-8\"\n  >\n    <div>\n      <Card class=\"shadow-none border-none text-lg p-4\"> Evento chiuso - non si accettano più iscrizioni. </Card>\n    </div>\n  </div>\n\n  <div\n    v-else\n    class=\"w-full max-w-7xl mx-auto p-6 md:px-10 flex flex-col gap-8\"\n  >\n    <Form\n      @submit=\"form.submit()\"\n      class=\"flex flex-col gap-8\"\n    >\n      <div\n        class=\"px-6\"\n        v-if=\"places.length > 0\"\n      >\n        <p class=\"font-semibold mb-4\">Seleziona il luogo</p>\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4\">\n          <button\n            v-for=\"place in places\"\n            :key=\"place.id\"\n            :value=\"`${place.id}`\"\n            @click=\"form.placeId = place.id\"\n            class=\"border rounded text-sm text-left border-gray-200 w-full p-2\"\n            :class=\"{ 'bg-skin-button text-skin-base': form.placeId == place.id }\"\n            type=\"button\"\n          >\n            <span class=\"text-base font-medium\">{{ place.name }}</span><br>\n            {{ [place.address, place.zip, place.city].join(\", \") }}\n          </button>\n        </div>\n      </div>\n\n      <div\n        class=\"px-6\"\n        v-if=\"tickets.length > 0\"\n      >\n        <p class=\"font-semibold mb-4 text-lg\">Seleziona</p>\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4\">\n          <button\n            v-for=\"ticket in tickets\"\n            :key=\"ticket.id\"\n            :value=\"`${ticket.id}`\"\n            @click=\"form.ticketId = ticket.id\"\n            class=\"border rounded text-sm text-left border-gray-200 w-full p-2 flex flex-col\"\n            :class=\"{ 'bg-skin-button text-skin-base': form.ticketId == ticket.id }\"\n            type=\"button\"\n          >\n            <strong class=\"mb-2\">{{ ticket.name }}</strong>\n            <strong class=\"mb-2\">{{ ticket.price }}</strong>\n            <div class=\"prose prose-sm\"v-html=\"ticket.description\"></div>\n          </button>\n        </div>\n      </div>\n\n      <div\n        v-if=\"currentTicket && currentTicket.fields.length > 0\"\n        class=\"px-6 flex flex-col gap-4\"\n      >\n        <p class=\"font-semibold mb-4 text-lg\">Compila</p>\n        <FormInput\n          v-for=\"field in currentTicket.fields\"\n          :label=\"field.name\"\n        >\n          <template v-if=\"field.type == 'DropdownField'\">\n            <select\n              v-model=\"form.fields[field.handle]\"\n              :required=\"field.required\"\n              :class=\"cn('flex h-10 w-full rounded-md border border-zinc-200 bg-white pl-3 pr-8 py-2 sm:text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus disabled:cursor-not-allowed disabled:opacity-50')\"\n            >\n              <option\n                v-for=\"option in field.options\"\n                :key=\"option.handle\"\n                :value=\"option.handle\"\n              >\n                {{ option.label }}\n              </option>\n            </select>\n          </template>\n          <template v-if=\"field.type == 'TextField'\">\n            <Input\n              :required=\"field.required\"\n              v-model=\"form.fields[field.handle]\"\n            />\n          </template>\n        </FormInput>\n      </div>\n\n      <div\n        class=\"px-6\"\n        v-if=\"vehicles.length > 0\"\n      >\n        <p class=\"font-semibold mb-4\">Seleziona un modello</p>\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4\">\n          <button\n            v-for=\"vehicle in vehicles\"\n            :key=\"vehicle.id\"\n            :value=\"`${vehicle.id}`\"\n            @click=\"\n              () => {\n                form.spot = null;\n                form.vehicleId = vehicle.id;\n              }\n            \"\n            class=\"border rounded text-sm border-gray-200 w-full p-2 flex justify-between\"\n            :class=\"{ 'bg-skin-button text-skin-base': form.vehicleId == vehicle.id }\"\n            type=\"button\"\n          >\n            {{ vehicle.name }}\n          </button>\n        </div>\n      </div>\n\n      <div v-if=\"event.type != 'registration' && days.length > 0\">\n        <div class=\"mt-5 flex w-full h-full overflow-x-auto overflow-y-hidden divide-x\">\n          <div class=\"flex flex-col w-12 pl-4 sm:pl-0 mr-2 sm:mr-0\">\n            <div class=\"h-8 mb-2\"></div>\n            <div\n              v-for=\"hour in hours\"\n              class=\"flex flex-shirnk-0 min-h-[45px] text-gray-800 items-start justify-center space-x-2 relative\"\n            >\n              <div class=\"text-sm pr-1 transform text-gray-400 -translate-y-1/2 bg-white\">\n                {{ hour.name }}\n              </div>\n            </div>\n          </div>\n          <div\n            v-for=\"day in days.filter((d) => !d.booked >= d.capacity)\"\n            class=\"flex flex-col w-full min-w-[calc(100vw-100px)] sm:min-w-72 max-w-96 px-2\"\n          >\n            <h2 class=\"text-sm text-accent font-semibold border-b border-accent mb-2\">\n              {{ day.name }} {{ \" \" }}<span class=\"text-gray-500 font-normal\">{{ day.capacity ? ` | ${day.capacity} posto disponibile` : \"\" }}</span>\n            </h2>\n            <div class=\"relative\">\n              <div\n                v-for=\"hour in hours\"\n                class=\"absolute bg-gray-100 h-px inset-x-0\"\n                :style=\"`top: calc(60px * ${hour.calc * scale})`\"\n              ></div>\n              <button\n                v-for=\"disp in day.spots\"\n                class=\"border rounded text-sm border-gray-200 w-full absolute items-center inset-x-0 p-2 flex justify-between flex-1\"\n                :style=\"`height: ${disp.style.height * scale}px;top: ${disp.style.top * scale}px`\"\n                @click=\"selectAvailability(disp)\"\n                type=\"button\"\n                :class=\"{ 'bg-gray-100 text-gray-600 cursor-not-allowed': isFull(disp), 'bg-white': !isFull(disp) }\"\n              >\n                <template v-if=\"disp.type == 'online'\">\n                  <div class=\"flex items-center justify-start gap-2\">\n                    <input\n                      type=\"radio\"\n                      v-if=\"form.spot == disp.id || !isFull(disp)\"\n                      :checked=\"form.spot == disp.id\"\n                      class=\"accent-accent\"\n                    />\n                    <div>{{ disp.name }} {{ isFull(disp) ? \" | completo\" : \" | libero\" }}</div>\n                  </div>\n                  <div\n                    v-if=\"!day.capacity\"\n                    class=\"whitespace-nowrap text-gray-500 tabular-nums\"\n                  >\n                    <span>{{ bookCount(disp) }}/{{ disp.capacity }}</span>\n                  </div>\n                </template>\n                <template v-else-if=\"disp.type == 'offline'\">\n                  <div class=\"flex items-center justify-start gap-2\">\n                    <Icon\n                      name=\"MapPin\"\n                      class=\"size-4 -mx-[2px] text-gray-500 stroke-[1.5px]\"\n                    />\n                    <div>{{ disp.name }} {{ \" | Solo offline presso l'evento\" }}</div>\n                  </div>\n                  <div></div>\n                </template>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"hasCoupons\"\n        class=\"px-6\"\n      >\n        <div class=\"mb-4\">\n          <h3 class=\"font-semibold text-lg\">Hai un codice sconto?</h3>\n          <p v-if=\"event.coupon_description\">{{ event.coupon_description }}</p>\n        </div>\n        <FormInput label=\"Coupon\" :errors=\"form.errors.coupon\">\n          <Input\n            v-model=\"form.coupon\"\n            type=\"text\"\n            placeholder=\"Codice...\"\n          />\n        </FormInput>\n      </div>\n\n      <Card class=\"shadow-none border-none pt-0\">\n        <CardHeader class=\"text-lg pt-0 font-semibold\">Iscriviti</CardHeader>\n        <CardDescription>\n          <ErrorMessage />\n        </CardDescription>\n        <CardContent>\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <FormInput\n              label=\"Nome\"\n              :errors=\"form.errors['customer.first_name']\"\n            >\n              <Input\n                placeholder=\"Mario..\"\n                v-model=\"form.customer.first_name\"\n                @change=\"form.validate('customer.first_name')\"\n                autocomplete=\"given-name\"\n              />\n            </FormInput>\n            <FormInput\n              label=\"Cognome\"\n              :errors=\"form.errors['customer.last_name']\"\n            >\n              <Input\n                placeholder=\"Rossi...\"\n                v-model=\"form.customer.last_name\"\n                @change=\"form.validate('customer.last_name')\"\n                autocomplete=\"family-name\"\n              />\n            </FormInput>\n            <FormInput\n              label=\"Email\"\n              :errors=\"form.errors['customer.email']\"\n            >\n              <Input\n                placeholder=\"mario.rossi@example.com\"\n                v-model=\"form.customer.email\"\n                @change=\"form.validate('customer.email')\"\n                autocomplete=\"email\"\n              />\n            </FormInput>\n            <FormInput\n              label=\"Telefono\"\n              :errors=\"form.errors['customer.phone']\"\n            >\n              <Input\n                placeholder=\"+39\"\n                v-model=\"form.customer.phone\"\n                @change=\"form.validate('customer.phone')\"\n                autocomplete=\"phone\"\n              />\n            </FormInput>\n            <FormInput\n              label=\"Paese\"\n              :errors=\"form.errors['customer.state']\"\n            >\n              <select\n                v-model=\"form.customer.state\"\n                @change=\"form.validate('customer.state')\"\n                placeholder=\"Seleziona un paese\"\n                :class=\"cn('flex h-10 w-full rounded-md border border-zinc-200 bg-white pl-3 pr-8 py-2 sm:text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus disabled:cursor-not-allowed disabled:opacity-50')\"\n              >\n                <option\n                  v-for=\"country in countries\"\n                  :value=\"country.name\"\n                >\n                  {{ country.name }}\n                </option>\n              </select>\n            </FormInput>\n            <FormInput\n              label=\"CAP\"\n              :errors=\"form.errors['customer.zip']\"\n            >\n              <Input\n                placeholder=\"\"\n                v-model=\"form.customer.zip\"\n                @change=\"form.validate('customer.zip')\"\n              />\n            </FormInput>\n          </div>\n          <div\n            v-if=\"event.fields.length > 0\"\n            class=\"mt-4\"\n          >\n            <FormInput\n              v-for=\"field in event.fields\"\n              :label=\"field.name\"\n            >\n              <template v-if=\"field.type == 'DropdownField'\">\n                <select\n                  v-model=\"form.fields[field.handle]\"\n                  :required=\"field.required\"\n                  :class=\"cn('flex h-10 w-full rounded-md border border-zinc-200 bg-white pl-3 pr-8 py-2 sm:text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus disabled:cursor-not-allowed disabled:opacity-50')\"\n                >\n                  <option\n                    v-for=\"option in field.options\"\n                    :key=\"option.handle\"\n                    :value=\"option.handle\"\n                  >\n                    {{ option.label }}\n                  </option>\n                </select>\n              </template>\n            </FormInput>\n          </div>\n          <div class=\"mt-4\">\n            <FormInput\n              label=\"Ho letto e accetto le condizioni generali per la privacy.\"\n              :after=\"true\"\n              :inline=\"true\"\n              :errors=\"form.errors.privacy\"\n            >\n              <Checkbox\n                v-model=\"form.privacy\"\n                @change=\"form.validate('privacy')\"\n              />\n            </FormInput>\n            <div class=\"text-sm text-gray-700\">\n              <a\n                target=\"_blank\"\n                :href=\"privacy\"\n                class=\"text-blue-600 underline\"\n                >Informativa Privacy e Condizioni di Trattamento dei Dati.</a\n              >\n              <p>{{ terms }}</p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card class=\"shadow-none border-none\">\n        <CardContent>\n          <Button\n            variant=\"accent\"\n            type=\"submit\"\n            :disabled=\"form.processing\"\n            size=\"lg\"\n          >\n            Invia\n          </Button>\n        </CardContent>\n      </Card>\n    </Form>\n  </div>\n</template>\n\n\n<style>\n.prose  div[data-youtube-video] {\n  position: relative;\n  padding-bottom: 56.25%;\n  height: 0;\n  overflow: hidden;\n  max-width: 100%;\n  margin: 0 auto;\n\n  iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n</style>\n"],"names":["scale","props","__props","form","useForm","watch","router","selectAvailability","disp","isFull","bookCount","currentTicket","computed","t"],"mappings":"utHA0BA,IAAIA,EAAQ,IAEZ,MAAMC,EAAQC,EAERC,EAAOC,GAAa,OAAQ,MAAM,wBAAyBH,EAAM,KAAK,EAAG,CAC7E,GAAGA,EAAM,IAAA,CACV,EAEDI,EACE,IAAMF,EAAK,QACX,IACEG,EAAO,OAAO,CACZ,KAAM,CAAE,QAASH,EAAK,OAAQ,CAAA,CAC/B,CAAA,EAGLE,EACE,IAAMF,EAAK,UACX,IACEG,EAAO,OAAO,CACZ,KAAM,CAAE,UAAWH,EAAK,SAAU,CAAA,CACnC,CAAA,EAGL,SAASI,EAAmBC,EAAM,CAC5BC,EAAOD,CAAI,GAAKA,EAAK,MAAQ,WAE7BL,EAAK,MAAQK,EAAK,GACpBL,EAAK,KAAO,KAEZA,EAAK,KAAOK,EAAK,GAErB,CAEA,SAASC,EAAOD,EAAM,CACb,OAAAE,EAAUF,CAAI,GAAKA,EAAK,QACjC,CAEA,SAASE,EAAUF,EAAM,CACvB,OAAOA,EAAK,QAAUL,EAAK,MAAQK,EAAK,GAAK,EAAI,EACnD,CAEA,MAAMG,EAAgBC,EAAS,IAAMX,EAAM,QAAQ,KAAMY,GAAMA,EAAE,IAAMV,EAAK,QAAQ,CAAC"}