@extends('frontend.frontend_layout')
@section('content')
<!--Page Header Start-->
<section class="page-header">
    <div class="page-header-bg" style="background-image: url({{ asset('common/upload/donation-breadcrumb.jpg') }})">
    </div>
    <div class="container">
        <div class="page-header__inner">
            <ul class="thm-breadcrumb list-unstyled">
                <li><a href="index.html">Home</a></li>
                <li><span>/</span></li>
                <li>Donation</li>
            </ul>
            <h2>Donation</h2>
        </div>
    </div>
</section>
<!--Page Header End-->

<!--Donate One Start-->
<section class="donate-one mt-5">
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="donate-one__left">
                    <div class="section-title text-left">
                        <span class="section-title__tagline">Help us Donate</span>
                        <h2 class="section-title__title">Start Donating</h2>
                    </div>
                    <div class="donate-one__shape-1 float-bob-x">
                        <img src="{{ asset('frontend') }}/assets/images/shapes/donate-one-shape-1.png" alt="">
                    </div>
                    <form action="{{ route('donation.submit') }}" method="post" class="contact-form-box__form">
                        @csrf
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 my-2">
                                <div class="input-group">
                                    <span class="input-group-text"
                                        style="width: 50px; text-align: center; font-size: 18px; font-weight: 700;padding-left: 18px;">
                                        $
                                    </span>
                                    <input type="number" class="form-control donation-input-field" id="amount"
                                        name="amount" placeholder="0.00">
                                </div>
                                @error('amount')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-xl-6 col-lg-6 my-2">
                                <div class="input-group">
                                    <span class="input-group-text donation-input-icon"> <i class="fas fa-user"></i>
                                    </span>
                                    <input type="Text" class="form-control donation-input-field" id="name" name="name"
                                        placeholder="Your Name">
                                </div>
                                @error('name')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-xl-6 col-lg-6 my-2">
                                <div class="input-group">
                                    <span class="input-group-text donation-input-icon"> <i class="fas fa-phone"></i>
                                    </span>
                                    <input type="number" class="form-control donation-input-field" id="phone"
                                        name="phone" placeholder="Phone number">

                                </div>
                                @error('phone')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                           
                            <div class="col-xl-12 col-lg-12 my-2">
                                <div class="input-group">
                                    <span class="input-group-text donation-input-icon"> <i class="fas fa-envelope"></i>
                                    </span>
                                    <input type="email" class="form-control donation-input-field" id="email"
                                        name="email" placeholder="Email Address">

                                </div>
                                @error('email')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-xl-12 col-lg-12 my-2">
                                <div class="input-group">
                                    <span class="input-group-text donation-input-icon"> <i style="padding-top: 30px;"
                                            class="fas fa-sticky-note"></i> </span>
                                    <textarea name="message" style="height: 100px; padding: 10px 20px;"
                                        class="form-control donation-input-field"
                                        placeholder="Write a Message"></textarea>
                                </div>
                            </div>
                           
                            <div class="col-xl-12 col-lg-12 mt-3">
                                <label class="pb-2" style="font-weight: 700; color: #444444">Payment Method
                                    :</label>
                                <div class="space-x-2">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="paypal" name="payment_method"
                                            value="Paypal">
                                        <label class="form-check-label" for="paypal">Paypal</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="stripe" name="payment_method"
                                            value="Stripe">
                                        <label class="form-check-label" for="stripe">Credit card</label>
                                    </div>

                                </div>
                                @error('payment_method')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            
                            <div class="col-xl-12 col-lg-12 mt-3">
                                <div class="contact-form-box__btn-box">
                                    <button type="submit" class="thm-btn contact-form-box__btn">Submit Now</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="result"></div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="donate-one__right">
                    <div class="donate-one__img">
                        <img src="{{ asset('common/upload/donate-one-img-1.jpg') }}" alt="">
                    </div>
                    <ul class="donate-one__contact list-unstyled">
                        <li>
                            <div class="icon">
                                <span class="fas fa-envelope-open"></span>
                            </div>
                            <div class="content">
                                <p><a href="mailto:{{ $websiteSetting->email }}">{{ $websiteSetting->email }}</a></p>
                                <p><a href="tel:+ {{ $websiteSetting->phone }}">+ {{ $websiteSetting->phone }}</a></p>
                            </div>
                        </li>
                        <li>
                            <div class="icon">
                                <span class="fas fa-map"></span>
                            </div>
                            <div class="content">
                                <p>
                                    {{ $websiteSetting->address }}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Donate One End-->

@endsection