@extends('admin.layouts.default')

@section('content')

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

        <div class="heading-wrapper">

            <h1>Approval</h1>

        </div>

        <div class="content">

            <div class="view-section">

                <div class="filters-wrapper">

                    <div class="dropdown-wrapper">

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

                        <div class="dropdown">

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

                                <span> @{{ selectedFilterData.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="selectOptionForFilter($event, 'filterL1', null)">
                                </div>

                                <div
                                        v-for="(l1Owner, index) in dropdownFilterData.l1_owners"
                                        :key="index"
                                        class="option"
                                        @click="selectOptionForFilter($event, 'filterL1', 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> @{{ selectedFilterData.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="selectOptionForFilter($event, 'filterL2', null)">
                                </div>

                                <div
                                        v-for="(l2Approver, index) in dropdownFilterData.l2_approvers"
                                        :key="index"
                                        class="option"
                                        @click="selectOptionForFilter($event, 'filterL2', 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> @{{ selectedFilterData.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="selectOptionForFilter($event, 'filterL3', null)">
                                </div>

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

                            </div>

                        </div>

                    </div>

                </div>

                <table>

                    <thead>

                    <tr>
                        <th>Action</th>

                        <th>L1: Owner</th>

                        <th>L2: Approver</th>

                        <th>L3: Approver</th>

                    </tr>

                    </thead>
{{--                                    Table content--}}
                    <tbody>

                    <tr
                            v-for="(freezer, index) in freezers"
                            :key="index"
                    >
                        <td class="action">
                            <img
                                    src="{{asset('assets/img/folder.png')}}"
                                    alt="edit"
                                    @click="toggleModal(index)"
                            >
                        </td>
                        <td>@{{ freezer.L1_Owner }}</td>
                        <td>@{{ freezer.L2_Approver }}</td>
                        <td>@{{ freezer.L3_Approver }}</td>
                    </tr>

                    </tbody>

                </table>

            </div>

            <transition name="fade">
                <div class="edit-modal" v-if="isModalDisplayed">

                    <div class="form-wrapper">

                        <div class="dropdown-wrapper disabled">

                            <span class="field-label">L1Owner</span>

                            <div class="dropdown">

                                <div class="dropbtn">

                                    <span>@{{ selectedCreateData.L1Owner.Employee_Name }}</span>

                                </div>

                            </div>

                        </div>

                        <div class="dropdown-wrapper">

                            <span class="field-label">L2Approver</span>

                            <div class="dropdown">

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

                                    <span>@{{ selectedCreateData.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
                                            v-for="(approver, index) in dropdownCreateData.approvers"
                                            :key="index"
                                            class="option"
                                            @click="selectOptionForCreate($event, 'createL2', approver)"
                                    >@{{ approver.Employee_Name }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="dropdown-wrapper">

                            <span class="field-label">L3Approver</span>

                            <div class="dropdown">

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

                                    <span>@{{ selectedCreateData.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
                                            v-for="(approver, index) in dropdownCreateData.approvers"
                                            :key="index"
                                            class="option"
                                            @click="selectOptionForCreate($event, 'createL3', approver)"
                                    >@{{ approver.Employee_Name }}
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="bottom-buttons">
                            <div class="custom-button" @click="createFreezers">Save</div>
                            <div class="custom-button" @click="toggleModal(-1)">Cancel</div>
                        </div>

                    </div>

                    <div @click="toggleModal(-1)" class="backdrop"></div>

                </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>

@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/Bud_approval/bud_approval.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-table.css') }}" rel="stylesheet" type="text/css"/>

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

@endsection