@extends('admin.layouts.default')

@section('content')

    <div class="budget_overview" id="app" v-cloak>

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

        <div class="content">

            <table>
                <tr>
                    <th>ID</th>
                    <th>Actions</th>
                    <th>Template Name</th>
                    <th>Budget CY</th>
                    <th>Budget NY</th>
                    <th>Outlook</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="toggleModal(template)"/>

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

                                <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/budget/' + template.ID + '/export-to-excel?from-overview=' + true ">
                                    <img src="{{asset('assets/img/download.png')}}"
                                         alt="export"
                                         title="Export"/>
                                </a>

                            @endif

                            <a :href=" '/planning/budget/budget-template/' + template.ID ">
                                <img src="{{asset('assets/img/folder.png')}}"
                                     alt="edit"
                                     title="View Budgets"/>
                            </a>
                        </div>
                    </td>
                    <td>@{{ template.Template_Name }}</td>
                    <td v-if="template.budget_visibility.Budget_CY">Show</td>
                    <td v-else>Hide</td>

                    <td v-if="template.budget_visibility.Budget_NY">Show</td>
                    <td v-else>Hide</td>

                    <td v-if="template.budget_visibility.Outlook">Show</td>
                    <td v-else>Hide</td>
                    <td>@{{ template.planning_status.Status_Description }}</td>
                </tr>
            </table>

            <transition name="fade">
                <div class="confirmation-modal" v-if="isOpened">
                    <h3>@{{ modalTitle }}</h3>
                    <div class="confirmation-modal-info">
                        <p>@{{ modalMessage }}</p>
                    </div>
                    <button class="apply" @click="changeTemplateStatus">APPLY</button>
                    <button class="cancel" @click="closeModal">CANCEL</button>
                </div>
            </transition>
        </div>

    </div>

@endsection

@section('footer_scripts')

    <link href="{{ asset('assets/css/pages/BF/Budget/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/Budget/overview.js') }}"></script>

@endsection