@extends('admin.layouts.default')

@section('content')

    <div class="forecast_overview" id="app">

        <div v-if="hasContentLoaded" v-cloak>

            <div class="heading-wrapper">
                <h1>Forecast Overview</h1>
            </div>

            <div class="content">

                <table>
                    <tr>
                        <th>ID</th>
                        <th>Actions</th>
                        <th>Template Name</th>
                        <th>Status</th>
                    </tr>

                    <tr v-for="(template, index) in templates"
                        :key="index"
                    >
                        <td>@{{ template.ID }}</td>
                        <td>
                            <div class="actions">
                                @if(Sentinel::inRole('admin'))

                                    <img src="{{asset('assets/img/trash.png')}}"
                                         alt="close"
                                         title="Close"
                                         @click="toggleCloseModal(template)">

                                    <a :href=" '/planning/forecast/new-forecast-panel/' + template.ID ">
                                        <img src="{{asset('assets/img/settings.png')}}"
                                             alt="edit template"
                                             title="Edit Template"/>
                                    </a>

                                    <img src="{{asset('assets/img/update.tif')}}"
                                         title="Update"
                                         @click="toggleUpdateModal(template)"/>

                                    <a :href="'/planning/progress-dashboard?template_id=' + template.ID">
                                        <img src="{{asset('assets/img/progress_dashboard.tif')}}"
                                             alt="progress dashboard"
                                             title="Progress Dashboard"/>
                                    </a>

                                    <a :href=" '/api/planning/forecast/' + template.ID + '/export-to-excel?from-overview=' + true ">
                                        <img src="{{asset('assets/img/download.png')}}"
                                             alt="export"
                                             title="Export"/>
                                    </a>

                                @endif

                                <a :href=" '/planning/forecast/forecast-template/' + template.ID ">
                                    <img src="{{asset('assets/img/folder.png')}}"
                                         alt="edit"
                                         title="Edit">
                                </a>

                            </div>

                        </td>
                        <td>@{{ template.Template_Name }}</td>
                        <td>@{{ template.planning_status.Status_Description }}</td>
                    </tr>
                </table>

                <transition name="fade">
                    <div class="confirmation-modal" v-if="isCloseModalOpened">
                        <h3>Close Template</h3>
                        <div class="confirmation-modal-info">
                            <p>Are you sure you want to close the Budget/Forecast template? Users will not be able to edit
                                their
                                entries anymore.</p>
                        </div>
                        <button class="apply" @click="closeTemplate">APPLY</button>
                        <button class="cancel" @click="closeModal">CANCEL</button>
                    </div>
                </transition>

                <transition name="fade">
                    <div class="confirmation-modal" v-if="isUpdateModalOpened">
                        <h3>Update Template</h3>
                        <div class="confirmation-modal-info">
                            <p>Are you sure you want to update the current template?</p>
                            <p>New lines will be added and latest Forecast will be adjusted</p>
                        </div>
                        <button class="apply" @click="updateTemplate">APPLY</button>
                        <button class="cancel" @click="closeModal">CANCEL</button>
                    </div>
                </transition>

            </div>

            <transition name="fade">
                <div v-if="showNotifications" class="notifications">
                    <div
                            v-for="(notification, index) in notifications"
                            :key="index"
                            :class="{notification: true,  error: notificationType === 'error', success: notificationType === 'success' }">
                        @{{ notification }}
                    </div>

                </div>
            </transition>

        </div>

        <div v-else class="loader">
            <img src="{{asset('assets/img/loading.gif')}}" alt="loader"/>
        </div>

    </div>

@endsection

@section('footer_scripts')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
          integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>

    <link href="{{ asset('assets/css/pages/BF/Forecast/forecast_overview.css') }}" rel="stylesheet" type="text/css"/>

    <link href="{{ asset('assets/css/pages/BF/Custom_components/custom-modal.css') }}" rel="stylesheet"
          type="text/css"/>

    <script src="{{asset('assets/js/pages/vue.js')}}"></script>

    <script language="javascript" type="text/javascript"
            src="{{ asset('assets/js/pages/BF/Forecast/forecast_overview.js') }}"></script>

@endsection