@extends('layouts.stores_dashboard_layout')


@section('title')
    {{trans('stores_dashboard.stores_dashboard')}}
@endsection

@section('style')

@endsection

@section('content')

    <div class="dash-title p-2">
        <h6 class="bold">{{trans('stores_dashboard.stores_dashboard')}}</h6>
        <p class="mb-1">{{trans('stores_dashboard.welcome')}}</p>
    </div>

    <div class="row ">
        <div class="col-sm-6 col-md-3  p-2">
            <div class=" dash-header-card color-white p-3 round5 gradient-bg">
                <h3 class="bold">{{count($new_orders)}}</h3>
                <h6 class="font12">{{trans('stores_dashboard.new_orders')}}</h6>
                <div class="icon">
                    <img class="icon-img" src="{{URL::to('site/imgs/icons/dash1 (2).svg')}}" alt="">
                    <img class="rect" src="{{URL::to('site/imgs/icons/Rectangle 1906.svg')}}" alt="">
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3  p-2">
            <div class=" dash-header-card color-white p-3 round5 gradient-bg">
                <h3 class="bold">{{count($active_orders)}}</h3>
                <h6 class="font12">{{trans('stores_dashboard.active_orders')}}</h6>
                <div class="icon">
                    <img class="icon-img" src="{{URL::to('site/imgs/icons/dash1 (1).svg')}}" alt="">
                    <img class="rect" src="{{URL::to('site/imgs/icons/Rectangle 1906.svg')}}" alt="">
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3  p-2">
            <div class=" dash-header-card color-white p-3 round5 gradient-bg">
                <h3 class="bold">{{count($finish_orders)}}</h3>
                <h6 class="font12">{{trans('stores_dashboard.finished_orders')}}</h6>
                <div class="icon">
                    <img class="icon-img" src="{{URL::to('site/imgs/icons/dash1 (3).svg')}}" alt="">
                    <img class="rect" src="{{URL::to('site/imgs/icons/Rectangle 1906.svg')}}" alt="">
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3  p-2">
            <div class=" dash-header-card color-white p-3 round5 gradient-bg">
                <h3 class="bold">{{count($products)}}</h3>
                <h6 class="font12">{{trans('stores_dashboard.products')}}</h6>
                <div class="icon">
                    <img class="icon-img" src="{{URL::to('site/imgs/icons/dash1 (4).svg')}}" alt="">
                    <img class="rect" src="{{URL::to('site/imgs/icons/Rectangle 1906.svg')}}" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- end dashboard -->

    <!-- start new order table -->
    

    <div  class="table-cont p-2 ">
        <div class="row align-items-center">
            <div class="dash-title col-md p-0 mt-3">
                <h6 class="bold">{{trans('stores_dashboard.recent_orders')}}</h6>
                <p class="mb-1">{{trans('stores_dashboard.recent_orders_desc')}}</p>
            </div>
            
        </div>
        
        <table id="dataTable1" data-order='[[ 1, "asc" ]]' data-page-length='25' class="table text-center  table-striped table-ed" style="width:100%">
                    <thead class="table-head">
                        <tr >
                        <th>{{trans('stores_dashboard.number')}}</th>
                            <th>{{trans('stores_dashboard.order_number')}}</th>
                          <th>{{trans('stores_dashboard.name')}}</th>
                          <th>{{trans('stores_dashboard.deliver_address')}}</th>
                          <th>{{trans('stores_dashboard.total_price')}}</th>
                          <th>{{trans('stores_dashboard.created_at')}}</th>
                          <th>{{trans('stores_dashboard.deliver_time')}}</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody data-class-name="table-body">
                        @foreach($new_orders as $order)
                        <tr>
                            <td>{{ $i++ }}</td>
                            <td>{{$order->citc_referenceCode}}</td>
                            <td>{{$order->user?->name}}</td>
                            <td>{{$order->receive_address}}</td>
                            <td>{{$order->total_price}}</td>
                            <td>{{date('d-m-Y', strtotime($order->created_at))}}</td>
                            <td>{{$order->deliver_time}}{{trans('stores_dashboard.hour')}}</td>
                            <td class="table-menu" >
                                <i onclick="openTableMenu(this)" class=" cp p-2 fa fa-ellipsis-h"></i>
                                <div class="menu-cont" >
                                    <ul class="white-bg round7 pt-1 pb-1 shadow1">
                                        <li> <a href="{{route('stores_dashboard.get_order_details',$order->id)}}"><i class="fa fa-eye color1"></i> {{trans('stores_dashboard.details')}}</a> </li>
                                        <li class="border-bottom"></li>
                                        @if($order->store_status=='pending')
                                            <li>
                                            <form id="submitform">
                                            @csrf
                                                <input type="hidden" name="id" value="{{$order->id}}">
                                                <button id="submitbtn" type="submit" class="button5 m-2 material-button">{{trans('stores_dashboard.accept')}}</button>
                                            </form>
                                            </li>
                                            <li class="border-bottom"></li>
                                            <li>
                                            <form id="refuseform">
                                            @csrf
                                                <input type="hidden" name="id" value="{{$order->id}}">
                                                <button id="refusebtn" type="submit" class="button4 m-2 material-button"> {{trans('stores_dashboard.refuse')}}</button>
                                            </form>
                                            </li> 
                                        @endif    
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>

                </table>
    </div>
    <!-- end new order table -->


    <!-- start products and customer openions -->
    <div class="row ">
    <div class="col-md m-2  p-0">
            <div class="white-bg round7 ">
                <h6 class="bold border-bottom p-3">{{trans('stores_dashboard.products')}}</h6>
                <div class="dash-card-content pl-2 pr-2">
                   
                    @foreach($products as $product)
                    <div class="row m-0 pt-1 pb-1 align-items-center justify-content-center ">
                        <div class="col-md p-0 p-md-1 text-center ">
                            <span class="gray font16" ></span>
                            <img src="{{$product->imagePath}}" style="max-width: 80px;" class="m-0 round7 m-md-1 " alt="">
                        </div>
                        <div class="col-10 col-md-7 p-1 ">
                            <h6 class="bold font14">{{$product->name}}</h6>
                            <p class="mb-1">{{$product->desc}}</p>
                            <h6 class="bold font14 color1 m-0">{{$product->groups()->first()?->price()}}</h6>
                        </div>
                    </div>
                    <hr>
                    @endforeach

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

        <!-- openions -->
        <div class="col-md m-2 p-0 ">
            <div class="white-bg round7 ">
                <h6 class="bold border-bottom p-3">{{trans('stores_dashboard.reviews')}}</h6>
                <div class="dash-card-content pl-2 pr-2">
                @foreach($reviews as $review)

                    <div class="row m-0 pt-1 pb-1 align-items-center justify-content-center ">
                        <div class="col-md p-0 p-md-1 text-center ">
                            <img src="{{$review->user->avatarPath}}" style="max-width: 80px;" class="m-0 m-md-1 round7 " alt="">
                        </div>
                        <div class="col-11 col-md-8 p-1 ">
                            <h6 class="bold font14">{{$review->user->name}}</h6>
                            <div class="">
                            @if($review->rate==0)
                                            <div class="stars-cont d-inline-block direction2">
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                            </div>
                                        @elseif($review->rate>0 && $store->rating()<=1)
                                            <div class="stars-cont d-inline-block direction2">
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                            </div>
                                        @elseif($store->rating()>1 && $store->rating()<=2)
                                            <div class="stars-cont d-inline-block direction2">
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                            </div>
                                        @elseif($store->rating()>2 && $store->rating()<=3)
                                            <div class="stars-cont d-inline-block direction2">
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                            </div>
                                        @elseif($store->rating()>3 && $store->rating()<=4)
                                            <div class="stars-cont d-inline-block direction2">
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gold"></i>
                                                <i class="fa fa-star font20 gray"></i>
                                            </div>
                                        @elseif($store->rating()==5)
                                        <div class="stars-cont d-inline-block direction2">
                                            <i class="fa fa-star font20 gold"></i>
                                            <i class="fa fa-star font20 gold"></i>
                                            <i class="fa fa-star font20 gold"></i>
                                            <i class="fa fa-star font20 gold"></i>
                                            <i class="fa fa-star font20 gold"></i>
                                        </div>
                                        @endif 
                            </div>
                            <p class="mb-1">{{$review->comment}}</p>
                        </div>
                    </div>

                    <hr>
                @endforeach

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

@endsection

@section('scripts')

<script>
        $(document).on('click','#submitbtn',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#submitform').get(0);
            var formData = new FormData(form);

            $.ajax({
                url: "{{route('stores_dashboard.accept_order')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    //got a resposne?
                    if (data.key == 'success') {
                        Swal.fire({
                                icon: 'success',
                                title: '<h5 class="bold">'+data.msg+'</h5>',
                                showConfirmButton: false,
                                timer: 1500
                            });
                            location.reload();
                    } else {
                        swal.fire({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });
 </script>

  <script>
        $(document).on('click','#refusebtn',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#refuseform').get(0);
            var formData = new FormData(form);

            $.ajax({
                url: "{{route('stores_dashboard.refuse_order')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    //got a resposne?
                    if (data.key == 'success') {
                        Swal.fire({
                                icon: 'success',
                                title: '<h5 class="bold">'+data.msg+'</h5>',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        location.reload();
                    } else {
                        swal.fire({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });
 </script>
    
@endsection