@extends('layouts.index')

@section('content')

    <div class="pt-3 container-fluid ">
        {{-- Breadcrumb Section --}}
        @php
            $pages = [] ; $page = [] ;
            $page['title'] = __('lang.home') ; $page['route'] = route('home') ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.myAccount') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.wallet') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_1' ;
            $pages[] = $page ;
        @endphp
        @include('components.breadcrumb',$pages)

        <div class="container mb-5 ">
            <div class="row delivery-information">
                <div class="col-lg-3 col-12">
                    @include('auth.account-menu',['activePage'=>'my_wallet','route'=>'wallet'])
                </div>
                <div class="col-lg-9 col-12">
                    @include('includes.errors')
                    <div class="card px-3 border-raduis-btm-0 border-raduis-top-0" style="background-image: url('{{ asset('images/wallet-bg.png') }}') ; background-position: center ;">
                        <div class="card-body row">

                            <div class="col-md-12 row m-0 p-0" style="background-image: url('{{ asset('images/wallet-img.png') }}') ; background-position: left; background-repeat: no-repeat; background-size: contain;">
                                <div class="col-md-2"></div>
                                <div class="col-md-10 row p-0 m-0 text-md-start text-center">
                                    <span class="col-md-4 d-block text_2 font-20 order-md-1 order-2">{{ __('lang.yourBalance') }}   </span>
                                    <span class="col-md-4 text_2 fb-700 font-30 order-md-2 order-1">{{ __('lang.myWallet') }} :</span>

                                    <span class="col-md-8 text_2 font-20 order-md-1 order-1"></span>
                                    <span class="col-md-8 text_2 fb-700 font-30 order-md-2 order-2">
                                        @include('components.currency',['price'=> $customers_wallet ])
                                    </span>
                                 </div>
                            </div>


                        </div>
                    </div>

                    <form class="form-horizontal mt-4" action="{{ route('wallet') }}" method="get">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <label for="from" class="col-form-label"> <strong class="text_1">{{ __('lang.type') }}</strong> </label>
                            </div>
                            <div class="form-group col-12 col-md-3 text-center">
                                <select class="form-control select-2" name="type">
                                    <option value="">{{ __('lang.selectType') }}</option>
                                    <option value="admin" {{ old('type') == 'admin' ? 'selected' : '' }}>{{ __('lang.type_admin') }}</option>
                                    <option value="coupon" {{ old('type') == 'coupon' ? 'selected' : '' }}>{{ __('lang.type_coupon') }}</option>
                                    <option value="order" {{ old('type') == 'order' ? 'selected' : '' }}>{{ __('lang.type_order') }}</option>
                                    <option value="refund_order" {{ old('type') == 'refund_order' ? 'selected' : '' }}>{{ __('lang.type_refund_order') }}</option>
                                    <option value="registration_bonus" {{ old('type') == 'registration_bonus' ? 'selected' : '' }}>{{ __('lang.type_registration_bonus') }}</option>
                                    <option value="cashback" {{ old('type') == 'cashback' ? 'selected' : '' }}>{{ __('lang.type_cashback') }}</option>
                                    <option value="cashback_refund" {{ old('type') == 'cashback_refund' ? 'selected' : '' }}>{{ __('lang.type_cashback_refund') }}</option>
                                </select>
                            </div>
                            {{-- <div class="form-group col-12 col-md-2 text-center">
                                <input class="form-control" type="text" name="value" placeholder="{{ __('lang.value') }}" value="{{ old('value') }}">
                            </div> --}}

                            <div class="form-group col-12 col-md-6 text-md-center">
                                <div class="row align-items-center">
                                    <div class="col-md-2">
                                        <label for="to" class="col-form-label"> <strong class="text_1">{{ __('lang.date') }}</strong> </label>
                                    </div>
                                    <div class="col-md-10">
                                            <input class="form-control" type="text" name="date" value="{{ old('date') }}" id="datepicker">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group col-12 col-md-2 text-center mt-md-0 mt-2">
                                <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i></button>
                                <button type="button" class="btn btn-secondary btn-sm search-reset"><i class="fa fa-ban"></i></button>
                            </div>
                        </div>
                        <!-- /.row-->
                    </form>

                    <div class="card border-raduis-btm-0 my-4">
                        <div class="card-body ">
                            <div class="row  ps-md-3  d-md-flex d-none  ">
                                {{-- <span  class="item col-md-2 text_1 font-16 fb-700 "> {{ __('lang.id') }}</span> --}}
                                <span  class="item col-md-4 text_1 font-16 fb-700 "> {{ __('lang.type') }}</span>
                                <span  class="item col-md-3 text_1 font-16 fb-700 "> {{ __('lang.value') }}</span>
                                <span  class="item col-md-4 text_1 font-16 fb-700 "> {{ __('lang.date') }}</span>
                                <span  class="item col-md-1 text_1 font-16 fb-700 ">  </span>
                           </div>
                            @foreach($ClientWalletOperations as $key => $wallet_operation)
                            <hr/>
                            <div class="row ps-md-3   align-items-center ">
                                {{-- <span  class="item col-md-2 col-4 text_1 d-md-none d-inline  font-16 fb-700 "> {{ __('lang.id') }}</span>
                                <span  class="item col-md-2 col-8 text_1 font-15"> #{{ $wallet_operation->client_wallet_operations_id }}</span> --}}
                                <span  class="item col-md-2 col-4 text_1 d-md-none d-inline  font-16 fb-700 "> {{ __('lang.type') }}</span>
                                <span  class="item col-md-4 col-8 text_1 font-15">{{ __('lang.type_'.$wallet_operation->client_wallet_operations_type) }} </span>
                                <span  class="item col-md-2 col-4 text_1 d-md-none d-inline font-16 fb-700 "> {{ __('lang.value') }}</span>
                                <span  class="item col-md-3 col-8 text_1 font-15 fb-700">
                                    @include('components.currency',['price'=> $wallet_operation->client_wallet_operations_value ])
                                </span>
                                <span  class="item col-md-2 col-4 text_1 d-md-none d-inline  font-16 fb-700 "> {{ __('lang.date') }}</span>
                                <span  class="item col-md-4 col-8 text_1 font-15">{{ Carbon\Carbon::parse($wallet_operation->client_wallet_operations_created_at)->timezone($account->accounts_timezone) }}</span>
                                <span  class="item col-md-2 col-4 text_1 d-md-none d-inline font-16 fb-700 "> {{ __('lang.show') }}</span>
                                <span  class="item col-md-1 col-8 text_1 font-15" data-bs-toggle="modal" href="#wallet-{{ $wallet_operation->client_wallet_operations_id }}" role="button"> <i class="fas fa-eye text_7"></i> </span>
                            </div>

                            <div class="modal fade" id="wallet-{{ $wallet_operation->client_wallet_operations_id }}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                  <div class="modal-content">
                                    <div class="modal-body p-5">
                                        <div class="row   align-items-center justify-content-center">
                                            <div class="col-12 text-center align-items-center justify-content-center mb-3">
                                                <h3>{{ __('lang.showWalletOperation') }}</h3>
                                            </div>
                                            {{-- <div  class="item col-md-12 text_1 font-16">{{ __('lang.id') }} : #{{ $wallet_operation->client_wallet_operations_id }}</div> <hr/> --}}
                                            <div  class="item col-md-12 text_1 font-16">{{ __('lang.type') }} :  {{ __('lang.type_'.$wallet_operation->client_wallet_operations_type) }} </div><hr/>
                                            <div  class="item col-md-12 text_1 font-16 ">{{ __('lang.value') }} :
                                                <span class="fb-700 font-16">
                                                    @include('components.currency',['price'=> $wallet_operation->client_wallet_operations_value ])
                                                </span>
                                            </div><hr/>
                                            @if($wallet_operation->client_wallet_operations_type == 'admin' || $wallet_operation->client_wallet_operations_type == 'admin_withdraw')
                                                <div class=" col-md-12 text_1 font-16">{{ __('lang.wallet_operations_id') }} : {{ $wallet_operation->wallet_operations_id }}</div><hr/>
                                                <div class=" col-md-12 text_1 font-16">{{ __('lang.comment') }} : {{ $wallet_operation->wallet_operation ?  $wallet_operation->wallet_operation->wallet_operations_comment : '' }}</div><hr/>
                                            @elseif($wallet_operation->client_wallet_operations_type == 'coupon' || $wallet_operation->client_wallet_operations_type == 'clients_coupon')
                                                <div class=" col-md-12 text_1 font-16">{{ __('lang.coupons_code') }} : {{ $wallet_operation->coupons_code }}</div><hr/>
                                            @elseif($wallet_operation->client_wallet_operations_type == 'order' || $wallet_operation->client_wallet_operations_type == 'refund_order')
                                                <div class=" col-md-12 text_1 font-16">{{ __('lang.orders_id') }} : {{ $wallet_operation->order ? $wallet_operation->order->orders_no : $wallet_operation->orders_id }}</div><hr/>
                                            @endif
                                            <div  class="item col-md-12 text_1 font-16">{{ __('lang.date') }} :  {{ Carbon\Carbon::parse($wallet_operation->client_wallet_operations_created_at)->timezone($account->accounts_timezone) }}</div><hr/>
                                            <div class="col-12 mt-5 text-center align-items-center justify-content-center">
                                                <a class="btn main-btn mx-3 fb-700   " data-bs-dismiss="modal" aria-label="Close"> {{ __('lang.cancel') }}</a>
                                            </div>
                                        </div>

                                    </div>
                                  </div>
                                </div>
                            </div>

                            @endforeach

                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="pagination" class="col-auto col-form-label col-form-label-sm font-16 text_3">
                            {{__('lang.paginationLabel',['from'=>$pagination->from,'to'=>$pagination->to,'total'=>$pagination->total])}}

                        </label>
                        <div class="col text-end">
                            @include('components.pagination',['pagination'=>$pagination,'route'=>route('wallet'),'class'=>'d-flex justify-content-end'])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
<link href="{{asset('vendors/lightpick/css/lightpick.css')}}" rel="stylesheet">

@endpush
@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="{{ asset('vendors/lightpick/lightpick.js') }}"  crossorigin="anonymous"></script>
    <script>
        var picker = new Lightpick({
            field: document.getElementById('datepicker'),
            singleDate: false,
            onSelect: function(start, end){
                var str = '';
                str += start ? start.format('Do MMMM YYYY') + ' to ' : '';
                str += end ? end.format('Do MMMM YYYY') : '...';
                // document.getElementById('result-2').innerHTML = str;
            }
        });
    </script>
@endpush