@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('Obavestenja') }}
@endsection

@section('title', 'Obavestenja kompanija')

@section('content')
    @include('cms.notifications.partials.index._table-header')
    <div class="row">
        <div class="col-12">
            <div class="h-100 bgc-white pt-0 radius-1 shadow-sm mx-auto">
                <div class="w-100 brc-info-tp2 radius-t-1"></div>
                <div class="card h-100 border-0">
                    <div class="card-body h-100 d-flex flex-column justify-content-center py-3 px-3 border-0">
                        @include('cms.notifications.partials.index._table-filter')

                        <div class="table-responsive-md table-responsive-lg table-responsive-sm">
                            <table class="table table-bordered table-hover text-dark-blue custom-table">
                                <thead class="bgc-grey-l4">
                                    <tr>
                                        <th class="column-xs">
                                            <span>Kompanija</span>
                                        </th>
                                        @foreach ($notificationTypes as $notificationType)
                                            <th class="column-xs">
                                                <span>{{ $notificationType->name }}</span>
                                            </th>
                                        @endforeach
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($sentNotificationsCompanies as $company)
                                        <tr class="bgc-h-default-l3 d-style">
                                            <td>
                                                <a href="{{ route('cms.notifications.show', $company) }}">
                                                    {{ htmlspecialchars_decode($company->name) }}
                                                </a>
                                            </td>
                                            @foreach ($notificationTypes as $notificationType)
                                                @php
                                                    $notificationsSentCount = '/';
                                                    if ($company->sentNotificationsUser->count() > 0) {
                                                        foreach ($company->sentNotificationsUser as $notification) {
                                                            if ($notificationType->id == $notification->user_notification_type_id) {
                                                                $notificationsSentCount = $notification->total_sent_user_notifications;
                                                                break;
                                                            }
                                                        }
                                                    }
                                                @endphp
                                                <th class="column-xs">
                                                    {{ $notificationsSentCount }}
                                                </th>
                                            @endforeach

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <!-- table end -->
                        </div>
                        <!-- table-responsive end -->
                        {{ $sentNotificationsCompanies->links('partials._custom-pagination') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent
    <script>
        const getRouteParams = () => {
            const name = $("input[type=search][name=name]").val();
            const user_notification_type_id = $("#ddlNotificationType").val();
            const date = $("#date").val();

            return {
                name,
                user_notification_type_id,
                date
            }
        }

        const filter = () => {
            window.location = route('cms.notifications.index', getRouteParams());
        }

        $(document).on('click', "#btnSubmitSearch", (event) => {
            filter();
        });

        $(document).on('keyup', "input[type=search][name=name]", (event) => {
            if (event.key === 'Enter' || event.keyCode === 13) {
                filter();
            }
            if (event.key === 'Escape' || event.keyCode === 27) {
                $(event.target).val = '';
                filter();
            }
        });

        $(document).on('change', '#ddlNotificationType', (event) => {
            filter();
        });

        $(document).on('change', '#date', (event) => {
            filter();
        });
    </script>
@endsection