@extends('layouts.index')

@section('content')

    <div class="content mt-3">

        {{-- Breadcrumb Section --}}
        @php
            $pages = [] ; $page = [] ;
            $page['title'] = __('lang.home') ; $page['route'] = route('home') ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.notifications') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_1' ;
            $pages[] = $page ;
        @endphp
        @include('components.breadcrumb',$pages)

        <div class="container mb-5 text-right">
            <a aria-label="go to read all notifications page" href="{{ route('readAllCustomerNotification') }}" class="btn main-btn">{{ __('lang.readAllNotification') }}</a>
            <div class=" table-responsive row mx-3 {{sizeof($notifications) > 0 ? 'mt-3' : 'mt-5 justify-content-center' }} text-start">
                @if(sizeof($notifications) > 0)
                    @foreach($notifications as $key => $notification)

                        <span class="d-block font-11 text-left">
                            @php
                                $timezone = $account ? $account->accounts_timezone : '';
                                $customer_locale =  $notification->data->data->customer_locale ?? '';
                                // dd($notification->data->data);
                            @endphp
                            {{  Carbon\Carbon::parse($notification->data->data->created_at)->timezone($timezone)->format('y-m-d h:i A') }}
                        </span>
                        <span class=" main_font_color fb-500 notifications_id-{{ $notification->id ?? ''}} text-left"   >
                            {{ $notification->data->data && isset($notification->data->data->{'title_' . $customer_locale})  ? $notification->data->data->{'title_' . $customer_locale} : '' }}
                            {{ $notification->data->data->$customer_locale ??  '' }}
                        </span>
                        <hr/>
                    @endforeach

                @endif

            </div>

            @if( $pagination->last_page > 1)
                <div class=" col-12 row text-center align-items-center justify-content-center mt-4">
                    {{-- <div id="overlay" class="">
                        <div class="cv-spinner">
                            <span class="spinner"></span>
                        </div>
                    </div> --}}
                    <div class="col-md-6 col-12 "  id="pagination-form">
                    @include('includes.pagination-custom',['pagination'=>$pagination])
                    {{-- <div x-show="pages.length > 1" :class="pages.length > 1 ? 'd-flex' : 'd-none' " class=" justify-content-center gap-2 mt-4">

                        <div class="form-group row">
                            <label for="pagination" class="col-sm-6 col-form-label col-form-label-sm">{{__('lang.selectPage')}}</label>
                            <div class="col-sm-6">
                                <select name="pagination" class="form-control form-control-sm select2  " id="pagination"   >
                                    @for($i=1 ; $i <= $pagination->last_page ; $i++)
                                        <option value="{{route('allNotifications',['page'=>$i])}}"  {{$i == $pagination->current_page ? 'selected' : '' }} >  {{$i}}  </option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div> --}}
                </div>
            @endif
        </div>
    </div>
@endsection

@push('js')
<script>
    function changePage(url){
        window.location.href =   url;
    }
    document.addEventListener('DOMContentLoaded', function() {
        var pagination = document.getElementById('pagination');
        if(pagination){
            pagination.addEventListener('change', function(){
                console.log(this.value);
                window.location.href = this.value;
            });
        }
    });
</script>
@endpush