@extends('frontend.maintemplate.maintemplate')
@section('title', 'Workshop Checkout' . ' :: AgeLess Institute')

@section('content')

    <style>
        .error-message {
            color: red;
            /* Make text red */
            font-size: 0.875em;
            /* Slightly smaller font */
            margin-top: 5px;
            /* Add some space above the error message */
        }

        /* .checkout-section-wrapper .checkout-inner .checkout-right .coupon-apply-wrapper button {
                            width: 100%;
                        } */

        .submit_btn:hover {
            background-color: transparent;
            color: #3a6a59;
        }

        .submit_btn {
            width: 100%;
            border-radius: 10px;
            text-align: center;
            font-size: 18px;
            margin-top: 15px;
            font-weight: 500;
            color: #e1f0e9;
            background-color: #3a6a59;
            border: 1px solid #3a6a59;
            padding: 14px 15px;
            transition: 0.3s ease-in-out;
        }

        .form-group {
            margin-bottom: 15px;
            position: relative;
        }

        .form-group label {
            text-align: left;
            display: block;
            padding-left: 15px;
            font-size: 22px;
            font-weight: 500;
            color: #3A6A59;
            margin-bottom: 8px;
        }

        .form-group select {
            background-color: #F7F7F7;
            border-radius: 40px;
            font-size: 22px;
            font-weight: 500;
            color: #3C705E;
            padding: 12px;
            border: 1px solid transparent;
            padding-right: 20px;
            -webkit-appearance: none;
            appearance: none;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23666d81' d='M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z'/%3E%3C/svg%3E") right 1rem center / 40px 15px no-repeat;
            background-position: right;
            background-color: #F7F7F7;
        }

        .form-group select:focus {
            border-color: #3C705E;
            outline: none;
            box-shadow: none;
        }
    </style>

    <!-- Checkout Section  -->
    <div class="cart-section-wrapper">
        <div class="container-fluid">
            <form action="{{ route('register.workshop') }}" method="POST" id="checkin_form" novalidate="novalidate">
                @csrf
                <input type="hidden" name="workshop_id" value="{{ $workshop->id }}">
                <div class="cart-section-inner-container">
                    <div class="cart-section-inner">
                        <div class="title-wrapepr">
                            <h4>Checkout</h4>
                        </div>
                        <div class="cart-inner-wrapepr">
                            <div class="left-section">
                                <div class="items-wrapper">
                                    <div class="items-box">
                                        <div class="name-details-box-wrapper">
                                            <div class="image-box">
                                                <img src="{{ asset('storage/' . $workshop->thumbnail_image) }}"
                                                    alt="">
                                            </div>
                                            <div class="name-details-box">
                                                <h5>{{ $workshop->title }}</h5>
                                                <h6>{{ \Carbon\Carbon::parse($workshop->start_date)->format('d M Y') }}</h6>
                                                <h6>{{ \Carbon\Carbon::parse($workshop->start_time)->format('h:i A') }} -
                                                    {{ \Carbon\Carbon::parse($workshop->end_time)->format('h:i A') }}</h6>
                                            </div>
                                        </div>
                                        <div class="price-remove-deletion-wrapper">
                                            <div class="price-wrapper">
                                                <h5>₹{{ number_format($workshop->discount_price ? $workshop->discount_price : $workshop->price, 0, '.', ',') }}
                                                </h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="right-section">
                                <div class="order-title-wrapper">
                                    <h6>Order Summary</h6>
                                </div>
                                <div class="order-details-box-wrapper">

                                    <h5>Total Price:
                                        <span>₹{{ number_format($workshop->discount_price ? $workshop->discount_price : $workshop->price, 0, '.', ',') }}</span>
                                    </h5>
                                    <h6>Total:
                                        <span>₹{{ number_format($workshop->discount_price ? $workshop->discount_price : $workshop->price, 0, '.', ',') }}</span>
                                    </h6>
                                </div>

                                @if(session('success') || session('error'))
                                    <p id="form-message" style="color: {{ session('success') ? 'green' : 'red' }}; font-weight: 500; padding-top: 10px;text-align: center">
                                        {{ session('success') ?? session('error') }}
                                    </p>
                                @endif

                                <div class="checkout-button-wrapper">
                                    <button class="checkout_btn">Complete Purchase</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Checkout Section  -->

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const formMessage = document.getElementById('form-message');
            if (formMessage) {

                setTimeout(() => {
                    formMessage.style.display = 'none';
                }, 5000);
            }
        });
    </script>

@endsection