@extends('web_site.layouts.master')

@section('content')
    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ trans('site.payment.title') }}</h1>
        </div>
    </section>

    <section class="account-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <form action="{{ route('clinic.payments.process', $booking) }}" method="POST" class="form-wrap1 bg-white payment-card">
                        @csrf
                        <div class="form-title-box bg-title">
                            <h2 class="h4 mb-1 text-white">{{ trans('site.payment.title') }}</h2>
                            <p class="mb-0 text-white-light">{{ trans('site.bookings.number', ['id' => $booking->id]) }} — {{ $booking->doctor?->name }}</p>
                        </div>
                        <div class="form-box">
                            <div class="payment-total">
                                <span>{{ trans('site.bookings.total') }}</span>
                                <strong>{{ number_format((float) $booking->price, 0) }} {{ trans('site.bookings.currency') }}</strong>
                            </div>

                            <p class="account-label mb-2">{{ trans('site.payment.choose') }}</p>
                            <div class="chip-group flex-column mb-4" role="radiogroup">
                                @foreach ($gateways as $gateway)
                                    <input type="radio" class="btn-check" name="payment_gateway_code" id="gateway-{{ $gateway->code }}" value="{{ $gateway->code }}" autocomplete="off" required @checked($loop->first)>
                                    <label class="chip chip--radio gateway-option" for="gateway-{{ $gateway->code }}">{{ $gateway->name }}</label>
                                @endforeach
                            </div>

                            <button type="submit" class="vs-btn style2 w-100">{{ trans('site.bookings.pay') }} <i class="far fa-lock"></i></button>
                            <p class="text-center mt-3 mb-0">
                                <a href="{{ route('clinic.my-bookings.show', $booking) }}" class="text-theme1">{{ trans('site.payment.later') }}</a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection