@extends('admin.layouts.main')

@section('title')
Sales List
@endsection
@section('content')
<main>
    <loading :active.sync="isLoading"></loading>
    <div class="two-col">
        @include('admin.common.sidebar')
        <div class="right-sec" v-cloak>
            <div class="breadcumb-bar">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Finance</a></li>
                        @if (Request::is('branch/*'))
                        <li class="breadcrumb-item active" aria-current="page">Branch Sales List</li>
                        @else
                        <li class="breadcrumb-item active" aria-current="page">HQ Sales List</li>
                        @endif
                    </ol>
                </nav>
            </div>
            <div class="top-bar d-flex align-items-center">
                @if (Request::is('branch/*'))
                <h2>Branch Sales List</h2>
                @else
                <h2>HQ Sales List</h2>
                @endif

                <div class="right-table-container ml-auto">
                    <a v-if="!comman_filtering" href="javascript:void(0)" class="btn btn-em" data-toggle="modal" data-target="#branch_hq_comman_filter"><img src="{{ asset('img/admin/ic_filter.svg') }}" alt="" class="mr-1">Filter</a>
                    <a v-if="comman_filtering" href="javascript:void(0)" class="btn btn-em" data-toggle="modal" data-target="#branch_hq_comman_filter"><img src="{{ asset('img/admin/ic_filter_edit.svg') }}" alt="" class="mr-1">Filter</a>
                    <a v-if="!filtering" href="javascript:void(0)" class="btn btn-em" data-toggle="modal" data-target="#branch_hq_filter"><img src="{{ asset('img/admin/ic_filter.svg') }}" alt="" class="mr-1">Bulk Action Filter</a>
                    <a v-if="filtering" href="javascript:void(0)" class="btn btn-em" data-toggle="modal" data-target="#branch_hq_filter"><img src="{{ asset('img/admin/ic_filter_edit.svg') }}" alt="" class="mr-1">Bulk Action Filter</a>
                    <a href="javascript:void(0)" class="btn btn-em btn-primary-em" :class="isAccessLinkDisabled" @click="bulkActionWithSelected">@{{ actionBtnName }}</a>
                    <button class="btn btn-em scrollTableLeft pl-2 pr-2" title="Scoll Left"><i class="material-icons">chevron_left</i></button>
                    <button class="btn btn-em scrollTableRight pl-2 pr-2" title="Scoll Right"><i class="material-icons">chevron_right</i></button>
                </div>
            </div>
            <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" v-if="items.length">
                    <div class="form-group select btm-arrow mb-0 d-flex without-label align-items-center">
                        <label style="white-space: nowrap;" class="mb-0 gray">{{ @trans('kua_customer.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 mtcData">
                        <thead>
                            <tr>
                                <th rowspan="4" class="sticky-col col-checkbox">
                                    <div class="form-group mb-0">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="recruit-company" v-model="selectAll" @change="toggleSelectAll" name="Companies" :disabled="isCheckboxDisabled">
                                            <label class="custom-control-label" for="recruit-company"></label>
                                        </div>
                                    </div>
                                </th>
                                <th rowspan="4" class="sticky-col col-customer">
                                    Customer <!--<a href="javascript:void(0)" :class="classSort('kua_customer.full_name')" @click="sort('kua_customer.full_name')"></a>-->
                                </th>
                                <th rowspan="4" class="sticky-col col-type">Customer Type <!--Customer Type<a href="javascript:void(0)" :class="classSort('lead_type')" @click="sort('lead_type')"></a>-->
                                <th rowspan="4">Location<a href="javascript:void(0)" :class="classSort('kua_region.region_name')" @click="sort('kua_region.region_name')"></a>
                                <th rowspan="4">Agent<a href="javascript:void(0)" :class="classSort('kua_agent.full_name')" @click="sort('kua_agent.full_name')"></a>
                                    <!-- <th rowspan="7">LG Date<a href="javascript:void(0)" :class="classSort('formatted_created_at')" @click="sort('formatted_created_at')"></a>
                                <th rowspan="7">Fulfilment Date<a href="javascript:void(0)" :class="classSort('formatted_expected_closure_date')" @click="sort('formatted_expected_closure_date')"></a>
                                <th rowspan="7">LG Commission
                                <th rowspan="7">Sales Date<a href="javascript:void(0)" :class="classSort('sales_date')" @click="sort('sales_date')"></a> -->
                                <th colspan="3" class="bg-yellow-40 text-center shadow-none border-bottom">Product Information</th>
                                <th colspan="3" class="bg-blue-40 text-center shadow-none border-bottom">Customer Information</th>
                                <th colspan="5" class="bg-green-40 text-center shadow-none border-bottom">Branch Information</th>
                                <template v-if="isHq">
                                    <th colspan="5" class="bg-orange-40 text-center shadow-none border-bottom">Headquarter Information</th>
                                </template>


                                <th rowspan="2">Action</th>
                            </tr>
                            <tr>
                                <!-- <th class="bg-yellow-40">Client<a href="javascript:void(0)" :class="classSort('kua_company.name')" @click="sort('kua_company.name')"></a> -->
                                <th class="bg-yellow-40">Product <!--<a href="javascript:void(0)" :class="classSort('kua_product.product_name')" @click="sort('kua_product.product_name')"></a>-->
                                <th class="bg-yellow-40">Sales Date <!--<a href="javascript:void(0)" :class="classSort('sales_date')" @click="sort('sales_date')"></a>-->
                                <th class="bg-yellow-40">Sales Amount <!--<a href="javascript:void(0)" :class="classSort('sales_amount')" @click="sort('sales_amount')"></a>-->

                                <th class="bg-blue-40">TIN Number <!--<a href="javascript:void(0)" :class="classSort('kua_customer.tin')" @click="sort('kua_customer.tin')"></a>-->
                                <th class="bg-blue-40">ID Type  <!--<a href="javascript:void(0)" :class="classSort('kua_customer.id_type')" @click="sort('kua_customer.id_type')"></a>-->
                                <th class="bg-blue-40">ID Number <!--<a href="javascript:void(0)" :class="classSort('kua_customer.national_id_number')" @click="sort('kua_customer.national_id_number')"></a>-->
                                    <!-- <th class="bg-blue-40">CI Commission
                                <th class="bg-blue-40">SC Commission -->

                                <th class="bg-green-40">Branch Sent Date <!--<a href="javascript:void(0)" :class="classSort('branch_sent_date')" @click="sort('branch_sent_date')"></a>-->
                                <th class="bg-green-40">Branch Submitted By <!--<a href="javascript:void(0)" :class="classSort('branch_sent_by')" @click="sort('branch_sent_by')"></a>-->
                                <th class="bg-green-40">Received Date <!--<a href="javascript:void(0)" :class="classSort('branch_receive_date')" @click="sort('branch_receive_date')"></a>-->
                                <th class="bg-green-40">Received By <!--<a href="javascript:void(0)" :class="classSort('branch_receive_by')" @click="sort('branch_receive_by')"></a>-->
                                <th class="bg-green-40">Submission Status<a href="javascript:void(0)" :class="classSort('branch_status')" @click="sort('branch_status')"></a></th>
                                <!-- <th class="bg-green-40">Branch Commission -->

                                <!-- <template v-if="isHq"> -->
                                <template v-if="isHq">
                                    <th class="bg-orange-40">HQ Sent Date <!--<a href="javascript:void(0)" :class="classSort('hq_sent_date')" @click="sort('hq_sent_date')"></a>-->
                                    <th class="bg-orange-40">HQ Submitted By <!--<a href="javascript:void(0)" :class="classSort('hq_sent_by')" @click="sort('hq_sent_by')"></a>-->
                                    <th class="bg-orange-40">HQ Received Date <!--<a href="javascript:void(0)" :class="classSort('hq_receive_date')" @click="sort('hq_receive_date')"></a>-->
                                    <th class="bg-orange-40">HQ Received By <!--<a href="javascript:void(0)" :class="classSort('hq_receive_by')" @click="sort('hq_receive_by')"></a>-->
                                    <th class="bg-orange-40">HQ Status<a href="javascript:void(0)" :class="classSort('hq_status')" @click="sort('hq_status')"></a>
                                        <!-- <th class="bg-orange-40">HQ Commission -->
                                        <!-- </template> -->
                                </template>

                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in items">
                                <td class="sticky-col col-checkbox">
                                    <div class="form-group mb-0">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" :id="item.id" name="Companies" v-model="selectedBulkLeadIds" :value="item.id" :disabled="isCheckboxDisabled">
                                            <label class="custom-control-label" :for="item.id"></label>
                                        </div>
                                    </div>
                                </td>
                                <td class="sticky-col col-customer" v-if="item.customer_id != null">@{{ item.lead_type == 'business' ? (item.business_name) ? item.business_name[0].toUpperCase() + item.business_name.slice(1) : '-' : (item.kua_customer && item.kua_customer.full_name != null) ? item.kua_customer.full_name[0].toUpperCase() + item.kua_customer.full_name.slice(1) : item.customer_name}}<br>
                                    <span class="text-secondary">@{{ (item.kua_customer && item.kua_customer.phone_number) ? item.kua_customer.phone_number : '-' }}</span>
                                </td>
                                <td class="sticky-col col-customer" v-else>@{{ item.lead_type == 'business' ? (item.business_name) ? item.business_name[0].toUpperCase() + item.business_name.slice(1) : '-' : (item.customer_name) ? item.customer_name[0].toUpperCase() + item.customer_name.slice(1) : '-' }}<br>
                                    <span class="text-secondary">@{{ item.phone_number ? item.phone_number : '-' }}</span>
                                </td>
                                <td class="sticky-col col-type">@{{ (item.kua_customer && item.kua_customer.customer_type) ? item.kua_customer.customer_type[0].toUpperCase() + item.kua_customer.customer_type.slice(1) : '-' }}</td>
                                <td>@{{ item.kua_region ? item.kua_region.region_name : '-' }}</td>
                                <td>@{{ (item.kua_agent && item.kua_agent.full_name != null) ? item.kua_agent.full_name[0].toUpperCase() + item.kua_agent.full_name.slice(1) : '-' }}</td>
                                <!-- <td>@{{ item.formatted_created_at ? item.formatted_created_at : '-' }}</td>
                                <td>@{{ item.formatted_expected_closure_date ? item.formatted_expected_closure_date : '-' }}</td>
                                <td>@{{ commissionCalculation(item, 'lead_generation') }}</td>
                                <td>@{{ getSalesDate(item) }}</td> -->
                                <!-- <td>@{{ (item.kua_company && item.kua_company.name != null) ? item.kua_company.name[0].toUpperCase() + item.kua_company.name.slice(1) : '-' }}</td> -->
                                <td>@{{ (item.kua_product && item.kua_product.product_name != null) ? item.kua_product.product_name[0].toUpperCase() + item.kua_product.product_name.slice(1) : '-' }}</td>
                                <td>@{{ getSalesDate(item) }}</td>
                                <td>@{{ item.sales_amount ? item.sales_amount : 0 }}</td>
                                <td>@{{ (item.kua_customer && item.kua_customer.tin != null) ? item.kua_customer.tin : '-' }}</td>
                                <td>@{{ getCustomerIdType(item) }}</td>
                                <td>@{{ getCustomerIdNumber(item) }}</td>
                                <!-- <td>@{{ commissionCalculation(item, 'customer_identification') }}</td>
                                <td>@{{ commissionCalculation(item, 'sales_completion') }}</td> -->
                                <td>@{{ getDispatchBranchDate(item) }}</td>
                                <td>@{{ getDispatchBranchBy(item) }}</td>
                                <td>@{{ getBranchReceivedDate(item) }}</td>
                                <td>@{{ getBranchReceivedBy(item) }}</td>
                                <td>@{{ item.branch_status ? item.branch_status : '-' }}</td>
                                <!-- <td>@{{ commissionCalculation(item, 'outlet_process') }}</td> -->
                                <template v-if="isHq">
                                    <td>@{{ getDispatchHQDate(item) }}</td>
                                    <td>@{{ getDispatchHQBy(item) }}</td>
                                    <td>@{{ getHQReceivedDate(item) }}</td>
                                    <td>@{{ getHQReceivedBy(item) }}</td>
                                    <td>@{{ item.hq_status ? item.hq_status : '-' }}</td>
                                    <!-- <td>@{{ commissionCalculation(item, 'hq_process') }}</td> -->
                                </template>

                                <td class="act-btn d-flex">
                                    <a v-if="isBranch" :href="'{{ url('/branch/kua-sales/detail') }}/' + item.id" title="View" class="btn btn-view" target="_blank"><i class="material-icons">remove_red_eye</i></a>
                                    <a v-if="isHq" :href="'{{ url('/hq/kua-sales/detail') }}/' + item.id" title="View" class="btn btn-view" target="_blank"><i class="material-icons">remove_red_eye</i></a>
                                    <!-- <a href="javascript:void(0)" title="Access Link" class="btn btn-view" @click="sendAccessLink(item.id, 'branch')"><i class="material-icons">link</i></a> -->
                                    <div class="dropdown ml-2 action-btn-menu">
                                        <template v-if="isBranch">
                                            <i class="material-icons" data-toggle="dropdown" v-if="item.branch_status === 'Pending' || item.branch_status === 'Processing Branch'">more_vert</i>
                                            <i class="material-icons disabledAction" v-else>more_vert</i>
                                        </template>
                                        <template v-if="isHq">
                                            <i class="material-icons" data-toggle="dropdown" v-if="item.hq_status === 'Pending' || item.hq_status === 'Processing HQ'">more_vert</i>
                                            <i class="material-icons disabledAction" v-else>more_vert</i>
                                        </template>
                                        <div class="dropdown-menu">
                                            <template v-if="isBranch">
                                                <a class="dropdown-item" :class="getActionDisabled(item, 'branch_acknowledge')" href="javascript:void(0)" v-if="getPermission(item, 'branch_acknowledge')" @click="openAcknowledgeReceiptModal(item, 'branch')">Branch Acknowledge receipt</a>
                                                <a class="dropdown-item" :class="getActionDisabled(item, 'dispatch_to_hq')" href="javascript:void(0)" v-if="getPermission(item, 'dispatch_to_hq')" @click="openDispatchtoHQModal(item)">Dispatch to HQ</a>
                                                <a class="dropdown-item" :class="getActionDisabled(item, 'branch_rejection')" href="javascript:void(0)" v-if="getPermission(item, 'branch_rejection')" @click="openRejectWithReasonModal(item, 'branch_rejection')">Branch Reject with reason</a>
                                                <a class="dropdown-item" :class="getActionDisabled(item, 'branch_activate')" href="javascript:void(0)" v-if="getPermission(item, 'branch_activate')" @click="openActivatedAdminModal(item, 'branch_activate')">Activated from Branch</a>
                                            </template>
                                            <template v-if="isHq">
                                                <a class="dropdown-item" :class="getActionDisabled(item, 'hq_acknowledge')" href="javascript:void(0)" v-if="getPermission(item, 'hq_acknowledge')" @click="openAcknowledgeReceiptModal(item, 'hq')">HQ Acknowledge receipt</a>
                                                <a class="dropdown-item" :class="getActionDisabled(item, 'hq_activate')" href="javascript:void(0)" v-if="getPermission(item, 'hq_activate')" @click="openActivatedAdminModal(item, 'hq_activate')">Activated from HQ</a>
                                                <a class="dropdown-item" :class="getActionDisabled(item, 'hq_rejection')" href="javascript:void(0)" v-if="getPermission(item, 'hq_rejection')" @click="openRejectWithReasonModal(item,'hq_rejection')">Reject with reason</a>
                                            </template>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </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_agent.no_records_to_show') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@include('admin.modules.kua_sales.modal')
@endsection

@push('pageCss')
<style scoped>
    .sidebar {
        display: none;
    }

    .right-sec {
        width: 100%;
    }

    .error {
        color: red;
        font-size: 0.9em;
    }

    .disabledAction {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>
@endpush

@push('pageJs')
<script>
    var listOfSalesUrl = "{{route('salesList.indexPageLoad')}}";
    var storeAcknowledgeFormUrl = "{{route('kua-sales.storeAcknowledgeForm')}}";
    var storeActionFormUrl = "{{route('kua-sales.storeActionForm')}}";
    var sendAccessLinkUrl = "{{route('kua-sales.sendAccessLink')}}";
    var storeDispatchActionFormUrl = "{{route('kua-sales.storeDispatchForm')}}";

    var type_data = "{{ $requestParams['type'] ?? '' }}";
    // var customerId = "{{ $requestParams['customer_id'] ?? '' }}";
    // var productId = "{{ $requestParams['product_id'] ?? '' }}";
    // var status = "{{ $requestParams['status'] ?? 'active' }}";
    var branchId = "{{ $requestParams['branch_id'] ?? '' }}";
    // var isBranch = true;

    // var listOfClientsUrl = "{{route('admin.kua-sales.getClients',['panel' => Session::get('panel')])}}";
    // var listOfClientBranchesUrl = "{{route('admin.kua-sales.getClientBranch',['panel' => Session::get('panel')])}}";

    var listOfAgentsUrl = "{{route('kua-sales.getAgents')}}";
    var listOfProductsUrl = "{{route('kua-sales.getProducts')}}";
    var listOfCustomersUrl = "{{route('kua-sales.getCustomers')}}";
</script>
<script type="text/javascript" src="{{ asset('js/admin/kua_branch_hq_sales.js') }}"></script>
@endpush