@extends('layouts.app')
@section('content')
    @if (session()->has('message'))
        <div class="alert alert-success">{{ session()->get('message') }}</div>
    @endif
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif

    <style>
        .no-drop {cursor: not-allowed; pointer-events: none;}
    </style>
     <div class="srchBox_wraper justify-content-end">
        <div class="right-panel-btn text-left">
            <h5> Offline Payment</h5>
        </div>

        
    </div>

    {{-- @php dd( Route::current()->uri()); @endphp

      <!-- ================ start: agent-do-lists-sec ================ --> --}}
      <section class="agent-do-lists-sec">
        <div class="custom-container1">
            {{-- <h1 class="custom-title1">TRANSCASH AGENT TO DO LIST</h1> --}}
            @php

            $firstTabIsActive = Route::current()->uri() =='admin/payment/offline-payment-step-one' ?true:false;

            $secondTabIsActive = Route::current()->uri() =='admin/payment/offline-payment-step-two' ?true:false;
            $thirdTabIsActive = Route::current()->uri() =='admin/payment/offline-payment-step-three' ?true:false;
            $forthTabIsActive = Route::current()->uri() =='admin/payment/offline-payment-step-four' ?true:false;

            @endphp
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item" >
                    {{-- <a @class([
                        'nav-link',
                        'active' => $firstTabIsActive,
                        'no-drop'
                    ]) id="beneficiary-tab" data-toggle="tab" href="#beneficiary" role="tab"
                        aria-controls="beneficiary" aria-selected="true">Beneficiary</a> --}}
                        <a @class([
                            'nav-link',
                            'active' => $firstTabIsActive,                           
                        ]) id="beneficiary-tab"  href="@if($secondTabIsActive==true || $thirdTabIsActive==true || $forthTabIsActive==true  ){{url('admin/payment/offline-payment-step-one')}} @else javascript:void(0) @endif" role="tab"
                            >Beneficiary</a>
                </li>
                <li class="nav-item">
                    {{-- <a @class([
                        'nav-link',
                        'active' => $secondTabIsActive,
                        'no-drop'
                    ]) id="transaction-mode-tab" data-toggle="tab" href="#transaction-mode" role="tab"
                        aria-controls="transaction-mode" aria-selected="false">Transaction Mode</a> --}}
                    <a @class([
                        'nav-link',
                        'active' => $secondTabIsActive,                        
                    ]) id="transaction-mode-tab" href="@if( $thirdTabIsActive==true || $forthTabIsActive==true  ){{url('admin/payment/offline-payment-step-two')}}@else javascript:void(0) @endif" role="tab"
                        >Transaction Mode</a>
                </li>
                <li class="nav-item">
                    {{-- <a @class([
                        'nav-link',
                        'active' => $thirdTabIsActive,
                        'no-drop'
                    ]) id="tax-charges-tab" data-toggle="tab" href="#tax-charges" role="tab"
                        aria-controls="tax-charges" aria-selected="false">tax and charges</a> --}}
                    <a @class([
                        'nav-link',
                        'active' => $thirdTabIsActive,
                    ]) id="tax-charges-tab" href="@if( $forthTabIsActive==true  ){{url('admin/payment/offline-payment-step-three')}}@else javascript:void(0) @endif" 
                        >tax and charges</a> 
                </li>
                <li class="nav-item">
                    <a  @class([
                        'nav-link',
                        'active' => $forthTabIsActive,
                        'no-drop'
                    ]) id="transaction-details-tab" data-toggle="tab" href="#transaction-details"
                        role="tab" aria-controls="transaction-details" aria-selected="false">Transaction Details</a>
                </li>
            </ul>

            @yield('tab-content')
            {{-- <div class="tab-content">
                <div class="tab-pane fade show active" id="beneficiary" role="tabpanel"
                    aria-labelledby="beneficiary-tab">
                    <div class="tab-form-contents">
                        <form action="{{ url('/admin/save-transaction-details')}}" method="POST">
                            {{ csrf_field() }}
                            <div class="row ">
                                <div class="col-12 col-md-4">
                                    <div class="form-group">
                                        <label>First name</label>
                                        <input type="text" name="first_name" class="form-control" @error('first_name') is-invalid @enderror placeholder="First name">
                                        @error('first_name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <div class="form-group">
                                        <label>Last name</label>
                                        <input type="text" name="last_name" class="form-control" @error('last_name') is-invalid @enderror placeholder="Last name">
                                        @error('last_name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label>Email</label>
                                        <input type="email" name="email" class="form-control" @error('email') is-invalid @enderror placeholder="Email">
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label>Phone</label>
                                        <input type="text" name="phone" class="form-control" @error('phone') is-invalid @enderror placeholder="Phone">
                                        @error('phone')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label>Address1</label>
                                        <textarea class="form-control" @error('address1') is-invalid @enderror name="address1"></textarea>
                                        @error('address1')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label>Address2</label>
                                        <textarea class="form-control" name="address2"></textarea>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <div class="form-group">
                                        <label>State</label>
                                        <input type="text" class="form-control" name="state" placeholder="State">
                                        @error('address1')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <div class="form-group">
                                        <label>City</label>
                                        <input type="text" name="city" class="form-control" placeholder="City">
                                        @error('address1')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <div class="form-group">
                                        <label>Zip code</label>
                                        <input type="text" name="zip_code" class="form-control" placeholder="Zip code">
                                    </div>
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="form-action-group">
                                        <a href="javascript:;" class="theme-border-btn cancel-btn">Cancel</a>
                                        <button type="submit" class="theme-solid-btn submit-btn">Next</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="tab-pane fade" id="transaction-mode" role="tabpanel" aria-labelledby="transaction-mode-tab">
                    <div class="tab-form-contents">
                        <div class="row ">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>lorem ipsum</label>
                                    <select class="form-control select1">
                                        <option>Select</option>
                                    </select>
                                </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 active">
                                                <img src="assets/images/payment-method1.svg">
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="pmibtn theme-border-btn">
                                                <img src="assets/images/payment-method2.svg">
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="pmibtn theme-border-btn">
                                                <img src="assets/images/payment-method3.svg">
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <label>Description</label>
                                    <textarea class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-action-group">
                                    <a href="javascript:;" class="theme-border-btn cancel-btn">Cancel</a>
                                    <a href="javascript:;" class="theme-solid-btn submit-btn">Next</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tax-charges" role="tabpanel" aria-labelledby="tax-charges-tab">
                    <div class="tab-form-contents">
                        <div class="row ">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>lorem ipsum</label>
                                    <div class="select-with-left-input">
                                        <div class="left-input-box">
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                        <div class="select-box">
                                            <select class="form-control select1">
                                                <option>CAD</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>lorem ipsum</label>
                                    <div class="select-with-left-input">
                                        <div class="left-input-box">
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                        <div class="select-box">
                                            <select class="form-control select1">
                                                <option>USD</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-8 col-md-8">
                                <div class="form-group">
                                    <div class="paymt-table-div">
                                        <h3>Taux: <span>0.7185</span></h3>
                                        <ul class="others-price-lists">
                                            <li>
                                                <p>0.00</p> <span>Quantic Locate</span>
                                            </li>
                                            <li>
                                                <p>0.00</p> <span>Quantic Locate</span>
                                            </li>
                                            <li>
                                                <p>0.00</p> <span>Quantic Locate</span>
                                            </li>
                                            <li>
                                                <p>0.00</p> <span>Quantic Locate</span>
                                            </li>
                                        </ul>
                                        <div class="total-value-box">
                                            <input type="text" class="form-control">
                                            <h4>Total</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4 col-md-4">
                                <div class="row ">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Lorem Ipsum</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Payment Mode</label>
                                            <select class="form-control select1">
                                                <option>Cash</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Lorem Ipsum</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Lorem Ipsum</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-action-group">
                                    <a href="javascript:;" class="theme-border-btn cancel-btn">Cancel</a>
                                    <a href="javascript:;" class="theme-solid-btn submit-btn">Next</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="tab-pane fade" id="transaction-details" role="tabpanel"
                    aria-labelledby="transaction-details-tab">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <div class="tab-form-contents">
                            <div class="row ">
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label>lorem ipsum</label>
                                        <select class="form-control select1">
                                            <option>Select</option>
                                        </select>
                                    </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 active">
                                                    <img src="assets/images/payment-method1.svg">
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" class="pmibtn theme-border-btn">
                                                    <img src="assets/images/payment-method2.svg">
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" class="pmibtn theme-border-btn">
                                                    <img src="assets/images/payment-method3.svg">
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="row ">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>lorem ipsum</label>
                                    <div class="select-with-left-input">
                                        <div class="left-input-box">
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                        <div class="select-box">
                                            <select class="form-control select1">
                                                <option>CAD</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>lorem ipsum</label>
                                    <div class="select-with-left-input">
                                        <div class="left-input-box">
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                        <div class="select-box">
                                            <select class="form-control select1">
                                                <option>USD</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-8 col-md-8">
                                <div class="form-group">
                                    <div class="paymt-table-div">
                                        <h3>Taux: <span>0.7185</span></h3>
                                        <ul class="others-price-lists">
                                            <li>
                                                <p>0.00</p> <span>Quantic Locate</span>
                                            </li>
                                            <li>
                                                <p>0.00</p> <span>Quantic Locate</span>
                                            </li>
                                            <li>
                                                <p>0.00</p> <span>Quantic Locate</span>
                                            </li>
                                            <li>
                                                <p>0.00</p> <span>Quantic Locate</span>
                                            </li>
                                        </ul>
                                        <div class="total-value-box">
                                            <input type="text" class="form-control">
                                            <h4>Total</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4 col-md-4">
                                <div class="row ">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Lorem Ipsum</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Payment Mode</label>
                                            <select class="form-control select1">
                                                <option>Cash</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Lorem Ipsum</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Lorem Ipsum</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12">
                    <div class="form-action-group">
                        <a href="javascript:;" class="theme-border-btn cancel-btn">Cancel</a>
                        <a href="javascript:;" class="theme-solid-btn submit-btn">Next</a>
                    </div>
                </div>
                </div>
            </div> --}}

        </div>
    </section>
    <!-- ================ end: agent-do-lists-sec ================ -->
@endsection