@extends('welcome')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>

    .select2-container--default .select2-selection--single {
        background-color: #fff;
        border: 1px solid #a9a4a44a;
        border-radius: 4px;
        padding: 7px;
    }

    .select2-container .select2-selection--single {
        cursor: pointer;
        height: 43px;
        width: auto;
        min-width: 100%;
        user-select: none;
        -webkit-user-select: none;
    }
</style>
    <section class="page-header page-header-classic">
        <div class="container">
            <div class="row">
                <div class="col">
                    <ul class="breadcrumb">
                        <li><a href="{{ URL::to('index') }}">Home</a></li>
                        <li class="active">Donate</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col p-static">
                    <span class="page-header-title-border visible" style="width: 216.938px;"></span>
                    <h1 data-title-border="">Donate</h1>

                </div>
            </div>
        </div>
    </section>
    <section class="about-us padding-section yellow-bg">
        <div class="container">
            <div class="clearfix">
                <!--<div class="clearfix yellow-bg p-5"></div>-->
                <div class="row mb-5">

                    <div class="col-md-12">
                        <div class="clearfix white-bg text-center">
                            <h4 class="text-uppercase mb-1 mt-1">Volunteer</h4>
                            <strong>Sri Ramakrishna International</strong> offers diverse opportunities to all spiritual
                            minded people to serve the society by becoming the member. Membership empowers applicant to
                            follow the path of religious ideals and lead a pious life of higher principles. Fill the form to
                            submit your application.

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="card mb-5">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h3 class="card-title"><strong>Bank Details</strong></h3>
                                            <p>Cheque/Donation are to be drawn/given in the favour of</p>
                                            <h3><strong>Sri Ramakrishna International</strong></h3>

                                            <img src="assets/img/hdfc-details.jpg" alt="HDFC Details"
                                                class="img-responsive w-full">
                                        </div>
                                        <div class="col-md-6">
                                            <div class="donate-icons text-center">
                                                <h3 class="card-title"><strong>Scan Bar-code and donate now</strong></h3>
                                                <div class="mb-5"><img src="assets/img/scan-code-1.png" width="55%">
                                                </div>
                                                <ul>
                                                    <li><img src="assets/img/p-1.png"></li>
                                                    <li><img src="assets/img/p-2.png"></li>
                                                    <li><img src="assets/img/p-3.png"></li>
                                                    <li><img src="assets/img/p-4.png"></li>
                                                    <li><img src="assets/img/p-5.png"></li>
                                                    <li><img src="assets/img/p-6.png"></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 d-flex justify-content-center">
                    <div class="col-md-6">
                        <div id="give-form-219-wrap" class="give-form-wrap give-display-">
                            <h2 class="text-center font-weight-bold text-8">Donation Form</h2>

                            <form action="{{ route('send-donation') }}" enctype="multipart/form-data" method="post">
                                @csrf
                                  <div class="form-group">
                                    <label class="give-hidden" for="donation_type">Donation Type<span class="text-danger">*</span></label>
                                    <div class="input-group col-md-6">
                                        <select name="donation_type_id" id="donation_type" class="form-control">
                                            <option value="">Select Donation Type</option>
                                            @foreach ($donationTypes as $donationType)
                                                <option value="{{ $donationType->id }}" {{ old('donation_type_id') == $donationType->id ? 'selected' : '' }}>
                                                    {{ $donationType->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('donation_type_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label class="give-hidden" for="give-amount-hidden">Donation Amount<span
                                            class="text-danger">*</span></label>

                                    <div class="input-group col-md-6">
                                        <span class="input-group-text text-3">₹</span>
                                        <input type="number" class="form-control" value="{{ old('donation_amount') }}"
                                            name="donation_amount">
                                    </div>
                                    @error('donation_amount')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="give-hidden" for="give-amount-hidden">Mobile Number<span
                                    class="text-danger">*</span></label>
                            <div class="input-group col-md-6">
                                <select name="country_code" id="country_code">
                                    <option data-countryCode="IN" selected value="+91">+91</option>
                                    @include('partial.countryCode')
                                </select>
                                <input type="Number" id="mobile" class="form-control" value="{{ old('number') }}" name="number">
                            </div>
                            @error('number')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label class="give-hidden" for="give-amount-hidden">Full Name<span
                                    class="text-danger">*</span></label>
                            <div class="input-group col-md-6">
                                <input type="text" id="username" class="form-control" value="{{ old('name') }}" name="name">

                            </div>
                            @error('name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="give-hidden" for="give-amount-hidden">Email</label>
                            <div class="input-group col-md-6">
                                <input type="email" id="email" class="form-control" value="{{ old('email') }}" name="email">
                            </div>
                            @error('email')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="give-hidden">City<sup class="text-danger">*</sup></label>
                            <div class="input-group col-md-6">
                                <select class="select-picker form-select p-2" value="{{ old('city_id') }}" id="city_id" name="city_id">
                                    @if (isset($cities))
                                        @foreach ($cities as $index => $city)
                                            <option {{ $index === 0 ? 'selected' : '' }}
                                                value="{{ $city->id }}">
                                                {{ $city->name }}-({{ $city->state }})</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <fieldset id="give_purchase_submit" class="mb-5">
                            <div class="give-submit-button-wrap give-clearfix text-center">
                                <input type="submit" class="give-submit give-btn btn btn-primary btn-modern"
                                    id="give-purchase-button" name="give-purchase" value="Donate Now"
                                    data-before-validation-label="Donate Now">
                                <span class="give-loading-animation"></span>
                            </div>
                        </fieldset>

                        </form>

                    </div>
                </div>

            </div>


        </div>
        <div class="row mt-50">
            <div class="col-md-12">
                <img src="assets/img/donor-1.jpg" alt="Sri Rama Krishna International logo" class="img-fluid">
            </div>
        </div>
        </div>

    </section>
@stop
@push('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select-picker').select2()
        })
    </script>
    <script>
        $(document).ready(function() {
            $('#mobile').on("keyup", function(e) {
                // console.log(e);
                $.ajax({
                    url: "/api/get-user-name",
                    method: "GET",
                    data: {
                        mobile: $("#mobile").val(),
                        country_code: $('#country_code').val()
                    },
                    success: function(response) {
                        $("#username").val(response.name);
                        $("#email").val(response.email);
                        $("#city_id").val(response.city_id).trigger('change');
                        // $('.select-picker').select2('refresh')
                    }
                });
            });
        });
    </script>
@endpush