@extends('layouts.user_type.auth')

@section('content')

    <main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg ">
        <div class="container-fluid py-4">
            <div class="card">
                <div class="card-header pb-0 px-3">
                    <h3 class="mb-0">ADD DONATION</h3>
                </div>
                <div class="card-body pt-4 p-3">
                    <form action="/donate" method="POST" role="form text-left">
                        @csrf 
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="user-name" class="form-control-label">{{ __('Donor Name') }}</label>
                                    <div class="@error('name') @enderror">
                                        <input class="form-control" type="text" placeholder="Name" id="user-name" name="name">
                                            @error('name')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="user-email" class="form-control-label">{{ __('Donor Email Address') }}</label>
                                    <div class="@error('email') @enderror">
                                        <input class="form-control" type="email" placeholder="abc@example.com" id="user-email" name="email">
                                            @error('email')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="amount" class="form-control-label">{{ __('Received sum of Rs.') }}</label>
                                    <div class="@error('amount') @enderror">
                                        <input class="form-control" type="number" placeholder="10,000" id="amount" name="amount">
                                            @error('amount')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="details" class="form-control-label">{{ __('Payment Details') }}</label>
                                    <div class="@error('details') @enderror">
                                        <input class="form-control" type="text" placeholder="Payment Details" id="details" name="details">
                                        @error('details')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="about">{{ 'Mode of Payment' }}</label>
                                    <div class="@error('user.about')border border-danger rounded-3 @enderror">
                                        <select class="form-control" id="payment_mode"name="paymentmode"  onchange="changeStatus(value)">
                                            <option value="" disabled selected>Select Mode of Payment</option>
                                            <option value="Cash">Cash</option>
                                            <option value="cheque">Cheque</option>
                                            <option value="Online Transfer">Online Transfer</option>
                                            <option value="UPI">UPI</option>
                                            <option value="Amazon Pay">Amazon Pay</option>
                                            <option value="Google Pay">Google Pay</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="user.location" class="form-control-label">{{ __('Payment Date') }}</label>
                                    <div class="@error('user.location') border border-danger rounded-3 @enderror">
                                        <input class="form-control" type="date" id="paymentdate" name="paymentdate">
                                    </div>
                                </div>
                            </div>
                            </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="about">{{ 'Purpose of Donation' }}</label>
                                    <div class="@error('user.about')border border-danger rounded-3 @enderror">
                                        <select class="form-control" id="payment_mode"name="purpose">
                                            <option value="" disabled selected>Select Purpose of Donation</option>
                                            <option value="Annadhanam">Anna Dhanam</option>
                                            <option value="Birthday">Birthday</option>
                                            <option value="Wedding">Wedding Anniversary</option>
                                            <option value="Death">Death Anniversary</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="user.location" class="form-control-label">{{ __('Event Date') }}</label>
                                    <div class="@error('user.location') border border-danger rounded-3 @enderror">
                                        <input class="form-control" type="date" id="paymentdate" name="eventdate">
                                    </div>
                                </div>
                            </div>
            
                          <div class="col-md-6">
                                <div class="form-group" id="chequenumber" style="display:none">
                                    <label for="chequenumber" class="form-control-label">{{ __('Cheque Number') }}</label>
                                    <div class="@error('chequenumber') border border-danger rounded-3 @enderror">
                                        <input class="form-control" type="text" name="chequenumber">
                                    </div>
                                </div>
                            </div>
                        
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4">{{ 'Add Donation' }}</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </main>
    <script>
    function changeStatus(value){
        var status = document.getElementById("payment_mode");
        if(status.value != "cheque")
        {
            $('#chequenumber').hide();
        }
        else
        {
            $('#chequenumber').show();
        }
    }
    </script>
@endsection