@extends('admin.layouts.default')

@section('content')

    <div v-if="hasContentLoaded" class="progress-dashboard" id="app" v-cloak>

        <div class="heading-wrapper">
            <h1>Progress Dashboard</h1>
        </div>

        <div class="content">

            <div class="filters-section">

                    <div class="dropdown-wrapper">

                        <span class="dropdown-label">Template</span>

                        <div class="dropdown">

                            <div @click="toggleDropdown($event)" class="dropbtn">

                                <span>@{{ selectedFilters.template.Template_Name }}</span>

                                <i class="arrow down"></i>

                            </div>

                            <div class="dropdown-content">

                                <input
                                        type="text"
                                        placeholder="Search.."
                                        class="dropdown-input"
                                        @input="filterDropdown($event)">

                                <div
                                        class="option"
                                        @click="selectOption($event, 'template', null)"
                                >
                                </div>

                                <div
                                        v-for="(template, index) in filters.templates"
                                        :key="index"
                                        class="option"
                                        @click="selectOption($event, 'template', template)"
                                >@{{ template.Template_Name }}
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="dropdown-wrapper">

                        <span class="dropdown-label">Status</span>

                        <div class="dropdown">

                            <div @click="toggleDropdown($event)" class="dropbtn">

                                <span>@{{ selectedFilters.status.Status_Description }}</span>

                                <i class="arrow down"></i>

                            </div>

                            <div class="dropdown-content">

                                <input
                                        type="text"
                                        placeholder="Search.."
                                        class="dropdown-input"
                                        @input="filterDropdown($event)">

                                <div
                                        class="option"
                                        @click="selectOption($event, 'status', null)"
                                >
                                </div>

                                <div
                                        v-for="(status, index) in filters.statuses"
                                        :key="index"
                                        class="option"
                                        @click="selectOption($event, 'status', status)"
                                >@{{ status.Status_Description }}
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="dropdown-wrapper">

                        <span class="dropdown-label">L1 Owner</span>

                        <div class="dropdown">

                            <div @click="toggleDropdown($event)" class="dropbtn">

                                <span>@{{ selectedFilters.l1Owner.Employee_Name }}</span>

                                <i class="arrow down"></i>

                            </div>

                            <div class="dropdown-content">

                                <input
                                        type="text"
                                        placeholder="Search.."
                                        class="dropdown-input"
                                        @input="filterDropdown($event)">

                                <div
                                        class="option"
                                        @click="selectOption($event, 'l1Owner', null)"
                                >
                                </div>

                                <div
                                        v-for="(l1Owner, index) in filters.l1_owners"
                                        :key="index"
                                        class="option"
                                        @click="selectOption($event, 'l1Owner', l1Owner)"
                                >@{{ l1Owner.Employee_Name }}
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="dropdown-wrapper">

                        <span class="dropdown-label">L2 Approver</span>

                        <div class="dropdown">

                            <div @click="toggleDropdown($event)" class="dropbtn">

                                <span>@{{ selectedFilters.l2Approver.Employee_Name }}</span>

                                <i class="arrow down"></i>

                            </div>

                            <div class="dropdown-content">

                                <input
                                        type="text"
                                        placeholder="Search.."
                                        class="dropdown-input"
                                        @input="filterDropdown($event)">

                                <div
                                        class="option"
                                        @click="selectOption($event, 'l2Approver', null)"
                                >
                                </div>

                                <div
                                        v-for="(l2Approver, index) in filters.l2_approvers"
                                        :key="index"
                                        class="option"
                                        @click="selectOption($event, 'l2Approver', l2Approver)"
                                >@{{ l2Approver.Employee_Name }}
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="dropdown-wrapper">

                        <span class="dropdown-label">L3 Approver</span>

                        <div class="dropdown">

                            <div @click="toggleDropdown($event)" class="dropbtn">

                                <span>@{{ selectedFilters.l3Approver.Employee_Name }}</span>

                                <i class="arrow down"></i>

                            </div>

                            <div class="dropdown-content">

                                <input
                                        type="text"
                                        placeholder="Search.."
                                        class="dropdown-input"
                                        @input="filterDropdown($event)">

                                <div
                                        class="option"
                                        @click="selectOption($event, 'l3Approver', null)"
                                >
                                </div>

                                <div
                                        v-for="(l3Approver, index) in filters.l3_approvers"
                                        :key="index"
                                        class="option"
                                        @click="selectOption($event, 'l3Approver', l3Approver)"
                                >@{{ l3Approver.Employee_Name }}
                                </div>

                            </div>

                        </div>

                    </div>

                <div class="dropdown-wrapper">

                    <span class="dropdown-label">Show</span>

                    <div class="dropdown">

                        <div @click="toggleDropdown($event)" class="dropbtn">

                            <span>@{{ perPage }}</span>

                            <i class="arrow down"></i>

                        </div>

                        <div class="dropdown-content">

                            <div
                                    v-for="option in entriesOptions"
                                    @click="entriesHandler($event, option)"
                                    class="option">
                                @{{ option }}
                            </div>

                        </div>

                    </div>

                    <span class="dropdown-label">entries</span>

                </div>

            </div>

            <div class="table-wrapper">

                <table>

                    <thead>

                    <tr>
                        <th>Template</th>
                        <th>Status</th>
                        <th>L1: Owner</th>
                        <th>Last Update</th>
                        <th>Freeze at</th>
                        <th>L2: Approver</th>
                        <th>Freeze at</th>
                        <th>L3: Approver</th>
                        <th>Freeze at</th>
                    </tr>

                    </thead>

                    <tbody>

                    <tr
                            v-for="(row, index) in computedTableData"
                            :key="index"
                    >
                        <td>@{{ row.template }}</td>
                        <td>@{{ row.status }}</td>
                        <td>@{{ row.l1_owner }}</td>
                        <td>@{{ row.last_update }}</td>
                        <td :class="{disabled: !row.hasOwnProperty('l1_freeze_at')}">@{{ row.l1_freeze_at }}</td>
                        <td :class="{disabled: !row.hasOwnProperty('l2_approver')}">@{{ row.l2_approver }}</td>
                        <td :class="{disabled: !row.hasOwnProperty('l2_freeze_at')}">@{{ row.l2_freeze_at }}</td>
                        <td :class="{disabled: !row.hasOwnProperty('l3_approver')}">@{{ row.l3_approver }}</td>
                        <td :class="{disabled: !row.hasOwnProperty('l3_freeze_at')}">@{{ row.l3_freeze_at }}</td>
                    </tr>

                    </tbody>

                </table>

            </div>

            <div class="pagination-row" v-if="computedTableData.length > 0">

                <span>Showing @{{ lowerEntry }} to @{{ upperEntry }} of @{{ totalRecords }} entries</span>

                <div class="buttons-wrapper">

                    <div
                            @click="goToPage(pageNumber - 1)"
                            :class="{'pagination-button': true, disabled: pageNumber <= 1}">Previous
                    </div>


                    <div
                            v-for="(pageNum, index) in pages"
                            :key="index"
                            @click="goToPage(pageNum)"
                            :class="{'pagination-button': true, active: pageNumber === pageNum, disabled: pageNum === '...'}">
                        @{{ pageNum }}
                    </div>

                    <div
                            @click="goToPage(pageNumber + 1)"
                            :class="{'pagination-button': true, disabled: pageNumber >= numberOfPages}">Next
                    </div>

                </div>


            </div>

        </div>

    </div>

@endsection

@section('footer_scripts')

    <script>
        var template_id = {!!json_encode($template_id)!!}
    </script>

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

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

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

    <link href="{{ asset('assets/css/pages/BF/Custom_components/custom-pagination.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/Progress_dashboard/progress_dashboard.js') }}"></script>

@endsection