@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Jumlah Donasi') }}
@endsection

@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-cover" />
        </picture>
        <div class="container py-20">
            <div class="flex">
                <div class="w-1/3">
                    <div class="w-full">
                        <div class="tabs-nav">
                            <a href="#tab1"
                                class="text-xs font-bold uppercase px-5 py-3 shadow-2xl mt-2 rounded-lg block leading-normal text-white bg-accent ">
                                <i class="fas fa-space-shuttle text-base mr-1"></i> {{ __('message.Transaksi Donasi') }}
                            </a>
                            <a href="#tab2"
                                class="text-xs font-bold uppercase px-5 py-3 shadow-2xl mt-2 rounded-lg  block leading-normal text-black bg-light-base">
                                <i class="fas fa-cog text-base mr-1"></i> {{ __('message.FAQ') }}
                            </a>

                        </div>
                    </div>
                </div>
                <div class="w-full">
                    <div class="px-10">
                        <h2
                            class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                            {{ __('message.Donasi') }}
                        </h2>
                        <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
                        <div class="py-10 px-5">
                            <p class="font-display text-accent text-2xl text-center">
                                {{ __('message.Silahkan Isi Jumlah Donasi Anda!') }}</p>
                            <div class="py-10 px-10">
                                <div class="bg-white shadow-2xl px-5 py-10 rounded-2xl">
                                    <div class="flex flex-wrap">
                                        <div class="w-1/3 px-2 py-2">
                                            <button
                                                class="w-full text-accent font-display text-center border rounded-lg mx- py-2">Rp.50.000</button>
                                        </div>
                                        <div class="w-1/3 px-2 py-2">
                                            <button
                                                class="w-full text-accent font-display text-center border rounded-lg mx- py-2">Rp.100.000</button>
                                        </div>
                                        <div class="w-1/3 px-2 py-2">
                                            <button
                                                class="w-full text-accent font-display text-center border rounded-lg mx- py-2">Rp.200.000</button>
                                        </div>
                                        <div class="w-1/3 px-2 py-2">
                                            <button
                                                class="w-full text-accent font-display text-center border rounded-lg mx- py-2">Rp.300.000</button>
                                        </div>
                                        <div class="w-1/3 px-2 py-2">
                                            <button
                                                class="w-full text-white bg-accent font-display text-center border rounded-lg mx- py-2">Rp.400.000</button>
                                        </div>
                                        <div class="w-1/3 px-2 py-2">
                                            <button
                                                class="w-full text-accent font-display text-center border rounded-lg mx- py-2">Rp.500.000</button>
                                        </div>
                                    </div>
                                    <div class="w-full py-5">
                                        <p class="text-jacarta-700 font-display py-2">{{ __('message.Atau Isi Nominal') }}
                                        </p>
                                        <input type="text" name="" class="w-full rounded-xl " placeholder="0"
                                            id="">
                                    </div>
                                    <div class="w-full py-2">
                                        <textarea type="text" name="" class=" w-full rounded-xl" rows="10" placeholder="Pesan dan Harapan anda"
                                            id=""></textarea>
                                    </div>

                                    <div class="py-2">
                                        <div class="flex w-full text-center">
                                            <a href="{{ route('landing.donation.payment') }}"
                                                class="w-full bg-accent text-white px-10 py-3 rounded-xl">
                                                {{ __('message.Pilih Metode Pembayaran') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="py-5">
                                <p class="font-display text-accent text-xl">{{ -_('message.Kembali') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection