@extends('admin.layouts.main')
@section('title')
    {{ trans('commission_distribution.title') }}
@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('finance.finance_reports') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('finance.profit_commission_distribution') }}</li>
                </ol>
            </nav>
            <div class="bg-white profile-header">
                <div class="top-bar d-flex align-items-center border-bottom">
                    <h2>{{ @trans('finance.profit_commission_distribution') }}</h2>
                    <div class="right-table-container d-md-flex align-items-center">
                        <span class="mb-10 mr-10">(Amounts are in TZS)</span>
                        <div class="form-group date mb-10">
                            <div class="date">
                                <div class="input-group">
                                    <input type="text" class="form-control bg-white" id="profit_commission_date_filter" name="profit_commission_date_filter" placeholder="Select"
                                        autocomplete="off" readonly value="{{ Carbon\Carbon::now()->format('m/Y') }}" v-model="profit_commission_date_filter">
                                    <div class="input-group-addon">
                                        <span class="material-icons">date_range</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="javascript:void(0)" class="btn btn-em" @click="confirmMultiple" v-if="selected_pdc.length > 0">{{ @trans('finance.mark_as_paid') }}</a>
                        <a  href="javascript:void(0)" class="btn btn-em btn btn-borsdered-primary d-inline-flex align-items-center mr-10 mb-10" data-toggle="modal"
                            @click="showFilterModal">
                            <img src="{{ asset('img/admin/ic_filter_edit.svg') }}" alt="" class="ic mr-1 orge" v-if="showEditFilterIcon">Filter
                            <img src="{{ asset('img/admin/ic_filter.svg') }}" alt="" class="ic mr-1 orge" v-else>Filter
                        </a>
                    </div>
                </div>
            </div>
            <div class="table-wrapper">
                <div class="table-data" v-if="items.length > 0">
                    <div class="table-responsive table-checkable">
                        <table class="table" id="mtcTable">
                            <thead>
                                <tr>
                                    <th>
                                        <div class="form-group mb-0">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input select-all-pdc-custom-checkbox" id="selectAll" v-model="selectAll">
                                                <label class="custom-control-label" for="selectAll" ></label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>{{ @trans('finance.team_member') }}<a href="javascript:void(0)" :class="classSort('user_full_name')" @click="sort('user_full_name')"></a></th>
                                    <th>{{ @trans('finance.project_name') }}<a href="javascript:void(0)" :class="classSort('project_name')" @click="sort('project_name')"></a></th>
                                    <th>{{ @trans('finance.project_code') }}<a href="javascript:void(0)" :class="classSort('project_code')" @click="sort('project_code')"></a></th>
                                    <th>{{ @trans('finance.perc_profit_commission') }}</th>
                                    <th>{{ @trans('finance.amt_to_be_paid') }}</th>
                                    <th>{{ @trans('finance.status') }}<a href="javascript:void(0)" :class="classSort('status')" @click="sort('status')"></a></th>
                                    <th>{{ @trans('finance.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, key) in items" :key="key">
                                    <td>
                                        <div class="form-group mb-0" v-if="item.show_mark_as_paid_btn && item.status === 'unpaid'">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input comm-dist-custom-checkbox" :id="item.id" v-model="selected_pdc" :value="item.id">
                                                <label class="custom-control-label" :for="item.id"></label>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="media align-items-center">
                                            <span class="rounded-circle orange-bg pro-icon mr-1">@{{ item.user_full_name | strIcon }}</span>
                                            <div class="media-body"><p class="m-0 xs-font">@{{item.user_full_name}}</p></div>
                                        </div>
                                    </td>
                                    <td>@{{item.project_name}}</td>
                                    <td>@{{item.project_code}}</td>
                                    <td>@{{item.profit_commission}}%</td>
                                    <td>@{{item.profit_commission_amount}}</td>
                                    <td>
                                        <span class="badge badge-pill" :class="(item.status === 'paid') ? 'green' : 'gray'">@{{ item.status | capitalize}}</span>
                                    </td>
                                    <td class="act-btn">
                                        @permission('project-commission-distribution-write')
                                        <a href="javascript:void(0)"  @click="confirm(item.id)" data-toggle="modal" data-target="#modelDeleteConfirm"  title="Mark as Paid"
                                            class="btn btn-dlt btn-paid" v-if="item.show_mark_as_paid_btn && item.status === 'unpaid'"><i class="material-icons">monetization_on</i>
                                        </a>
                                        <a href="javascript:void(0)"  @click="confirmUnpaid(item.id)" data-toggle="modal" title="Mark as Unpaid"
                                            class="btn btn-dlt btn-paid" v-if="item.status === 'paid'">
                                            <i class="material-icons">refresh</i>
                                        </a>
                                        @endpermission
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" v-else>
                    <div class="col-md-12">
                        <div class="alert alert-warning" role="alert">
                        {{ @trans('finance.no_records_to_show') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageModals')
    <div class="modal" tabindex="-1" role="dialog" id="confirmPaidStatusModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to update status as paid?</p>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('finance.cancel') }}</button>
                    <button type="submit" class="btn btn-success submitApprovePayment" @click="updatePaymentStatus()">Save</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" tabindex="-1" role="dialog" id="confirmUnpaidStatusModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to update status as unpaid?</p>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('finance.cancel') }}</button>
                    <button type="submit" class="btn btn-success submitApprovePayment" @click="updatePaymentStatus()">Save</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal right filter-modal" id="pdcFilterModal" tabindex="-1" role="dialog" aria-labelledby="filter">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="filter">{{ @trans('job.filter') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>

                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group btm-arrow select">
                                    <label class="control-label">Team Member</label>
                                    <select name="filter_team_member_id" class="form-control" v-model="filter_team_member_id">
                                        <option value="">Show All</option>
                                        @foreach($teamMembers as $user)
                                            <option value="{{ $user->id }}">{{ $user->full_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group btm-arrow select">
                                    <label class="control-label">Project</label>
                                    <select name="filter_project_id" class="form-control" v-model="filter_project_id">
                                        <option value="">Show All</option>
                                        @foreach($projects as $project)
                                            <option value="{{ $project->id }}">{{ $project->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="submit" class="btn btn-em submitApplyBtn" @click="updateFilter">{{ @trans('job.update_filter') }}</button>
                    <button type="submit" class="btn btn-cncl" @click="clearFilter">{{ @trans('finance.clear') }}</button>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('pageJs')
<script>
    var commission_indexUrl = "{{route('admin.project-commission.indexJson',['panel' => Session::get('panel') ])}}";
    var updatePaymentStatusUrl = "{{route('admin.project-commission.updateProfitCommissionStatus',['panel' => Session::get('panel') ])}}";
</script>
<script type="text/javascript" src="{{ asset('js/admin/finance/project_commission_distribution.js') }}"></script>
@endpush