@extends('OfflinePayment.payment')
@section('tab-content')
    {{-- step 2 --}}

    <div class="tab-content">
        <div class="tab-pane fade show active" id="transaction-mode" role="tabpanel" aria-labelledby="transaction-mode-tab">
            <div class="tab-form-contents">
                <form action="{{ url('/admin/payment/offline-payment-step-three') }}" method="POST">
                    {{ csrf_field() }}
                    <div class="row ">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label>Payment Mode</label>
                                <select class="form-control select1" name="payment_mode" id="select_id">
                                    <option value="">Choose Mode</option>
                                    <option @if(old('payment_mode')=='Debit' || @request()->session()->get('transaction_details_tab2')[0]['payment_mode'] == 'Debit' ) @selected(true) @endif value="Debit">Debit</option>
                                    <option @if(old('payment_mode')=='Credit' || @request()->session()->get('transaction_details_tab2')[0]['payment_mode'] == 'Credit' ) @selected(true) @endif value="Credit">Credit</option>
                                    <option  @if(old('payment_mode')=='Cash' || @request()->session()->get('transaction_details_tab2')[0]['payment_mode'] == 'Cash' ) @selected(true) @endif  value="Cash">Cash</option>
                                </select>
                                @error('payment_mode')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <ul class="payment-method-icons">
                                    <!-- <li>
                                        <button type="button" class="pmibtn theme-border-btn cash">
                                            <img src="{{ asset('backend/assets/images/cash.png') }}">
                                        </button>
                                    </li> -->
                                    <li>
                                        <button type="button" class="pmibtn theme-border-btn wallet">
                                            <img src="{{ asset('backend/assets/images/wallet.png') }}">

                                        </button>
                                    </li>
                                    <!-- <li>
                                        <button type="button" class="pmibtn theme-border-btn bank">
                                            <img src="{{ asset('backend/assets/images/bank.png') }}">

                                        </button>
                                    </li> -->
                                </ul>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" class="form-control">{{ old('description')? old('description'): @request()->session()->get('transaction_details_tab2')[0]['description'] }}</textarea>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-action-group">
                                <a href="{{url('admin/payment/offline-payment-step-one')}}" class="payment-offline-back-button">Back</a>
                                {{-- <a href="javascript:;" class="theme-border-btn cancel-btn">Cancel</a> --}}
                                <button class="theme-solid-btn submit-btn">Next</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script>

        $('#select_id').on('change', function() {
            if (this.value == 'Cash') {
                $('.cash').addClass("active");
                $('.wallet').removeClass("active");
                $('.bank').removeClass("active");


            }
            if (this.value == 'Wallet') {
                $('.wallet').addClass("active");
                $('.bank').removeClass("active");
                $('.cash').removeClass("active");

            }
            if (this.value == 'Bank'){
                $('.bank').addClass("active");
                $('.cash').removeClass("active");
                $('.wallet').removeClass("active");

            }

        });
    </script>
@endsection