@extends('layouts.app')

@section('content')
    <section class="bg-white">
        <div class="container mx-auto mb-16 md:mb-0 md:p-4">
            <!-- Header -->
            <div class="mb-4 mt-4 flex items-center cursor-pointer">
                <svg class="w-5 h-4" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M18.166 7.83349H4.32935L8.56435 2.74683C8.76238 2.50857 8.85765 2.20141 8.82921 1.89291C8.80076 1.58442 8.65094 1.29985 8.41268 1.10183C8.17443 0.903797 7.86727 0.808525 7.55877 0.836968C7.25027 0.865411 6.96571 1.01524 6.76768 1.25349L0.934349 8.25349C0.895103 8.30917 0.860008 8.36766 0.829349 8.42849C0.829349 8.48683 0.829349 8.52183 0.747682 8.58016C0.694802 8.71393 0.667114 8.85632 0.666016 9.00016C0.667114 9.144 0.694802 9.28639 0.747682 9.42016C0.747682 9.47849 0.747682 9.51349 0.829349 9.57183C0.860008 9.63266 0.895103 9.69115 0.934349 9.74683L6.76768 16.7468C6.87737 16.8785 7.01474 16.9844 7.17 17.057C7.32527 17.1296 7.49462 17.1671 7.66602 17.1668C7.93861 17.1674 8.20279 17.0724 8.41268 16.8985C8.53082 16.8006 8.62847 16.6803 8.70005 16.5445C8.77162 16.4088 8.81572 16.2603 8.82981 16.1075C8.8439 15.9547 8.8277 15.8006 8.78215 15.654C8.7366 15.5075 8.66258 15.3714 8.56435 15.2535L4.32935 10.1668H18.166C18.4754 10.1668 18.7722 10.0439 18.991 9.82512C19.2098 9.60632 19.3327 9.30958 19.3327 9.00016C19.3327 8.69074 19.2098 8.39399 18.991 8.1752C18.7722 7.95641 18.4754 7.83349 18.166 7.83349Z"
                        fill="#4B5563" />
                </svg>
                <h5 class="ml-2 text-xl font-medium">আমার কার্ট</h5>
            </div>

            <div class="flex items-center justify-between mb-6 md:py-4 max-w-[500px] mx-auto px-8">
                <!-- 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">
                        <img src="{{asset('assets/icons/green-tick.svg')}}" class="w-full h-full " alt=""></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-green-600 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-white rounded-full flex items-center justify-center text-gray-600 font-semibold text-sm ">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none" viewBox="0 0 26 26"><circle cx="13" cy="13" r="12" stroke="#1CAB55" stroke-width="2"></circle><path fill="#40A767" fill-rule="evenodd" d="M16.846 10.588h2.82C19.666 8.323 18.31 7 16.01 7H9.99c-2.3 0-3.657 1.323-3.657 3.56v4.881c0 2.236 1.357 3.56 3.656 3.56h6.021c2.3 0 3.656-1.324 3.656-3.56v-.208h-2.82c-1.31 0-2.37-1.034-2.37-2.31 0-1.277 1.06-2.312 2.37-2.312v-.023zm0 .994h2.323c.275 0 .498.217.498.485v1.687a.498.498 0 01-.498.486h-2.27a1.404 1.404 0 01-1.392-1.063c-.076-.391.03-.794.288-1.102a1.394 1.394 0 011.05-.493zm.1 1.774h.22c.282 0 .51-.223.51-.497a.503.503 0 00-.51-.497h-.22a.51.51 0 00-.36.142.485.485 0 00-.149.35c0 .275.227.499.51.502zm-7.455-2.768h3.763c.282 0 .51-.222.51-.497a.503.503 0 00-.51-.497H9.491a.504.504 0 00-.51.492c0 .275.228.499.51.502z" clip-rule="evenodd"></path></svg>
                    </div>
                    <p class="mt-2 text-xs md:text-sm text-center">পেমেন্ট</p>
                </div>
            </div>

            <!-- Main Content -->
            <div class="xs:flex xs:flex-col md:flex md:flex-row-reverse md:flex-wrap md:justify-around md:max-w-[1280px] w-full py-2 xs:px-0 md:px-1">

  <!-- Left Column: Payment Selection -->
  <div class="xs:h-auto xs:bg-[#E5E7EB] xs:max-h-[630px] md:max-h-[480px] flex flex-col justify-between md:border md:rounded-[10px] md:border-gray-200">
    
    <div class="bg-white flex-1 py-4 pb-0 xs:pt-5 xs:pb-0 xs:px-5 md:px-6 xs:w-[100%] md:w-[472px]">

      <!-- Header -->
      <div class="flex justify-between items-center mb-8">
        <div class="text-[14px] font-[600]">পেমেন্ট মেথড সিলেক্ট করুন</div>
        <div class="text-[9px] font-[600] flex items-center bg-[#F3F4F6] rounded-[39px] px-1.5 py-1">
          <span class="bg-[#1DAB55] flex justify-center items-center rounded-[50%] p-1 mr-1 h-[20px] w-[20px]">
            <img alt="" src="/assets/lock.svg" class="w-full h-full object-contain">
          </span>
          <span>সম্পূর্ণ নিরাপদ পেমেন্ট</span>
        </div>
      </div>

      <!-- Payment Options -->
      <div class="mb-8">
        <!-- bKash Option -->
        <label>
          <div class="border-[1px] border-[#E5E7EB] rounded-[8px] h-[64px] flex justify-between px-3 mb-4 cursor-pointer">
            <div class="flex items-center">
              <input type="radio" id="বিকাশ" name="payment" class="h-[16.67px] w-[16.67px] accent-[green] cursor-pointer" value="bkash">
              <div class="flex flex-col justify-center">
                <div class="font-bold text-[14px] ml-2 pl-1">বিকাশ</div>
              </div>
            </div>
            <div class="flex items-center">
              <img src="https://billing.10minuteschool.com/_next/image?url=https%3A%2F%2Fcdn.10minuteschool.com%2Fimages%2Fsvg%2Fbkash_logo.png&w=128&q=75" alt="bKash Logo" class="h-8">
            </div>
          </div>
        </label>
       
        <!-- Other Payment Option -->
        <label>
          <div class="border-[1px] border-[#E5E7EB] rounded-[8px] h-[64px] flex justify-between px-3 mb-4 cursor-pointer">
            <div class="flex items-center">
              <input type="radio" id="অন্যান্য পেমেন্ট মাধ্যম" name="payment" class="h-[16.67px] w-[16.67px] accent-[green] cursor-pointer" value="ssl">
              <div class="flex flex-col justify-center">
                <div class="font-bold text-[14px] ml-2 pl-1">অন্যান্য পেমেন্ট মাধ্যম</div>
              </div>
            </div>
            <div class="flex items-center">
              <img src="https://cdn.10minuteschool.com/images/svg/other_payment_logo.png" alt="Other Payment Logo" class="h-8">
            </div>
          </div>
        </label>
      </div>

      <!-- Support Links -->
      <div class="xs:border-t xs:border-dashed xs:mt-8 pt-0 xs:py-6 flex flex-col md:flex-row">
        <!-- Call Agent -->
        <a href="tel:16910" class="md:w-1/2">
          <div class="border border-[#E5E7EB] rounded-lg px-4 md:px-2 py-3 flex items-center xs:mb-4 md:mr-4 cursor-pointer">
            <img src="/assets/phone-icon.svg" alt="" class="h-6 w-6">
            <div class="ml-4">
              <h3 class="text-xs font-medium text-[#9CA3AF]">এজেন্টের সহায়তা নিতে</h3>
              <h3 class="text-sm font-medium">কল করুন 16910 নম্বরে</h3>
            </div>
          </div>
        </a>
        <!-- Share Payment -->
        <div id="share_payment" class="md:w-1/2 border border-[#E5E7EB] rounded-lg px-4 md:px-2 py-3 flex items-center cursor-pointer xs:mb-4">
          <img src="/assets/link-icon.svg" alt="" class="h-6 w-6">
          <div class="ml-4">
            <h3 class="text-xs font-medium text-[#9CA3AF]">অন্য নম্বর/ফোন থেকে কিনতে</h3>
            <h3 class="text-sm font-medium">পেমেন্ট লিঙ্ক শেয়ার করুন</h3>
          </div>
        </div>
      </div>

      <!-- Terms & Conditions -->
      <div class="mt-4 mb-6 md:mb-0">
        <label for="iagree" class="flex gap-3 items-start justify-center">
          <input type="checkbox" id="iagree" name="iagree" class="accent-[green] h-[25px] md:h-[16px] w-[25px] md:w-[16px] ml-1" checked>
          <p class="text-sm md:text-xs">
            আমি এই প্ল্যাটফর্ম <a class="underline" href="https://app.10minuteschool.com/terms-and-conditions">ব্যবহারের শর্তাবলি</a> ও 
            <a class="underline" href="https://app.10minuteschool.com/privacy-policy">গোপনীয়তা নীতির</a> ব্যাপারে সম্মতি দিচ্ছি
          </p>
        </label>
      </div>

    </div>

    <!-- Bottom Payment Button (Fixed for mobile) -->
    <div class="xs:bg-[#E5E7EB] py-2 xs:pt-2 xs:pb-0 xs:fixed xs:w-full bottom-0">
      <!-- Desktop -->
      <div class="mt-6 px-6 xs:mt-0 mb-2 xs:mb-0 bg-white py-4 xs:px-5 hidden md:block">
        <button class="w-[100%] rounded-[4px] h-[48px] text-white hover:opacity-[0.9] bg-[#1DAB55]">
          <div class="flex justify-between px-4">
            <div class="text-[16px]">পেমেন্ট করুন</div>
            <div><span class="font-extrabold">৳ </span><span class="font-bold text-[18px]">5000</span></div>
          </div>
        </button>
      </div>
      <!-- Mobile -->
      <div class="mt-6 xs:mt-0 mb-2 xs:mb-0 bg-white pt-2 pb-4 xs:px-5 flex items-center justify-between md:hidden">
        <div>
          <h1 class="text-lg font-semibold">সর্বমোট ৳5000</h1>
          <p class="text-xs font-medium text-[#9CA3AF] underline cursor-pointer mt-[7px]">হিসাবের বিস্তারিত</p>
        </div>
        <div>
          <button class="w-36 rounded-[4px] h-[48px] text-white hover:opacity-[0.9] bg-[#1DAB55]">
            <div class="flex justify-center px-4">
              <h1 class="text-[16px]">পেমেন্ট করুন</h1>
            </div>
          </button>
        </div>
      </div>
    </div>

  </div>

  <!-- Right Column: Order Details -->
  <div class="mt-3 md:mt-0">
    <div class="bg-white flex-1 mb-2 xs:pt-4 xs:px-5 md:mr-16 w-full xs:w-[100%] xs:h-full pb-10 xs:min-h-[290px] xs:max-w-none md:max-w-[400px]">
      <div class="md:p-8 md:h-auto md:border md:rounded-[8px] md:border-gray-200">

        <!-- Order ID -->
        <div class="hidden md:block">
          <div class="flex items-center w-full bg-white xs:py-4 font-bold xs:px-5 md:mb-6">
            <p class="text-[16px] md:text-[21px] font-semibold mr-2">অর্ডার আইডি TMS48239733</p>
            <div class="mt-[5px] cursor-pointer hover:opacity-70" id="copy">
              <img src="/assets/copy-icon.svg" alt="copy" class="h-5 w-5">
            </div>
          </div>
        </div>

        <!-- Order Items -->
        <div class="mb-2">
          <div class="font-medium flex justify-between">
            <div class="max-w-[220px] text-sm">
              HSC 27 অনলাইন ব্যাচ (ফিজিক্স, কেমিস্ট্রি, ম্যাথ, বায়োলজি)
              <p class="mt-2 text-sm text-[#4B5563] font-normal">PCMB (Cycle 1)</p>
            </div>
            <div><span class="font-extrabold">৳</span><span class="font-bold text-sm">5000</span></div>
          </div>
        </div>

        <!-- Repeat for other courses -->
        <!-- ... similar structure ... -->

        <!-- Subtotal & Total -->
        <div class="font-medium flex justify-between mt-4">
          <div class="text-sm">সাব টোটাল</div>
          <div><span class="font-extrabold">৳ </span><span class="font-bold text-[14px]">5000</span></div>
        </div>
        <div class="font-bold flex justify-between items-center mt-4 border-t pt-2 xs:mb-8">
          <div>সর্বমোট <span class="text-[11px] text-[#4B5563] ml-1 font-[400]">(ভ্যাট সহ)</span></div>
          <div><span class="font-extrabold">৳</span><span class="font-bold text-[20px]">5000</span></div>
        </div>

      </div>
    </div>
  </div>

</div>

        </div>
    </section>
@endsection