@extends('layouts.front-layout')
@section('title', 'Services Detail')
@section('content')

    <!-- INNER PAGE HERO SECTION -->
    <section class="innerpage-main w-100">
        <img
            src="{{$pageData['Services']['top_banner_image'] ? asset('upload/images/'.$pageData['Services']['top_banner_image']) : asset('upload/placeholder.png')}}"
            class="img-fluid zoomAnim w-100 h-100" alt="">
        <div class="innerpage-main__overlay">
            <div class="container">
                <h1>{{$get_our_service_detail->title ?? ''}}</h1>
            </div>
        </div>
    </section>

    <!-- !@INNER PAGE HERO SECTION -->
    <section class="statistics-section servDetails">
        <div class="container">
            {!! $decodedData ?? 'Data Not Found' !!}
        </div>
        @if($get_our_service_detail->title === 'Play Therapy')
            <div id="eventbrite-widget-container-870722944767">
                @endif
            </div>
    </section>
@endsection
<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function () {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        // Required
        widgetType: 'checkout',
        eventId: '870722944767',
        iframeContainerId: 'eventbrite-widget-container-870722944767',

        // Optional
        iframeContainerHeight: 425,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
        onOrderComplete: exampleCallback  // Method called when an order has successfully completed
    });
</script>