@extends('layouts.app')

@section('title')
{{ __('messages.Product') }}
@endsection
@section('style')
  <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/ui-carousel.css') }}" />
      <link href="{{ asset('assets/vendor/libs/rateyo/rateyo.css') }}" rel="stylesheet">
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    @include('inc.breadcrumb', [
    'breadcrumb_items' => [
    __('messages.Home') => route('home'),
    __('messages.Products') => route('admin.products.index'),
    $item->name => 'active',
    ],
    ])



    <div
        class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-5 row-gap-4">
        <div class="d-flex flex-column justify-content-center">
           
        </div>
        <div class="d-flex align-content-center flex-wrap gap-2">
            <div class="btn-group">
                <button type="button" class="btn btn-outline-primary dropdown-toggle waves-effect" data-bs-toggle="dropdown" aria-expanded="false">
                    {{ __("messages.Actions") }}
                </button>
                <ul class="dropdown-menu">
                     @can('approve_reject_product')
                        @if ($item->status_approved == "waiting")
                            <a data-url="{{ route('admin.products.approve', $item->id) }}"
                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="post"
                                data-message="{{ __('messages.Are you sure ?') }}"
                                class="dropdown-item btn-action" href="javascript:void(0);"><i
                                    class="fa fa-circle-check"></i>
                                {{ __('messages.Accept') }}</a>


                                <a data-url="{{ route('admin.products.reject', $item->id) }}"
                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="post"
                                data-message="{{ __('messages.Are you sure ?') }}}"
                                class="dropdown-item btn-action" href="javascript:void(0);"><i
                                    class="ti ti-x"></i>
                                {{ __('messages.Reject') }}</a>
                        @else
                            <a data-url="{{ route('admin.products.waiting', $item->id) }}"
                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="post"
                                data-message="{{ __('messages.Are you sure ?') }}"
                                class="dropdown-item btn-action" href="javascript:void(0);"><i
                                    class="ti ti-arrow-right"></i>
                                {{ __('messages.Returned to pending') }}</a>

                            @if ($item->status_approved == "approved")
                                <a data-url="{{ route('admin.products.reject', $item->id) }}"
                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="post"
                                data-message="{{ __('messages.Are you sure ?') }}"
                                class="dropdown-item btn-action" href="javascript:void(0);"><i
                                    class="ti ti-x"></i>
                                {{ __('messages.Reject') }}</a>
                            @else
                                <a data-url="{{ route('admin.products.approve', $item->id) }}"
                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="post"
                                data-message="{{ __('messages.Are you sure ?') }}"
                                class="dropdown-item btn-action" href="javascript:void(0);"><i
                                    class="fa-solid fa-circle-check"></i>
                                {{ __('messages.Accept') }}</a>
                            @endif    
                        @endif
                    @endcan

                      @can('active_inactive_product')
                            @if (!$item->is_active)
                            <a data-url="{{ route('admin.products.active_inactive' , $item->id) }}"
                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="post"
                                data-message="{{ __('messages.Are you sure to activate ?') }}"
                                class="dropdown-item btn-action" href="javascript:void(0);"><i
                                    class="fa-solid fa-circle-check"></i> {{ __('messages.Activation') }}</a>
                            @else
                            <a data-url="{{ route('admin.products.active_inactive' , $item->id) }}"
                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="post"
                                data-message="{{ __('messages.Are you sure to deactivate ?') }}"
                                class="dropdown-item btn-action" href="javascript:void(0);">
                                <i class="fa-solid fa-circle-xmark"></i> {{ __('messages.Deactivate') }}</a>
                            @endif
                        @endcan

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

    <!-- Order Details Table -->

    <div class="row">
        <div class="col-12 col-lg-8">
            <div class="card mb-5 p-2">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title m-0">{{ __("messages.Info") }} </h5>
                    <p>
                        @if($item->price_before_discount && $item->price)
                            <span class="badge rounded-pill bg-success bg-glow">{{ __("messages.Discount") }} {{ App\Http\Services\GeneralService::calc_discount($item->price_before_discount , $item->price) }} %</span>
                        @endif
                    </p>
                </div>
                <div class="card-datatable table-responsive">
                    <table class="datatables-order-details table border-top text-center">
                        <thead>
                            <tr class="border border-dark">
                                <th class="border border-dark">{{ __('messages.Image') }}</th>
                                <th class="border border-dark">{{ __('messages.Name') }}  </th>
                                <th class="border border-dark">{{ __('messages.Restaurant') }}</th>
                                <th class="border border-dark">{{ __('messages.Price') }}</th>
                                <th class="border border-dark">{{ __('messages.Number of sell') }}</th>
                                <th class="border border-dark">{{ __('messages.Active') }} / {{ __("messages.In Active") }}</th>
                                <th class="border border-dark">{{ __('messages.Approve status') }}</th>
                            </tr>
                            <tr class="border border-dark">
                                <td class="border border-dark">
                                    
                                    <div class="avatar me-3">
                                        <img src="{{  $item->image_main ? asset($item->image_main) : asset("default-images/default.png")  }}" alt="Avatar" class="rounded-circle zoom-image" />
                                    </div>
                                </td>

                                <td class="border border-dark">
                                  
                                     {{ $item->name }}
                                </td>


                                    
                                <td class="border border-dark">{{ $item->user->restaurant_info->name }}</td>
                                <th class="border border-dark w-50">
                                    @if(count($item->attributes) == 0)
                                    {{ $item->price }}
                                    @else
                                    -----
                                    @endif
                                </th>
                                <th class="border border-dark w-25"" >{{ count($item->order_items_paid) }}</th>
                                <th class="border border-dark w-25" >
                                    @if (!$item->is_active)
                                        <span class="badge bg-label-danger me-1">{{ __('messages.In Active') }}<i
                                                class="fa-solid fa-circle-xmark"></i></span>
                                    @else
                                        <span style="min-width: 100px"
                                            class="badge bg-label-primary me-1">{{ __('messages.Active') }}<i
                                                style="" class="fa-solid fa-circle-check"></i></span>
                                    @endif
                                </th>
                                <th class="border border-dark">
                                     <span style="min-width: 120px"  class="badge bg-label-{{ App\Enums\ApprovalStatusEnum::get_color($item->status_approved) }} me-1">{{ App\Enums\ApprovalStatusEnum::get_trans($item->status_approved) }}<i  class=" {{ App\Enums\ApprovalStatusEnum::get_icon($item->status_approved) }}"></i></span>
                                </th>
                            </tr>
                        </thead>
                    </table>
                
                </div>
            </div>
            <div class="card mb-5">
                <div class="card-header">
                    <div class="d-flex justify-content-between">
                        <h5 class="card-title m-0">{{ __("messages.Most Recent Ratings") }}</h5>
                        <p>
                            @can('view_products_rate')
                            <a class="btn btn-primary" href="{{ route("admin.products.rates" , $item->id) }}">{{ __("messages.View More") }} <i class="ti ti-caret-left"></i></a>

                                
                            @endcan
                        </p>
                    </div>
                </div>
                <div class="card-body pt-1">
                   
                        @if(count($item->rates))
                          <div class="table-responsive text-nowrap border border-dark rounded"
                            style="max-height: 300px; overflow-y: auto;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ __('messages.Client') }}</th>
                                        <th>{{ __('messages.Rate') }}</th>
                                        <th>{{ __('messages.Comment') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="table-border-bottom-0">

                                    @foreach ($item->rates as $item_rate)
                                        <tr>
                                            <th>{{ $loop->index + 1 }}</th>
                                            <td>{{ $item_rate->user->name }}</td>
                                            <td>
                                                <div data-rate="{{ $item_rate->rate }}" data-rateyo-read-only="true" class="basic-ratings"></div>
                                            </td>
                                            <td style="max-width: 150px; word-wrap: break-word; word-break: break-word; white-space: normal;"> {{ $item_rate->comment ?? '----------' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @else

                         <div class="text-center">
                            <img width="200" height="200" src="{{ asset("assets/img/empty_data2.png") }}" alt="">
                            <p>{{ __("messages.There is no data to display") }}</p>
                        </div>
                        @endif
                      
                        
                </div>
            </div>

            <div class="card mb-5">
                <div class="card-header">
                    <h5 class="card-title m-0">{{ __("messages.Image gallery") }}</h5>
                </div>
                <div class="card-body pt-1">
                   
                        @if(count($item->media))
                        <div class="col-12 mb-6">
                            <div class="swiper" id="swiper-3d-coverflow-effect">
                                <div class="swiper-wrapper">
                                    @foreach ($item->media as $media )
                                             <div class="swiper-slide" style="background-image: url({{ asset($media->image) }})"> </div>
                                    @endforeach
                                </div>
                            <div class="swiper-pagination"></div>
                            </div>
                        </div>
                        @else

                         <div class="text-center">
                            <img width="200" height="200" src="{{ asset("assets/img/empty_data2.png") }}" alt="">
                            <p>{{ __("messages.There is no data to display") }}</p>
                        </div>
                        @endif
                      
                        
                </div>
            </div>
            
        </div>
        <div class="col-12 col-lg-4">
            <div class="card mb-5">
                <div class="card-header">
                    <h5 class="card-title m-0">{{ __("messages.Restaurant info") }}</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-start align-items-center mb-5" 
                    @can('show_restaurant_details')
                        onclick="window.location.href='{{ route("admin.restaurants.show"  , $item->user_id) }}'"
                    @endcan
                    >
                        <div class="avatar me-3">
                            
                            <img src="{{  $item->user->restaurant_info?->logo ? asset($item->user->restaurant_info?->logo) : asset("default-images/profile.png")  }}" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="d-flex flex-column">
                            <a   @can('show_restaurant_details')  href="{{ route("admin.restaurants.show"  , $item->user_id) }}"  @endcan class="text-body text-nowrap">
                                <h6 class="mb-0">{{ $item->user->restaurant_info->name }}</h6>
                            </a>
                            <span class="text-muted"> {{ $item->user->name }}</span>
                        </div>
                    </div>
                   
                    <div class="d-flex justify-content-between">
                        <h6 class="mb-1">{{ __("messages.Contact Information") }}</h6>
                        <h6 class="mb-1">
                        </h6>
                    </div>
                    <p class="mb-1">{{ __("messages.Email") }} : {{ $item->user->email }}</p>
                    <p class="mb-0">{{ __("messages.Mobile") }} : {{ $item->user->restaurant_info->mobile }}</p>
                </div>
            </div>


            <div class="card mb-5">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="card-title m-0">{{ __("messages.Categories") }}</h5>
                   
                </div>
                <div class="card-body">
                    @forelse ($item->categories as  $category)
                        <span class="badge rounded-pill bg-label-success">{{ $category->name }}</span>
                    @empty
                        <div class="text-center">
                            <img width="120" height="120" src="{{ asset("assets/img/empty_data2.png") }}" alt="">
                            <p>{{ __("messages.There is no data to display") }}</p>
                        </div>
                    @endforelse
                </div>
            </div>


            <div class="card mb-5">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="card-title m-0">{{ __("messages.Add Ons") }}</h5>
                   
                </div>
                <div class="card-body">
                    @forelse ($item->add_ons as  $addon)
                        <span class="badge rounded-pill bg-label-success">{{ $addon->name }}</span>
                    @empty
                        <div class="text-center">
                            <img width="120" height="120" src="{{ asset("assets/img/empty_data2.png") }}" alt="">
                            <p>{{ __("messages.There is no data to display") }}</p>
                        </div>
                    @endforelse
                </div>
            </div>

            
            <div class="card mb-5">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="card-title m-0">{{ __("messages.Attributes") }}</h5>
                   
                </div>
                <div class="card-body">
                @if(count($item->attributes))
                    <table class="datatables-order-details table">
                        <thead>
                            <tr class="border border-dark">
                                <th class="border border-dark">{{ __('messages.Attributes') }}</th>
                                <th class="border border-dark">{{ __('messages.Price') }}</th>
                                
                            </tr>

                            @foreach ($item->attributes as $attr)

                            @php
                            $html_attr="";
                            @endphp
                            @foreach($attr->combination as $combination)
                            @php
                                $attribute = \App\Models\Attribute::where("id" , $combination['attr_id'])->first();
                                $value =  \App\Models\AttributeValue::where("id"  , $combination['value'] )->first();
                                $html_attr .= $attribute->name . "    "  . $value?->name . " , ";
                            @endphp
                            @endforeach


                            <tr class="border border-dark">
                                <th class="border border-dark">{{ rtrim($html_attr, ' , ') }}</th>
                                <th class="border border-dark">{{ $attr->price  }}</th>
                                
                            </tr>

                            @endforeach 
                        
                    
                        
                            
                        
                        </thead>
                    </table>
                @else
                    <div class="text-center">
                        <img width="120" height="120" src="{{ asset("assets/img/empty_data2.png") }}" alt="">
                        <p>{{ __("messages.There is no data to display") }}</p>
                    </div>
                @endif
                </div>
            </div>
        </div>
    </div>




</div>
@endsection

@section("script")
    <script src="{{ asset("assets/js/ui-carousel.js") }}"></script>
    <script src="{{ asset('assets/vendor/libs/rateyo/rateyo.js') }}"></script>
    <script>
        $(function() {
            $('.basic-ratings').each(function() {
                let dynamicRate = $(this).data('rate'); // الحصول على القيمة من الـ data-rate

                $(this).rateYo({
                    rating: dynamicRate,
                    rtl: isRtl,
                    spacing: '8px'
                });
            });
        })
    </script>
@endsection