@extends('layouts.app')

@section('content')
    <section class="bg-white">
        <div class="container mx-auto mb-16 md:mb-0 md:p-4">

            <div class="flex items-center justify-between mb-6 py-4 max-w-[600px] mx-auto px-10 ">
                <!-- Step 1 -->
                <div class="flex flex-col items-center relative">
                    <div
                        class="w-6.5 h-6.5 bg-green-600 rounded-full flex items-center justify-center text-white font-semibold  text-sm">
                        1</div>
                    <p class="mt-2 text-xs md:text-sm text-center text-green-600 font-medium">অর্ডার কনফার্মেশন</p>
                </div>

                <!-- Line between steps -->
                <div class="flex-1 h-2 border-t border-slate-300 border-dashed relative -mt-4 z-0 -ml-[32px]"></div>

                <!-- Step 2 -->
                <div class="flex flex-col items-center relative">
                    <div
                        class="w-6.5 h-6.5 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 font-semibold text-sm ">
                        2</div>
                    <p class="mt-2 text-xs md:text-sm text-center">পেমেন্ট</p>
                </div>
            </div>



            <!-- Main Content -->
            <div class="flex flex-col-reverse md:flex-row md:gap-8 justify-around max-w-6xl mx-auto p-4">
                <!-- Left Column - Product Details -->
                <div class="md:w-[500px] mt-6 md:mt-0 space-y-6">
                    <div class="flex flex-col md:flex-row gap-4 items-center border p-3 border-slate-200 rounded shadow-sm">
                        <!-- Course Thumbnail -->
                        <img src="{{ asset($course->thumbnail_url) }}" alt="course-thumbnail"
                            class="rounded-lg aspect-video w-full md:max-w-[180px]" width="130" height="60"
                            loading="lazy">

                        <!-- Course Info -->
                        <div>
                            <h4 class="text-base font-semibold text-neutral line-clamp-1 ">
                                MERN Stack Web Development Career Path
                            </h4>
                            <p class="font-medium text-gray-500 text-base">
                                <del>৳ {{$course->original_price}}</del>
                                <span class="text-primary font-semibold ml-1">৳ {{$course->discounted_price}}</span>
                            </p>


                            <p class="text-gray-500 text-sm line-clamp-1 ">{{ $course->short_description }}</p>

                            <!-- Lessons / Assignments / Projects -->
                            <div class="flex flex-wrap gap-4 text-sm text-neutral-600 pt-2 ">
                                <div class="flex items-center gap-1">
                                    <svg class="w-4 h-4 text-blue-500" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 7v14"></path>
                                        <path
                                            d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z">
                                        </path>
                                    </svg>
                                    <span>{{ $course->total_enroll }} {{ __('text.class') }}</span>
                                </div>
                                <div class="flex items-center gap-1">
                                    <img src="{{ asset('assets/icons/video-player.svg') }}" alt="" class="w-4">
                                    <span>{{ $course->total_enroll }} {{ __('text.enrolled') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Additional Info Card -->
                    <div class="border rounded-xl p-5 border-blue-100 bg-blue-50">
                        <h3 class="font-medium text-blue-800 flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            গুরুত্বপূর্ণ তথ্য
                        </h3>
                        <p class="text-sm text-blue-700 mt-2">ক্রয়ের সঙ্গে সঙ্গে কোর্সটি ব্যবহার শুরু করতে পারবেন</p>
                    </div>
                </div>

                <!-- Right Column - Order Summary -->
                <div class="flex-1 md:max-w-[450px] space-y-4">
                    <form action="{{route('payment')}}" method="POST" class="border border-gray-200 rounded-lg p-5 md:p-6 bg-white shadow">
                        @csrf

                        <div class="flex flex-col gap-6">
                            <!-- Left (Summary) -->
                            <div class="space-y-4 order-2 md:order-1">
                                <div class="flex justify-between items-center">
                                    <h4 class="text-gray-600">{{ __('menu.course_fee') }}</h4>
                                    <h4 class="font-semibold text-base">৳{{ (int) $course->original_price }}</h4>
                                </div>
                                <div
                                    class="flex flex-col justify-between items-start sm:items-center pt-3 border-t border-dashed border-gray-300 gap-2">
                                    <div class="flex justify-between w-full">
                                        <h4 class="text-gray-600">{{ __('menu.course_discount') }}</h4>
                                        <h4 class="font-semibold text-[#E63C3C] text-base">
                                            -৳{{ (int) $course->original_price - $course->discounted_price }}
                                        </h4>
                                    </div>
                                    @if ($discountAmount != 0)
                                        <div class="flex justify-between w-full">
                                            <h4 class="text-gray-600">{{ __('menu.coupon_discount') }}</h4>
                                            <h4 class="font-semibold text-[#E63C3C] text-base">
                                                -৳{{ (int) $discountAmount }}</h4>
                                        </div>
                                    @endif
                                </div>

                                <div
                                    class="flex justify-between items-center text-lg font-bold pt-5 border-t border-gray-200">
                                    <h4 class="font-semibold">
                                        {{ __('menu.total') }}
                                        <span
                                            class="text-gray-600 font-normal text-sm">({{ __('menu.vat_included') }})</span>
                                    </h4>
                                    <h4 class="text-dark font-semibold text-2xl">
                                        ৳{{ $discountAmount == 0 ? (int) $course->discounted_price : (int) ($course->discounted_price - $discountAmount) }}
                                    </h4>
                                </div>
                            </div>

                            <!-- Right (Payment Options) -->
                            <div class="space-y-4 order-1 md:order-2">
                                <div class="flex justify-between items-center mb-4">
                                    <div class="text-sm font-semibold">{{ __('menu.select_payment_method') }}</div>
                                    <div
                                        class="text-[10px] font-semibold flex items-center bg-gray-100 rounded-full px-2 py-1">
                                        <span
                                            class="bg-[#1DAB55] flex justify-center items-center rounded-full p-1 mr-1 h-5 w-5">
                                            <img alt="" src="{{ asset('assets/icons/lock.svg') }}"
                                                class="w-full h-full object-contain">
                                        </span>
                                        <span>{{ __('menu.secure_payment') }}</span>
                                    </div>
                                </div>

                                <div class="flex flex-col gap-3">
                                    @foreach ($gateways as $gateway)
                                        <label class="w-full cursor-pointer flex justify-between">
                                            <div
                                                class="border border-gray-200 rounded-lg h-16 flex items-center px-3 justify-between w-full">
                                                <div class="flex items-center">
                                                    <input type="radio" id="bkash" name="payment"
                                                        class="h-4 !w-4 accent-green-600 cursor-pointer mr-3"
                                                        value="{{ $gateway->id }}"
                                                        {{ $gateway->id == 2 ? 'checked' : '' }}>
                                                    <span
                                                        class="font-bold text-sm ml-2">{{ $gateway->gateway_name }}</span>
                                                </div>
                                                <img src="{{ asset($gateway->image_url) }}"
                                                    alt="{{ $gateway->gateway_name }} Logo"
                                                    class="w-20 shadow flex-shrink-0 p-1 rounded object-cover">
                                            </div>
                                        </label>
                                    @endforeach
                                </div>

                                <div class="mt-3">
                                    <label for="iagree" class="flex gap-2 items-start">
                                        <input type="checkbox" id="iagree" name="iagree" required
                                            class="accent-green-600 mt-1 !w-6" checked>
                                        <p class="text-sm user-select-none text-black-50">
                                            {{ __('menu.agree_terms_privacy') }}
                                            <a class="underline text-black font-semibold"
                                                href="{{ route('terms.conditions') }}">{{ __('menu.terms_conditions') }}</a>
                                            &
                                            <a class="underline text-black font-semibold"
                                                href="{{ route('privacy.policy') }}">{{ __('menu.privacy_policy') }}</a>
                                            {{__('menu.agree_terms')}}
                                        </p>
                                    </label>
                                </div>
                            </div>
                        </div>

                           <input type="hidden" name="course_id" value="{{ $course->id }}">
                      <input type="hidden" name="coupon_id" value="{{ $coupon->id ?? '' }}">


                        <button type="submit" class="w-full mt-5 btn-primary rounded-md hidden md:block">
                            {{ __('menu.make_payment') }}
                        </button>


                        {{-- Mobile Device  --}}
                        <div
                            class="bg-white p-4 fixed z-20 w-full bottom-0 left-0 shadow-[0px_-8px_16px_0px_rgba(0,0,0,0.08)] border-t-2 border-dashed border-slate-200 md:hidden block">
                        
                            <div class="flex justify-around items-center">
                             
                                @php
                                    $courseDiscount = (int) ($course->original_price - $course->discounted_price);
                                @endphp
                                @if ($courseDiscount > 0)
                                    <div class="px-2 py-1 bg-green-50 text-green-600 text-sm rounded shadow">
                                        {{ __('menu.course_discount') }}: ৳{{ $courseDiscount }}
                                    </div>
                                @endif

                                <!-- Coupon Discount -->
                                @if ($discountAmount > 0)
                                    <div class="px-2 py-1 bg-blue-50 text-blue-600 text-sm rounded shadow">
                                        {{ __('menu.coupon_discount') }}: ৳{{ (int) $discountAmount }}
                                    </div>
                                @endif

                                <!-- You can keep a small optional element on the right if needed -->
                            </div>
                            <div class="flex just-between items-center gap-5">
                                <div class="inline-block text-3xl font-semibold" id="main_price_sm">
                                    ৳{{ $discountAmount == 0 ? (int) $course->discounted_price : (int) ($course->discounted_price - $discountAmount) }}
                                </div>
                                <!-- Pay Button (full width below price & discounts) -->
                                <button type="submit"
                                    class="block w-full mt-3.5 py-2.5 btn-primary text-center font-semibold"
                                    id="enroll_button_sm">
                                    {{ __('menu.make_payment') }}
                                </button>
                            </div>
                        </div>

                    </form>


                    <!-- Security Badge -->
                    <div class="flex items-center justify-center text-xs text-gray-500 mt-2">
                        <svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                            </path>
                        </svg>
                        নিরাপদ পেমেন্ট | ২৫৬-বিট SSL এনক্রিপশন
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection