@extends('admin.layouts.main')

@section('title')
    KUA Products
@endsection

@section('content')
    <main>

        <loading :active.sync="isLoading"></loading>

        <div class="two-col">

            @include('admin.common.sidebar')

            <div class="right-sec" v-cloak>

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('kua_products.kua_product') }}</a>
                        </li>
                    </ol>
                </nav>

                <div class="top-bar d-flex align-items-center">
                    <h2>{{ @trans('kua_products.kua_product') }}</h2>

                    <div class="right-table-container ml-auto">
                        {{-- <div class="form-group date-range">
                            <div id="reportrange" class="date-range-input">
                                <i class="material-icons">date_range</i>&nbsp;
                                <span></span>
                            </div>
                        </div> --}}
                        {{-- <a href="javascript:void(0)" class="btn btn-em" data-toggle="modal" data-target="#filter"><img src="{{ asset('img/admin/ic_filter.svg') }}" alt="" class="mr-1"> Filter</a> --}}
                        @permission('kua-product-write')
                            <a href="{{ route('admin.kua-products.add', ['panel' => Session::get('panel')]) }}"
                                class="btn btn-em btn-primary-em">{{ @trans('kua_products.create_new') }}</a>
                        @endpermission
                    </div>
                </div>

                <div class="table-wrapper">
                    <div class="table-top-panel d-flex align-items-center">
                        <div class="form-group search-input float-left mb-0">
                            <img src="{{ asset('/img/ic_search.png') }}" srcset="../../img/admin/ic_search@2x.png 2x"
                                alt="search">
                            <input type="text" name="search_text" id="search_text" v-model="search_text" @input="search"
                                placeholder="Search">
                            <i class="material-icons" v-if="search_text" @click="clearSearch">close</i>
                        </div>
                        <div class="d-flex align-items-center mx-auto">
                            <div class="form-group select btm-arrow mb-0 d-flex without-label align-items-center"
                                v-if="items.length">
                                <label style="white-space: nowrap;"
                                    class="mb-0 gray">{{ @trans('kua_products.records_per_page') }}</label>
                                <select class="form-control" id="per_page" v-model="per_page" @input="perPage">
                                    <option value="25">25 </option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                            <span>Total @{{ total }}</span>
                        </div>
                        <div class="pagination d-flex justify-content-center ml-auto" v-if="items.length">
                            @include('admin.common.paginate_js')
                        </div>
                    </div>
                    <div class="table-data" v-if="items.length">
                        <div class="table-responsive table-checkable">
                            <table class="table" id="mtcTable">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ @trans('kua_products.product_name') }}<a href="javascript:void(0)"
                                                :class="classSort('product_name')" @click="sort('product_name')"></th>
                                        <th>{{ @trans('kua_products.product_category') }}</th>
                                        <th>{{ @trans('kua_products.client_name') }}</th>
                                        <th>{{ @trans('kua_products.active_stages') }}</th>
                                        <th>{{ @trans('kua_products.agents') }}</th>
                                        <th>{{ @trans('kua_products.status') }}</th>
                                        <th>{{ @trans('kua_products.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in items" :key="item.id">
                                        <td>@{{ index + 1 }}</td>
                                        <td> <a :href="'{{ url('mfmk-admin/kua-products/detail') }}/' + item.id"
                                        class="d-block text-underlined">@{{ item.product_name }}</a></td>
                                        <td>@{{ item.product_category }}</td>
                                        <td v-if="item.client && item.client.name">
                                            @{{ item.client.name }}
                                        </td>
                                        <td v-else>-</td>
                                        <td>@{{ getActiveStages(item) }} Stages</td> <!-- Display active stages -->
                                        <td>@{{ getAgents(item) }} Agents</td>
                                        <td>
                                            @{{ item.status[0].toUpperCase() + item.status.slice(1) }}
                                        </td>
                                        <td class="act-btn">
                                                @permission('kua-product-read')
                                                <a :href="'{{ url('mfmk-admin/kua-products/detail') }}/' + item.id"
                                                    class="btn btn-em-info" data-toggle="tooltip" data-placement="top"
                                                    title="View">
                                                    <i class="material-icons">visibility</i>
                                                </a>
                                            @endpermission
                                            @permission('kua-product-write')
                                                <a :href="'{{ url('mfmk-admin/kua-products/edit') }}/' + item.id"
                                                    class="btn btn-em-info" data-toggle="tooltip" data-placement="top"
                                                    title="Edit">
                                                    <i class="material-icons">edit</i>
                                                </a>
                                            @endpermission
                                            @permission('kua-product-delete')
                                                {{-- <a href="javascript:void(0)" class="btn btn-em-info" data-toggle="tooltip"
                                                    data-placement="top" title="Delete" @click="confirm(item.id)">
                                                    <i class="material-icons">delete</i>
                                                </a> --}}
                                            @endpermission
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>

                <div class="row" v-if="!items.length && loaded == true">
                    <div class="col-md-12">
                        <div class="alert alert-warning" role="alert">
                            {{ @trans('kua_products.no_records_to_show') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('pageModals')
    @include('admin.components.modal_delete_js')
    @include('admin.modules.kua-products.modal')
@endpush

@push('pageJs')
    {!! JsValidator::formRequest('App\Http\Requests\Kua_product\StoreKuaProduct', '#storeMysteryProgram') !!}

    <script type="text/javascript">
        localStorage.removeItem('kuaProductCurrentStep');
        localStorage.removeItem('showSubmitButton');
        localStorage.removeItem('kuaProductId');
        localStorage.removeItem('kuaProductFormData');
        var mp_indexUrl = "{{ route('admin.kua-products.index', ['panel' => Session::get('panel'), 'id' => null]) }}";
        var mp_editUrl = "{{ route('admin.kua-products.edit', ['panel' => Session::get('panel'), 'id' => null]) }}";
        var mp_deleteUrl = "{{ route('admin.kua-products.destroy', ['panel' => Session::get('panel'), 'id' => null]) }}";
        var  getProductAgents = "{{ route('admin.kua-products.getProductAgents', ['panel' => Session::get('panel'), 'productId' => ':productId']) }}";

    </script>
    <script type="text/javascript" src="{{ asset('js/admin/kua_product.js') }}"></script>
@endpush