@extends('master-user')


@section('content')
<section class="py-8">
  <div class="max-w-5xl mx-auto px-6 bg-white rounded-xl p-6">
    <h1 class="text-3xl font-bold text-[#3a3058] text-center mb-8">Checkout</h1>
    @if(!empty($pendingTransaction))
      <div class="mb-6">
        <div class="bg-red-100 border border-red-300 text-red-700 rounded-lg px-6 py-4 text-center">
          <strong>Important: </strong>You already have a <i><strong>transaction in progress</strong></i>. We recommend to wait until it gets success/fail, before making any further payment attempt.
        </div>
      </div>
    @endif
    @if ($errors->any())
      <div class="bg-red-100 border border-red-300 text-red-700 rounded-lg px-6 py-4 mb-4">
        <ul class="list-disc pl-5">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif
    @if (session('error'))
      <div class="bg-red-100 border border-red-300 text-red-700 rounded-lg px-6 py-4 mb-4 text-center">
        {{ session('error') }}
      </div>
    @endif
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div>
        @if (session('success'))
          <div class="bg-green-100 border border-green-300 text-green-700 rounded-lg px-6 py-4 mb-4">
            {{ session('success') }}
          </div>
        @endif
        <form action="{{ route('business.update') }}" method="POST" class="space-y-4">
          @csrf
          <div class="bg-blue-50 border border-blue-200 text-blue-700 rounded-lg px-4 py-3 mb-2">
            These details will be used while generating Invoice.
          </div>
          <div>
            <label for="name" class="block font-medium text-gray-700 mb-1">Individual/Business Name</label>
            <input type="text" id="name" name="name" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('name', $userBusiness->name ?? '') }}" required placeholder="Enter business or individual name">
            @error('name')
              <small class="text-red-600">{{ $message }}</small>
            @enderror
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label for="email" class="block font-medium text-gray-700 mb-1">Email</label>
              <input type="email" id="email" name="email" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('email', $userBusiness->email ?? '') }}" required placeholder="Enter email address">
              @error('email')
                <small class="text-red-600">{{ $message }}</small>
              @enderror
            </div>
            <div>
              <label for="phone" class="block font-medium text-gray-700 mb-1">Phone</label>
              <input type="text" id="phone" name="phone" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('phone', $userBusiness->phone ?? '') }}" required placeholder="Enter phone number">
              @error('phone')
                <small class="text-red-600">{{ $message }}</small>
              @enderror
            </div>
          </div>
          <div>
            <label for="address" class="block font-medium text-gray-700 mb-1">Address</label>
            <textarea id="address" name="address" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" rows="3" required placeholder="Enter address">{{ old('address', $userBusiness->address ?? '') }}</textarea>
            @error('address')
              <small class="text-red-600">{{ $message }}</small>
            @enderror
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label for="city" class="block font-medium text-gray-700 mb-1">City</label>
              <input type="text" id="city" name="city" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('city', $userBusiness->city ?? '') }}" required placeholder="Enter city">
              @error('city')
                <small class="text-red-600">{{ $message }}</small>
              @enderror
            </div>
            <div>
              <label for="state" class="block font-medium text-gray-700 mb-1">State</label>
              <input type="text" id="state" name="state" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('state', $userBusiness->state ?? '') }}" required placeholder="Enter state">
              @error('state')
                <small class="text-red-600">{{ $message }}</small>
              @enderror
            </div>
            <div>
              <label for="pincode" class="block font-medium text-gray-700 mb-1">Pincode</label>
              <input type="text" id="pincode" name="pincode" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('pincode', $userBusiness->pincode ?? '') }}" required placeholder="Enter pincode">
              @error('pincode')
                <small class="text-red-600">{{ $message }}</small>
              @enderror
            </div>
          </div>
          <div>
            <label for="gst_number" class="block font-medium text-gray-700 mb-1">GSTIN (If available)</label>
            <input type="text" id="gst_number" name="gst_number" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" value="{{ old('gst_number', $userBusiness->gst_number ?? '') }}" placeholder="Enter GSTIN (optional)">
            @error('gst_number')
              <small class="text-red-600">{{ $message }}</small>
            @enderror
          </div>
          <button type="submit" class="bg-yellow-500 text-[#3a3058] hover:bg-yellow-400 px-6 py-2 rounded-md shadow transition w-full md:w-auto">Update Billing Details</button>
        </form>
      </div>
      <div>
        <h4 class="text-xl font-semibold text-[#3a3058] mb-4">Plan Summary</h4>
        <div class="overflow-x-auto rounded-lg border border-gray-200 mb-4">
          <table class="min-w-full bg-white text-base text-left whitespace-nowrap">
            <tbody>
              <tr>
                <td class="px-6 py-3">Plan Name</td>
                <td class="px-6 py-3 font-bold text-right">{{ $plan->name }}</td>
              </tr>
              <tr>
                <td class="px-6 py-3">Price</td>
                <td class="px-6 py-3 font-bold text-right">Rs. {{ number_format($plan->price) }}</td>
              </tr>
              <tr>
                <td class="px-6 py-3">No. of Short URLs</td>
                <td class="px-6 py-3 font-bold text-right">{!! !empty($plan->max_short_urls) ? moneyFormatIndia($plan->max_short_urls) : 'Unlimited' !!}</td>
              </tr>
              @if($plan->allow_custom_headers)
              <tr>
                <td class="px-6 py-3">Custom Prefixes/Headers</td>
                <td class="px-6 py-3 font-bold text-right"><svg class="w-5 h-5 text-green-500 inline" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></td>
              </tr>
              @endif
            </tbody>
          </table>
        </div>
        @if($taxes['total_tax'] > 0)
        <div class="overflow-x-auto rounded-lg border border-gray-200 mb-4">
          <table class="min-w-full bg-white text-base text-left whitespace-nowrap">
            <tbody>
              <tr>
                <th class="px-6 py-3 font-semibold text-sm uppercase tracking-wider text-left text-[#3a3058]">
                  Taxes 
                  @php
                    $taxComponents = [];
                    if (isset($taxes['igst'])) $taxComponents[] = 'IGST';
                    if (isset($taxes['sgst'])) $taxComponents[] = 'SGST';
                    if (isset($taxes['cgst'])) $taxComponents[] = 'CGST';
                  @endphp
                  ({{ implode('+', $taxComponents) }})
                </th>
                <td class="px-6 py-3 font-bold text-right">Rs. {{ number_format($taxes['total_tax'], 2) }}</td>
              </tr>
              <tr>
                <th class="px-6 py-3 font-semibold text-sm uppercase tracking-wider text-left text-[#3a3058]">Total Payable</th>
                <td class="px-6 py-3 font-bold text-right">Rs. {{ number_format($totalAmount, 2) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        @endif
      </div>
    </div>
    <div class="flex flex-col md:flex-row justify-end gap-4 mt-8">
      <a href="{{ route('user.billing.subscription') }}" class="bg-[#3a3058] text-yellow-200 hover:bg-[#4b3d6a] px-6 py-2 rounded-md shadow text-center flex items-center justify-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
        Modify Plan
      </a>
      <a href="{{ route('user.billing.payment', quickEnc($plan->id)) }}" class="bg-green-600 text-white hover:bg-green-700 px-6 py-2 rounded-md shadow text-center flex items-center justify-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7" /></svg>
        Checkout
      </a>
    </div>
    @if(!empty($pendingTransaction))
      <input type="hidden" class="hidden needUpdateTxn" value="1">
      <input type="hidden" class="hidden updateLastTxnLink" value="{!! route('user.billing.updateLatestTxn') !!}">
      <input type="hidden" class="hidden thanksPage" value="{!! route('user.thanks') !!}">
    @endif
  </div>
</section>
@endsection

@push('post_js')
@endpush