@extends('admin.layouts.main')

@section('title')
KUA Products Detail
@endsection

@section('content')

@push('pageCss')
<link rel="stylesheet" href="{{ asset('css/admin/kua-leads.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/vendor/bootree/bootree.css') }}">
@endpush

<main>

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

    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec detail-page" v-cloak>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.kua-products.indexpageload', ['panel' => Session::get('panel')]) }}">{{ @trans('kua_products.kua_products') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('kua_products.detail') }}</li>
                </ol>
            </nav>
            <div class="bg-white profile-header">
                <div class="profile-detail">
                    <div class="person-details">
                        <div class="about pl-0">
                            <h2 class="cndidate-name">{{ $mysteryProgramDetail->scenario_name }}</h2>
                            <div class="franchise-tags">
                                <span class="admin-tag">{{ $mysteryProgramDetail->product_name}}</span>
                                {{-- <span class="date"><i class="material-icons">date_range</i>{{ $mysteryProgramDetail->start_date_formatted }}</span>
                                <span class="badge badge-pill green">{{ $mysteryProgramDetail->status_formatted }}</span> --}}
                            </div>
                        </div>
                    </div>
                    
                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" :class="{'active' : current_tab == 'kua_product_detail'}"
                            @click="tab('kua_product_detail')">KUA Product Detail</a>
                    </li>
                    @if ($mysteryProgramDetail->status == 'active')
                    @permission('kua-product-assign-agent-read')
                    <li class="nav-item">
                        <a class="nav-link"  :class="{'active' : current_tab == 'kua_agents'}"
                            @click="tab('kua_agents')">{{ @trans('kua_products.kua_agents') }}</a>
                    </li>
                    @endpermission
                    <li class="nav-item">
                        <a class="nav-link"  :class="{'active' : current_tab == 'leads'}"
                            @click="tab('leads')">{{ @trans('kua_products.leads') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" :class="{'active' : current_tab == 'kua_documents'}"
                            @click="tab('kua_documents')">Documents</a>
                    </li>
                    @endif
                </ul>
            </div>

            <div class="detail-content mt-4">
                <!-- Tab panes -->
                <div class="tab-content box">
                    @include('admin.modules.kua-products.lists.kua_product_detail')
                    @include('admin.modules.kua-products.lists.kua_documents')
                    @include('admin.modules.kua-products.lists.kua_agents')
                    @include('admin.modules.kua-products.lists.leads')
                    
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

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


@push('pageJs')
    <script src="{{ asset('js/vendor/vuelidate.min.js') }}"></script>
    <script src="{{ asset('js/vendor/validators.min.js') }}"></script>
    <script src="{{ asset('js/admin/commonVue.js') }}"></script>
    <script src="{{ asset('js/admin/kua_product_detail.js') }}"></script>
@endpush

<script>
    var kua_product_detailUrl = "{{ route('admin.kua-products.program-details', ['panel' => Session::get('panel'), 'id' => $mysteryProgramDetail->id]) }}";
    var kua_agentsUrl = "{{ route('admin.kua-products.getKuaAgents', ['panel' => Session::get('panel'), 'id' => $mysteryProgramDetail->id]) }}";
    var leadsUrl = "{{ route('admin.kua-products.getLeads', ['panel' => Session::get('panel'), 'id' => $mysteryProgramDetail->id]) }}";
    var productUpdateUrl = "{{ route('admin.kua-products.update', ['panel' => Session::get('panel')]) }}";
    var assignAgentUrl = "{{ route('admin.kua-products.assignAgent', ['panel' => Session::get('panel')]) }}";
    var removeAgentUrl = "{{ route('admin.kua-products.removeAgent', ['panel' => Session::get('panel')]) }}";
    var updateAgentUrl = "{{ route('admin.kua-products.assignAgentToLead', ['panel' => Session::get('panel')]) }}";
    var kua_documentsUrl = "{{ route('admin.kua-products.getProductDocument', ['panel' => Session::get('panel'), 'id' => $mysteryProgramDetail->id]) }}";

    var kuaStoreDocumentUrl = "{{ route('admin.kua-products.storeDocuments', ['panel' => Session::get('panel')]) }}";
    var kuaDeleteDocumentUrl = "{{ route('admin.kua-products.delete_document', ['panel' => Session::get('panel')]) }}";
</script>