@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.storeCredit') ; $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_store_credit','route'=>'storeCredit'])
                </div>
                <div class="col-lg-9 col-12">
                    @include('includes.errors')
                    <div class="card px-3 border-raduis-btm-0 border-raduis-top-0 card-with-border">
                        <div class="card-body row">
                            <div class="col-md-12 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.storeCredit') }} :</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_store_credit ])
                                </span>
                            </div>
                        </div>
                    </div>

                    <form class="form-horizontal mt-4" action="{{ route('storeCredit') }}" 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="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="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-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-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($StoreCreditOperations as $key => $store_credit_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.type') }}</span>
                                <span  class="item col-md-4 col-8 text_1 font-15">{{ __('lang.type_'.$store_credit_operation->store_credit_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'=> $store_credit_operation->store_credit_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($store_credit_operation->store_credit_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="#store-credit-{{ $store_credit_operation->store_credit_operations_id }}" role="button"> <i class="fas fa-eye text_7"></i> </span>
                            </div>

                            <div class="modal fade" id="store-credit-{{ $store_credit_operation->store_credit_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.showStoreCreditOperation') }}</h3>
                                            </div>
                                            <div  class="item col-md-12 text_1 font-16">{{ __('lang.type') }} :  {{ __('lang.type_'.$store_credit_operation->store_credit_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'=> $store_credit_operation->store_credit_operations_value ])
                                                </span>
                                            </div><hr/>
                                            @if($store_credit_operation->store_credit_operations_type == 'coupon')
                                                <div class=" col-md-12 text_1 font-16">{{ __('lang.coupons_code') }} : {{ $store_credit_operation->coupons_code }}</div><hr/>
                                            @elseif(in_array($store_credit_operation->store_credit_operations_type, ['order','refund_order']))
                                                <div class=" col-md-12 text_1 font-16">{{ __('lang.orders_id') }} : {{ $store_credit_operation->order ? $store_credit_operation->order->orders_no : $store_credit_operation->orders_id }}</div><hr/>
                                            @endif
                                            <div  class="item col-md-12 text_1 font-16">{{ __('lang.date') }} :  {{ Carbon\Carbon::parse($store_credit_operation->store_credit_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('storeCredit'),'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') : '...';
            }
        });
    </script>
@endpush