@extends('layouts.baseprof')

@section('titre', 'Notifications')

@section('content')

<div>
    <div class="page-content container-fluid" style="margin-top: 1%">
        {{-- breadcrump --}}
        <div class="page-breadcrumb border mb-4 align-self-center" style="padding: 1em;">
            <div class="row">
                <div class="col-12">
                    <h5 class="text-uppercase font-weight-bold mb-0">
                        Toutes les notifications <i class="fa fa-bell ml-2 mr-2"></i>
                        <span style="font-size: 0.8em;">
                            (<span id="tnotif2">{{$allNotifs['unread']}}</span> non lu)
                        </span>
                    </h5>
                </div>
            </div>
        </div>

        <!-- ============================================================== -->
        <!-- Start Page Content -->
        <!-- ============================================================== -->
        <div class="row">
            <div class="col-md-10 col-sm-12 m-auto">
                @if (count($allNotifs['latest']) == 0 || !in_array(getNormalLayout(),["prof","student"]))
                    <div class="card card-body">
                        <div class="card-title text-center mb-0">
                            <!-- Alert with content -->
                            @if(session()->has('success') && !session('success'))
                                <div class="alert alert-danger">
                                    <i class="fa fa-times-circle"></i> {{session('msg')}}
                                </div>
                                @php
                                    session()->pull('success','default'); session()->pull('msg','default');
                                @endphp
                            @else
                                Aucune notification n'a été trouvé
                                <span class="btn text-dark">
                                    <i class="fas fa-inbox "></i>
                                </span>
                            @endif
                        </div>
                    </div>
                @else
                    @foreach ($allNotifs['latest'] as $n)
                        <div class="card card-body" style="padding: 1rem .5rem;">
                            <div class="media w-100">
                                <div class="align-self-center mr-2 d-flex align-items-center justify-content-center">
                                    <button class="btn {{ $allNotifs['custom'][$n['type']]["btn-class"]}}" style="width: 45px; height: 45px;">
                                        <i class="{{ $allNotifs['custom'][$n['type']]['btn-icon']}}"></i>
                                    </button>
                                </div>
                                <div class="w-100">
                                    <div class="card-title mb-0" style="font-size: 1.05em;">
                                        {{$allNotifs['data']['ecus'][$n['ecu_id']][0]['intituleEcu']}}
                                        @if ($n['statut'] == "UNREAD")
                                            <span class="badge badge-pill badge-danger" tag="{{$n['created_at']}}">non lu</span>
                                        @else
                                            <span class="badge badge-pill badge-secondary">lu <i class="fa fa-check-circle"></i></span>
                                        @endif
                                    </div>
                                    @php
                                        $n["created_at"] = explode(" ",$n['created_at']);
                                        $msg = $allNotifs['custom'][$n['type']]['msg']." ".(($n['id_media'] != null)?'<b>'.$allNotifs['data']['medias'][$n['id_media']][0]['titre'].'</b>':'');
                                        $url = $allNotifs['custom'][$n['type']]["url"];
                                        $url = str_replace(":p1",$n['ecu_id'],$url);
                                    @endphp
                                    <span class="text-muted" style="font-size: 0.9em;">
                                        <i class="fa fa-clock"></i>  {{$n['created_at'][0]. ' à '.$n['created_at'][1]}}
                                    </span>
                                    <div class="card-text mt-1" style="font-size: 1em;">  </div>
                                </div>
                            </div>
                            <div class="notification-actions">
                                <form action="{{route('updateNotification',$n['notification_id'])}}" class="d-inline-block mr-2" method="POST">
                                    @csrf
                                    <input type="hidden" name="callback" value="{{$url}}" required>
                                    <input type="hidden" name="refresh" value="YES" required>
                                    <input type="hidden" name="status" value="{{$n['statut']}}" required>
                                    <a class="btn btn-light btn-sm border notification-a border-dark">
                                        voir <i class="fas fa-external-link-alt"></i>
                                    </a>
                                </form>

                                @if ($n['statut'] == "UNREAD")
                                    <form action="{{route('updateNotification',$n['notification_id'])}}" method="POST" tag="{{ ($n['created_at'][0]. ' '.$n['created_at'][1])}}">
                                        @csrf
                                        <input type="hidden" name="refresh" value="NO" required>
                                        <input type="hidden" name="status" value="{{$n['statut']}}" required>
                                        <a role="button" class="btn btn-success border btn-sm text-white notification-a">
                                            marqué lu
                                            <i class="fa fa-check-circle"></i>
                                        </a>
                                    </form>
                                @endif
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>

            {{-- Pagination stuff --}}
            <div class="col-11 m-auto">
                <hr>
                @if ($totalPage)
                    <nav aria-label="Page navigation example" id="pagination-div">
                        <div class="w-100 d-flex justify-content-center mb-2 font-weight-bold">
                            Page
                        </div>
                        <ul class="pagination justify-content-center">
                            <li class="page-item {{ ($nPage <= 1)?'disabled':''}}">
                                <a class="page-link" href="{{ route('getNotifications', ['nPage' => $nPage-1])}}" tabindex="-1">
                                    <i class=" fas fa-chevron-circle-left"></i>
                                </a>
                            </li>
                            <li class="page-item active ml-1 mr-1"><a class="page-link" href="#pagination-div">{{ $nPage. ' / '.$totalPage }}</a></li>
                            <li class="page-item {{ ($nPage  >= $totalPage)?'disabled':'' }}">
                                <a class="page-link" href="{{ route('getNotifications', [ 'nPage' => $nPage+1])}}">
                                    <i class="fas fa-chevron-circle-right"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                @endif
            </div>
            {{-- End Pagination stuff --}}
        </div>
    </div>
</div>

@endsection


@section('script')
    <script>
        $(function(){
            $('.notification-a').on('click', function (){
                $(this).parents('form').submit();
            });

            $('form[tag]').on('submit', function(e){
                markAsRead(e);
            });
        })
    </script>
@endsection