@extends('layouts.app')

@section('title', 'Workshops Register')
@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .datepicker-dropdown {
        z-index: 9999 !important;
    }
</style>
@endsection
@section('content')

<div class="col-md-11 m-auto">
    @include('includes.alerts')
    <div class="justify-content-center align-items-center">

        <div class="col-md-12 text-center mobile-space mt-4">
            <h4 class="mb-3"><b>WORKSHOP DETAILS</b></h4>
        </div>
    <div class="row mt-5">
        <!-- Workshop Details Section -->
        <div class="col-md-6">
            <div class="card shadow-lg border-0 rounded-3">
                <div class="">
                    <p><strong>Title:</strong> {{ $workshop->title }}</p>

                    <p><strong>Instructor:</strong> {{ $workshop->instructor }}</p>
                    <p><strong>Workshop Date:</strong> {{ \Carbon\Carbon::parse($workshop->workshop_date)->format('F j, Y') }}</p>
                    <p><strong>Workshop Time:</strong> {{ $workshop->workshop_time }}</p>
                    <p><strong>Price:</strong>
                        {{ $workshop->price ? '$' . number_format($workshop->price, 2) : 'Free' }}
                    </p>
                    <p><strong>Description:</strong> {{ $workshop->description }}</p>
                </div>
            </div>
        </div>

        <!-- Registration Form Section -->
        <div class="col-md-6">
            <div class="grey-back m-auto book-responsive col-md-12">
                <div class="card-body">
                    <h5 class="text-center mb-4"><b>Register for Workshop</b></h5>

                    <form id="registerForm" action="{{ route('user-workshop.register') }}" method="POST">
                        @csrf
                        <input type="hidden" name="workshop_id" value="{{ $workshop->id }}">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group position-relative">
                                    <label><strong>Name </strong> <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"
                                        name="name" id="name">
                                </div>

                                <div class="form-group position-relative ">
                                    <label><strong>E-Mail</strong> <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 "
                                        name="email" id="email" placeholder="">
                                </div>

                                <div class="form-group position-relative ">
                                    <label><strong>Phone Number</strong> <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 "
                                        name="phone_number" id="phone_number" placeholder="">
                                </div>

                                <div class="form-group position-relative">
                                    <label><strong>Age</strong> <span class="text-danger">*</span></label>
                                    <input type="text"
                                        class="form-control mt-2 border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3"
                                        name="age" id="age" placeholder="mm-dd-yyyy" autocomplete="off">
                                </div>

                                <div class="">
                                    <div class="language">
                                        <div class="">
                                            <label><strong>Gender at Birth</strong> <span class="text-danger">*</span></label><br></br>
                                            <label class="Radio">
                                                <input class="Radio-input u-hiddenVisually" value="male" name="gender"
                                                    id="gender" type="radio">
                                                <span class="Radio-label text-white">Male</span>
                                            </label>
                                            <label class="Radio">
                                                <input class="Radio-input u-hiddenVisually" name="gender" value="female"
                                                    name="gender" id="gender" type="radio">
                                                <span class="Radio-label text-white">Female</span>
                                            </label>
                                        </div>
                                    </div>
                                    <label id="gender-error" class="error" for="gender"></label>
                                </div>

                                <div class="form-group position-relative mb-4 mt-1">
                                    <label for="description"><strong><b>Additional Notes</b></strong></label>
                                    <textarea class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3"
                                        id="description" name="description" rows="4"></textarea>
                                </div>

                            </div>
                        </div>

                        <div class=" text-center mt-2">
                            <button type="submit"
                                class="btn btn-block shadow border-0 py-2 m-auto border-radius">Submit</button>
                        </div>
                    </form>
                </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-register.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
@endsection