@extends('layouts.base-refonte', ["fixedHeader" => true])

@section('title', 'Notifications')

@section('css')
    <style>
        .notif-content-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #DCDBDC;
            border-radius: 6px;
            padding: 15px 35px;
            background: white;
        }

        @media only screen and (max-width: 767px) {
            .notif-content-box {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        .notif-content-wrap {
            display: flex;
            align-items: center;
        }

        .notif-icon-content {
            font-size: 32px;
            width: 76px;
            height: 76px;
            line-height: 76px;
            flex-shrink: 0;
            border-radius: 100%;
            background: #f1f3f8;
            text-align: center;
            color: var(--bs-success);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media only screen and (max-width: 767px) {
            .notif-icon-content {
                width: 56px;
                height: 56px;
                line-height: 56px;
                font-size: 28px;
            }
        }

        .notif-text-content {
            padding-left: 10px;
        }

        .notif-text-content p {
            font-size: 20px;
            line-height: 26px;
            margin: 0;
            text-transform: uppercase;
            font-weight: 500;
            color: #212832;
        }

        @media only screen and (max-width: 767px) {
            .notif-text-content p {
                font-size: 15px;
            }

            #ec-list {
                display: none;
            }
        }
        .notif-text-content span {
            font-weight: 300;
        }

        /* Paginate CSS */
        .page-item.active .page-link {
            border-radius: 20px;
        }

        .page-item:first-child .page-link,
        .page-item:last-child .page-link {
            border-radius: 50%;
        }

        .single-courses .courses-content .courses-author .author .author-name .ec-name {
            font-weight: 500;
            color: #212832;
            font-family: "Gordita";
        }

        .single-courses .courses-content .courses-price-review .courses-price {
            font-size: 12px;
            font-weight: 100;
            color: #212832;
            white-space: inherit;
        }

        /* Initial Bootstrap Buttons */
        .btn-primary {
            color: #fff;
            background-color: #707cd2;
            border-color: #707cd2;
            box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
        }

        .btn-secondary {
            color: #fff;
            background-color: #8898aa;
            border-color: #8898aa;
            box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
        }

        .btn-success {
            color: #fff;
            background-color: #2cd07e;
            border-color: #2cd07e;
            box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
        }

        .btn-info {
            color: #fff;
            background-color: #2cabe3;
            border-color: #2cabe3;
            box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
        }

        .btn-warning {
            color: #212529;
            background-color: #ffc36d;
            border-color: #ffc36d;
            box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
        }

        .btn-danger {
            color: #fff;
            background-color: #ff5050;
            border-color: #ff5050;
            box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
        }

        .btn-light {
            color: #212529;
            background-color: #f7fafc;
            border-color: #f7fafc;
            box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
        }

        .btn-dark {
            color: #fff;
            background-color: #313131;
            border-color: #313131;
            box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
        }

        /* Initial bootstrap Badge */
        .badge-pill {
            padding-right: 0.7em;
            padding-left: 0.7em;
            border-radius: 10rem;
        }
        .badge-primary {
            color: #fff;
            background-color: #707cd2
        }
        .badge-secondary {
            color: #fff;
            background-color: #8898aa
        }

        .badge-success {
            color: #fff;
            background-color: #2cd07e
        }

        .badge-info {
            color: #fff;
            background-color: #2cabe3
        }
        .badge-warning {
            color: #212529;
            background-color: #ffc36d
        }

        .badge-danger {
            color: #fff;
            background-color: #ff5050
        }
        .badge-light {
            color: #212529;
            background-color: #f7fafc
        }
        .badge-dark {
            color: #fff;
            background-color: #313131
        }

        /* Media Icon */
        .courses-thumb a[data-type]::before,
        .courses-thumb a[data-type]::after {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            border: none;
            top: 10px;
        }
        a[data-type="video"]::before {
            content: "\f144" !important;
        }

        a[data-type="pdf"]::before {
            content: "\f1c1" !important;
        }

        a[data-type="image"]::before {
            content: "\f03e" !important;
        }

        /* Display Notifs */
        .single-courses .courses-content .courses-price-review {
            padding: 8px;
            margin-top: 5px;
        }

        .single-courses {
            padding: 8px;
        }

        .single-courses .courses-images a img {
            max-height: 9.5rem;
            object-fit: cover;
        }

        .single-courses-rating {
            background: #ffff;
        }

        .single-courses-rating .courses {
            flex-wrap: inherit;
            display: flex;
            align-items: flex-start;
        }

        .single-courses-rating .courses .courses-thumb {
            display: flex;
            align-items: center;
            /* justify-content: center; */
            align-self: center;
            padding: 10px;
        }

        .courses .courses-thumb .notif-btn {
            width: 45px;
            position: relative;
            height: 45px;
            padding: 15px 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            margin: 5px;
        }

        .courses .courses-thumb .notif-btn a,
        .courses .courses-thumb .notif-btn i {
            margin: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 1;
            font-size: 1.2em;
        }

        .card-title span.badge {
            text-transform: capitalize;
            font-family: 'IcoFont';
        }

        .card .card-text span {
            font-size: 12px;
            font-weight: 100;
            color: #000000;
        }

        .card .card-title i {
            color: #309255;
            margin-right: 5px;
            font-size: 20px;
            line-height: 1;
        }

        .card .card-title {
            font-size: 1em;
            color: #212529;
            font-size: 15px;
            font-weight: 300;
        }

        .notification-actions {
            display: flex;
            justify-content: end;
            /* background: var(--bs-success); */
            /* border-radius: 0 0 10px 10px; */
            border-top: 0;
        }

        .notification-actions .notification-a {
            line-height: 2.5;
            padding: 0 0.8rem;
            font-size: 1rem;
            margin-bottom: 0.625rem;
            margin-right: 0.625rem;
        }

        .courses .card .card-header .course-title.unread::after {
            content: "non lu";
            width: fit-content;
            font-size: 0.75em;
            font-weight: 700;
            line-height: 1;
            padding: 0.35em 0.65em;
            border-radius: 10rem;
            display: inline-block;
            background: #ff4848;
            color: white;
            position: absolute;
            top: 12px;
            right: 15px;
            box-shadow: 1px 2px 1px 0px lightgrey;
        }

        .courses .card .card-header .course-title.unread {
            display: -webkit-box;
            width: 90%;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    </style>
@endsection

@section('content')

<div class="section section-padding" style="background: rgb(0 0 0 / 6%);">
    <div class="container" style="margin-top: 1%">
        {{-- breadcrump --}}
        <div class="notif-content-box mb-4">
            <div class="notif-content-wrap">
                <div class="notif-icon-content">
                    <i class="icofont-alarm"></i>
                </div>
                <div class="notif-text-content">
                    <p>Toutes les notifications</p>
                    <span style="font-size: 0.8em;">
                        <span id="tnotif2">{{$allNotifs['unread']}}</span>
                            notification(s) non lue(s) /
                        <span>{{$allNotifs['total']}}</span>
                    </span>
                </div>
            </div>
            <div class="notif-button d-none">
                <button class="btn btn-primary btn-hover-secondary">Retour</button>
            </div>
        </div>

        <!-- ============================================================== -->
        <!-- Start Page Content -->
        <!-- ============================================================== -->
        <div class="row">
            @if (count($allNotifs['latest']) == 0 || !in_array(getNormalLayout(),["prof","student"]))
                <div class="col-md-10 col-sm-12 m-auto">
                    <div class="card card-body">
                        <div class="card-title text-center mb-0">
                            <!-- Alert with content -->
                            @if(session()->has('success') && !session('success'))
                                @include('partials.alert')
                            @else
                                <!-- No notifications found -->
                                Aucune notification n'a été trouvé
                                <span class="btn text-dark">
                                    <i class="fa fa-inbox fa-2x"></i>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            @else
                <div class="col-lg-3 col-md-5 col-sm-12">
                    <!-- Courses Wrapper Start  -->
                    <div class="courses-wrapper-02 pt-0" id="ec-list">
                        @php
                            $ecs = $allNotifs['data']['ecus'];
                            $i = 1;
                        @endphp
                        @foreach ($ecs as $ec)
                            @php
                                $ec = $ec[0];
                                $occurs = array_count_values(array_column($allNotifs['latest'],'ecu_id'))[$ec['id_EC']];
                            @endphp
                            <!-- Single Courses Start -->
                            <div class="single-courses mt-0 mb-2" data-name="{{ $ec['id_EC'] }}" style="background: #ffffff;">
                                <div class="courses-images">
                                    <a href="javaScript:void(0);">
                                        <img src="{{ asset('edule/images/courses/courses-0'.( $i%5+1 ).'.jpg')}}" alt="Courses">
                                    </a>
                                </div>
                                <div class="courses-content">
                                    <div class="courses-author">
                                        <div class="author">
                                            <div class="author-name">
                                                <a class="name ec-name" href="{{route('details_cours',["course" => $ec['id_EC'] ])}}">{{ $ec['intituleEcu'] }}</a>
                                            </div>
                                        </div>
                                        <div class="tag">
                                            <a href="javaScript:void(0);" style="width: fit-content;">
                                                {{ findNiveau($ec['niveauFormation'])[0]."".$ec['annee']}}
                                            </a>
                                        </div>
                                    </div>

                                    <div class="courses-price-review mx-auto">
                                        <div class="courses-price mx-auto">
                                            <span class="fw-bold"> {{ $occurs }} </span>
                                            notification(s) sur les
                                            <span class="fw-bold">{{ count($allNotifs['latest']) }}</span>
                                            affichée(s)
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @php
                                $i ++;
                            @endphp
                            <!-- Single Courses End -->
                        @endforeach
                    </div>
                    <!-- Courses Wrapper End  -->
                </div>

                <div class="col-lg-9 col-md-7 col-sm-12" id="notifs-list">

                    <!-- Courses Wrapper Start  -->
                    <div class="courses-wrapper-02 pt-0">
                        @foreach ($allNotifs['latest'] as $n)
                            @php
                                $custumEl = $allNotifs['custom'][$n['type']];
                                $ecu = $allNotifs['data']['ecus'][$n['ecu_id']][0];

                                $msg = $allNotifs['custom'][$n['type']]['msg'];
                                $url = $allNotifs['custom'][$n['type']]["url"];
                                $url = str_replace(":p1",$n['ecu_id'],$url);
                                $nUrl = route('updateNotification', ':p1');
                                $nDate = explode(" ",$n['created_at']);

                                if ($n['id_media'] != null) {
                                    $media =  $allNotifs['data']['medias'][$n['id_media']][0];
                                    $msg = $msg." ".'<b>'.$media['titre'].'</b>';
                                    $url = $url.'#item='.$n['id_media'].'.'.$n['type'];
                                }

                                if ($n['statut'] === "UNREAD") {
                                    $url = str_replace(":p1",$n['notification_id'],$nUrl).'?callback='.$url;
                                    $nCls = "unread";
                                } else {
                                    $nCls = "";
                                }
                            @endphp
                            <!-- Single Courses Start -->
                            <div class="single-courses-rating mt-0 mb-5 p-0 border-0" data-name="{{ $ecu['id_EC'] }}">

                                <!-- Courses Start -->
                                <div class="courses">
                                    <div class="card card-body border-0 p-0" style="border-radius: 10px;">

                                        <div class="card-header mb-0" style="font-size: 1.05em; background: none;">
                                            <span
                                                class="course-title {{ $nCls }}"
                                                style="font-weight: 500"
                                                data-bs-toggle="tooltip"
                                                title="{{ $ecu['intituleEcu']}}"
                                            >
                                                {{ $ecu['intituleEcu']}}
                                            </span>
                                        </div>

                                        <div style="display: flex; align-items: flex-start;">
                                            <div class="courses-thumb w-100">
                                                <button class="btn notif-btn {{ $custumEl["btn-class"]}}">
                                                    @if (($n['type'] === "MEDIA") && count($media))
                                                        <a data-type="{{ mediaType($media['ext']) }}"></a>
                                                    @else
                                                        <i class="{{ $custumEl['btn-icon']}}"></i>
                                                    @endif
                                                </button>
                                                <div class="card-title mt-1" style="font-size: 1em; text-align: justify;">
                                                                                                        <div class="card-text">
                                                        <span class="notif-time">{{ $n['created_at'] }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="card-footer notification-actions">
                                            <a
                                                class="btn btn-light btn-hover-dark notification-a"
                                                data-bs-toggle="tooltip"
                                                href="{{$url}}"
                                                title="Cliquez pour voir"
                                                target="_blank"
                                            >
                                            Voir
                                            </a>
                                            @if ($n['statut'] === "UNREAD")
                                                <a
                                                    role="button"
                                                    class="btn btn-success mark-read notification-a"
                                                    href="{{ str_replace(":p1",$n['notification_id'],$nUrl) }}"
                                                    data-bs-toggle="tooltip"
                                                    title="Marquez la notification comme lue"
                                                >
                                                Marqué lu
                                                    <i class="fa fa-check-circle"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <!-- Courses End -->

                            </div>
                            <!-- Single Courses End -->
                        @endforeach
                    </div>
                    <!-- Courses Wrapper End  -->
                </div>
            @endif

            {{-- Pagination stuff --}}
            <div class="col-lg-3 col-md-5"></div>
            <div class="col-lg-9 col-md-7 col-sm-12 m-auto mt-2">
                {{-- <hr> --}}
                <!-- Page Pagination End -->
                @if ($totalPage)
                    <nav aria-label="Page navigation example" id="pagination-div">
                        <div class="w-100 d-flex justify-content-center mb-2 fw-bold d-none">
                            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=" fa fa-chevron-circle-left"></i>
                                </a>
                            </li>
                            <li class="page-item active mx-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="fa fa-chevron-circle-right"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                @endif
                <!-- Page Pagination End -->
            </div>
            {{-- End Pagination stuff --}}
        </div>
    </div>
</div>

@endsection


@section('script')
    <script>
        let customStyle = {
            "box-shadow": '0px 1px 6px 2px lightgrey',
            "border-top": "4px solid var(--gs-primary-color)",
            "transition": 'all .5s ease'
        }

        $(function(){
            $('.notification-actions .mark-read').on('click', function (e){
                e.preventDefault();
                const a = $(e.currentTarget);
                const item = a.parents(".courses").find('.course-title');
                const url = a.attr("href");

                markAsRead(url).then(() => {
                    // UI update
                    a.tooltip('hide');
                    a.remove();
                    item.removeClass("unread");
                }).catch((err) => {
                    // nothing to do.
                });
            });

            $('.notif-time').each((id, el) => {
                $(el).text( created_at($(el).html()) );
            });

            $('.single-courses').each((id, el) => {
                let n = $(el).attr('data-name');
                $(el).hover(
                    function (e) {
                        $('.single-courses-rating[data-name="' + n +'"]')
                            .removeClass('border-0')
                            .css(customStyle);
                    },
                    function (e) {
                        $('.single-courses-rating[data-name="' + n +'"]')
                            .addClass('border-0')
                            .css({
                                "box-shadow": '',
                                "border-top": ''
                            })
                    }
                );
            });
        })

    </script>
@endsection