@extends('admin.layouts.app')
@section('title')
Payment List
@endsection

<style>
    .ph-arrow-left{
        content: "<"
    }
</style>
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex">
                                <h3 class="card-title line-height-36 " >Payment List ({{ @$allPayments }})</h3>
                                {{-- <span class=""> --}}
                             
                            </div>
                            
                        </div>


            <form id="formSubmit" action="{{ route('admin.payment.index') }}" method="GET">
                <div class="row p-1 mt-2 mx-2">
                    <div class="col-md-2 dropdown">
                        {{-- <x-forms.input type="date" name="created_at" placeholder="Enter Created Date"
                            value="{{ old('created_at', request('created_at')) }}" /> --}}
                        <input type="text" id="created_at" name="created_at" value="{{ request('created_at') }}"
                            class="form-control" autocomplete="off" id="my_txtbox" placeholder="Date Range"
                            readonly />
                        <x-forms.error name="created_at" />
                    </div>

                    <div class="col-md-2 dropdown">
                        <select name="candidate_id" id="candidate_id" class="form-control select2candidate">
                            <option value="">Select Candidate</option>
                        </select> 
                    </div>

                    <div class="col-md-2 dropdown">
                        <select name="status" class="form-control select2bs4" id="status">
                            <option value="" class="d-none">
                                Select Status
                            </option>
                            <option value="paid" {{  request('status')== "paid" ? 'selected' : ''  }}>Paid</option>
                            <option value="unpaid" {{ request('status')== "unpaid" ? 'selected' : '' }}>Unpaid</option>
                            <option value="partial" {{ request('status')== "partial" ? 'selected' : '' }}>partial</option>
                            
                        </select>
                    </div>
                    <div class="col-md-2">
                        <input type="text" @if (request('Keyword')) value="{{ request('Keyword') }}" @endif
                            id="Keyword" class="form-control mr-2"
                            placeholder="{{ __('search') }}..." name="Keyword" aria-label="">
                    </div>

                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary float-right"><i class="fas fa-search"></i> {{
                            __('search') }}</button>
                        @if (request('Keyword') || request('status') || request('candidate_id') ||
                        request('created_at'))
                        <a href="{{ route('admin.payment.index') }}"
                            class="mr-2 float-right btn btn-danger align-items-center justify-content-center"><i
                                class="fas fa-times"></i></a>
                        @endif

                    </div>


                </div>
           
            </form>

                    </div>

                    <div class="card-body table-responsive p-0">
                        <table class="table table-hover text-nowrap">
                            <thead>
                                <tr>
                                    <th width="5%">#</th>
                                    <th>OrderID</th>
                                    <th>Transaction ID</th>
                                    <th>Candidate Name</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Payment Gateway</th>
                                    <th>Payment Mode</th>
                                    <th>Invoice Number</th>
                                    <th>Date</th>

                                
                                    {{-- @if (userCan('payment.edit') || userCan('payment.delete'))
                                        <th width="10%">{{ __('action') }}</th>
                                    @endif --}}
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($payments as $payment)
                                    <tr>
                                        <td>{{ $payment->id }}</td>
                                        <td>{{ $payment->order_id }}</td>
                                        <td>{{ $payment->transaction_id }}</td>
                                        <td > @if(@$payment->candidate->id && @$payment->candidate->user->id)
                                            <a target="_blank" href="{{ route('lead-management.edit', @$payment->candidate->id) }}"  class="link">
                                                {{@$payment->candidate->user->name}} ({{@$payment->candidate->user->id}}) 
                                            </a>
                                            @else  
                                            {{@$payment->candidate->user->name}} ({{@$payment->candidate->user->id ?? @$payment->candidate_id }}) 
                                            @endif
                                        </td>
                                        <td >{{@$payment->currency_symbol}} {{@$payment->amount}}</td>
                                        <td>{{ $payment->payment_status ?? "--" }}</td>
                                        <td>{{ @$payment->payment_gateway->name ?? $payment->payment_gateway_id}}</td>
                                        <td>{{ $payment->payment_mode ?? "--" }}</td>
                                        <td>{{ $payment->invoice_number ?? "--" }}</td>
                                        <td >@if(!empty($payment->created_at)){{ dateMonthTimeFormat(@$payment->created_at) }}@else -- @endif</td>   

                                    
                                        {{-- <td>
                                            @if (userCan('payment.edit'))
                                            <a href="{{ route('admin.payment.edit', $payment->id) }}" class="btn bg-info"><i
                                                    class="fas fa-edit"></i></a>
                                            @endif  
                                            @if (userCan('payment.delete'))
                                            <form action="{{ route('admin.payment.destroy', $payment->id) }}" method="POST"
                                                class="d-inline">
                                                @method('DELETE')
                                                @csrf
                                                <button
                                                    onclick="return confirm(__('are_you_sure_want_to_delete_this_item'));"
                                                    class="btn bg-danger"><i class="fas fa-trash"></i></button>
                                            </form>
                                            @endif
                                        </td> --}}
                                     
                                      
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10">
                                            <p>{{ __('no_data_found') }}...</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                      
                        <div class="mt-3 d-flex justify-content-center">
                            {{ $payments->links() }}
                        </div>
                      
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('style')
<link href="{{ asset('path-to-your-font-awesome-css/all.min.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<style>
    .select2-results__option[aria-selected=true] {
        display: none;
    }

    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
        color: #fff;
        border: 1px solid #fff;
        background: #007bff;
        border-radius: 30px;
    }

    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
    }
    .btn-heigth{
        height: 42px;
    }
</style>

@endsection
@section('script')
<script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="{{ asset('frontend/secondary-theme/assets/js/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>

<script>
    $(document).ready(function () {
      
               var candidateId = '{{ request("candidate_id") }}';
   
               $('.select2candidate').select2({
                   theme: 'bootstrap4',
                   ajax: {
                       url: '{{ route('order.searchCandidate') }}',
                       dataType: 'json',
                       type: "GET",
                       quietMillis: 50,
                       data: function (term) {
                           console.log('item',term);
                           return {
                               term : term,
                           };
                       },
                       processResults: function (data) {
                           console.log('data',data)
                           return {
                               results: $.map(data, function (item) {
                                   return {
                                       id: item.id,
                                       text: `${item.name} (${item.user_id})`
                                   }
                               })
                           };
                       }
                   }
               });
   
               if (candidateId) {
                   $.ajax({
                       url: '{{ route('order.searchCandidate') }}',
                       type: "GET",
                       dataType: 'json',
                       data: { id: candidateId, _token: '{{ csrf_token() }}' },
                       success: function (item) {
                           console.log(item);
                           $('.select2candidate').append(new Option(`${item.name} (${item.id})`, item.id, true, true)).trigger('change');
                       }
                   });
               }
   
               $('.select2bs4').select2({
                   theme: 'bootstrap4',
                   minimumResultsForSearch: 8,
               })
   
            
           });
   
           $('input[name="created_at"]').daterangepicker({
               autoUpdateInput: false,
               // maxDate: new Date(),
               locale: {
                   cancelLabel: 'Clear'
               }
           });
           $('input[name="created_at"]').on('apply.daterangepicker', function (ev, picker) {
               $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                   'MM/DD/YYYY'));
           });
   
           $('input[name="created_at"]').on('cancel.daterangepicker', function (ev, picker) {
               $(this).val('');
           });
   
       </script>
    
@endsection