@extends('layouts.app')

@section('title', 'workshop')
@section('styles')
@endsection
@section('content')
    <div class="col-md-12 pl-5 pr-5 pad-off m-auto">
        @include('includes.alerts')
        <div class="d-flex flex-wrap mobile-space pt-3 container">
            <div class="col-md-8 col-sm-12">

                <h3><strong>{{ $pageContent->workshop_title }}</strong> </h3>
                {{--  <div class="repeat-comment pr-3">
                    @foreach ($workshops as $workshop)
                        @if (\Carbon\Carbon::parse($workshop->workshop_date)->isFuture())
                            <div class="workshop-item">
                                <h4>{{ $workshop->title }}</h4>
                                <h4 class="mb-5"><strong>DATE</strong>:
                                    {{ \Carbon\Carbon::parse($workshop->workshop_date)->format('F j, Y') }}</h4>
                                <p class="mb-5">{{ $workshop->description }}</p>

                                <!-- Display the price -->
                                @if ($workshop->price)
                                    <p><strong>Price:</strong> ${{ number_format($workshop->price, 2) }}</p>
                                @else
                                    <p><strong>Price:</strong> Free</p>
                                @endif

                                <!-- Display dynamic form fields if available -->
                                @if ($workshop->form_fields)
                                    @php
                                        $formFields = json_decode($workshop->form_fields, true);
                                    @endphp
                                    <h3><strong>Register Now</strong> </h3>
                                    <form class="col-md-12 pad-off workshop-form-left mt-5"
                                        action="{{ route('talent-workshop.add') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="workshop_id" value="{{ $workshop->id }}">
                                        @foreach ($formFields as $field)
                                            <div class="form-group mb-3">
                                                <label>{{ $field['label'] ?? 'Field' }}</label>
                                                @if ($field['type'] == 'text')
                                                    <input type="text"
                                                        class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white"
                                                        name="form_fields[{{ $field['label'] }}]" placeholder="">
                                                @elseif($field['type'] == 'email')
                                                    <input type="email"
                                                        class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white"
                                                        name="form_fields[{{ $field['label'] }}]" placeholder="">
                                                @elseif($field['type'] == 'textarea')
                                                    <textarea class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white"
                                                        name="form_fields[{{ $field['label'] }}]" placeholder=""></textarea>
                                                @elseif($field['type'] == 'select')
                                                    <select
                                                        class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white option-box"
                                                        name="form_fields[{{ $field['label'] }}]">
                                                        <option value="">-- Select --</option>
                                                        @foreach (explode(',', $field['options']) as $option)
                                                            <option value="{{ $option }}">
                                                                {{ ucfirst(trim($option)) }}</option>
                                                        @endforeach
                                                    </select>
                                                @endif
                                            </div>
                                        @endforeach
                                        @if ($workshop->price > 0)
                                            <!-- "Pay Now" button for paid workshops -->
                                            <button type="submit"
                                                class="btn-block shadow border-0 text-uppercase col-md-4 m-auto pt-2 pb-2 back-red-button border-radius-7">Register
                                                & Pay Now</button>
                                        @else
                                            <!-- "Submit" button for free workshops -->
                                            <button type="submit"
                                                class="btn-block shadow border-0 text-uppercase col-md-4 m-auto pt-2 pb-2 back-red-button border-radius-7">Register</button>
                                        @endif
                                    </form>
                                @endif

                            </div>
                        @endif
                    @endforeach
                </div>  --}}








                <div class="repeat-comment pr-3">
                    @php
                        $upcomingWorkshops = $workshops->filter(function ($workshop) {
                            return \Carbon\Carbon::parse($workshop->workshop_date)->isFuture();
                        });
                    @endphp

                    @if ($upcomingWorkshops->isNotEmpty())
                        @foreach ($upcomingWorkshops as $workshop)
                            <div class="workshop-item ">
                                <p class="mt-4"><strong>Title: </strong>{{ $workshop->title }}</p>
                                <p><strong>Instructor: </strong>{{ $workshop->instructor }}</p>
                                <p class=""><strong>Date</strong>:
                                    {{ \Carbon\Carbon::parse($workshop->workshop_date)->format('F j, Y') }}
                                </p>
                                <p><strong>Workshop Start Time: </strong>{{ $workshop->workshop_start_time ?? '-' }}</p>
                                <p><strong>Workshop End Time: </strong>{{ $workshop->workshop_end_time ?? '-'}}</p>
                                <div class="workshop-description">{!! $workshop->description !!}</div>

                                <!-- Display the price -->
                                <p><strong>Price:</strong>
                                    {{ $workshop->price ? '$' . number_format($workshop->price, 2) : 'Free' }}
                                </p>
                                <a href="{{ route('workshop.register', ['id' => $workshop->id]) }}" class="btn btn-dark mb-3">
                                    Register For Workshop
                                </a>
                                <!-- Display dynamic form fields if available -->
                            </div>
                        @endforeach
                    @else
                        <p class="text-white">Right now no workshops are available.</p>
                    @endif
                </div>


                <br>
                {{--  <p class="mb-3 text-16">{{ $pageContent->workshop_des1 }} <a href="{{ route('contact') }}"
                        class="text-black"><strong>{{ $pageContent->workshop_des_link_title1 }}</strong></a>
                </p>  --}}

                <p class="mb-3 text-16">{{ $pageContent->workshop_des2 }} <a class="text-black"
                        href="{{ $pageContent->workshop_des_link2 }}"
                        target="_blank"><strong>{{ $pageContent->workshop_des_link_title2 }}

                            {{--  <button type="button" data-toggle="modal" data-target="#workshop-form-modal" class="border-0" style="">Peak Acting Workshops</button>  --}}
                        </strong>
                    </a></p>
            </div>
            <div class="col-md-4 col-sm-12">
                <h3 class="mb-5"><strong>{{ $pageContent->contact_page_title }}</strong> </h3>
                <div class="d-flex align-items-center mb-5">
                    <i class='bx bx-location-plus text-22 icon-border p-2'></i>
                    <p class="m-0 text-16">
                        <strong>The Peack Agency Address</strong><br>
                        {{ $pageContent->contact_address }}
                    </p>
                </div>
                <div class="col-md-12 map-box p-0">
                    {!! $pageContent->contact_map_link !!}
                </div>
                {{--  <div class="col-md-12 p-0">
                    <h3 class=" mt-3"><strong>Follow & Like Us</strong> </h3>
                    <div class="col-md-12 d-flex p-0">
                        <a href="{{ $facebookLink }}" target="_blank" class="p-2 icon-border text-black"> <i
                                class='bx bxl-facebook text-22'></i></a>
                        <a href="{{ $twitterLink }}" target="_blank" class="p-2 icon-border text-black"> <i
                                class='bx bxl-twitter text-22'></i></a>
                        <a href="{{ $instagramLink }}" target="_blank" class="p-2 icon-border text-black"> <i
                                class='bx bxl-instagram text-22'></i></a>
                        <a href="{{ $youtubeLink }}" target="_blank" class="p-2 icon-border text-black"> <i
                                class='bx bxl-youtube text-22'></i></a>
                    </div>
                </div>  --}}
            </div>
        </div>

        <div class="d-flex flex-wrap col-md-12 ">
            <!-- change password Modal -->
            <div class="modal fade" id="workshop-form-modal" tabindex="-1" role="dialog"
                aria-labelledby="workshop-form-modalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Please provide info below to sign
                                up for our workshop mailing list.</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="workshop-form" action="{{ route('talent-workshop.add') }}" method="POST">
                                @csrf
                                <div class="form-group mb-5 col-md-12">
                                    <label><strong> Email Address</strong> <span style="color:red;">*</span></label>
                                    <input type="email"
                                        class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white"
                                        id="email" name="email" placeholder="">
                                </div>
                                <div class="form-group mb-5 col-md-12">
                                    <label for="first_name">First Name <span class="text-danger">*</span></label>
                                    <input type="text"
                                        class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white"
                                        id="first_name" name="first_name" placeholder="">
                                </div>
                                <div class="form-group mb-5 col-md-12">
                                    <label for="last_name">Last Name <span class="text-danger">*</span></label>
                                    <input type="text"
                                        class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white"
                                        id="last_name" name="last_name" placeholder="">
                                </div>
                                <div class="col-md-12">
                                    <button type="submit"
                                        class="btn-block shadow border-0 text-uppercase col-md-4 m-auto pt-2 pb-2 back-red-button border-radius-7">
                                        <strong class="text-18 text-white">Subscribe</strong>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
    <script src="{{ asset('assets/frontend/js/workshop.js') }}"></script>
@endsection