@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 EXPENSE</h3>
                </div>
                <div class="card-body pt-4 p-3">
                    <form action="{{ route('expenseform') }}" 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">{{ __('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="amount" class="form-control-label">{{ __('Amount') }}</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>
                        <div class="row">
                            <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 class="col-md-6">
                                <div class="form-group">
                                    <label for="paymentmode">{{ 'Mode of Payment' }}</label>
                                    <div class="@error('paymentmode')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>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="paymentdate" class="form-control-label">{{ __('Payment Date') }}</label>
                                    <div class="@error('paymentdate') border border-danger rounded-3 @enderror">
                                        <input class="form-control" type="date" id="paymentdate" name="paymentdate">
                                    </div>
                                </div>
                            </div>
                      
                       
                            <div class="col-md-6">
                                <div class="form-group" id="chequenumber" style="display:none">
                                    <label for="chequenumber" id="chequebox" 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>

                      
                        
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4">{{ 'Add Expense' }}</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