@extends('admin.layouts.main')

@section('title')
    @if (request()->is('*/approved-kua-agent'))
        Approved Kua Agent
    @elseif(request()->is('*/pending-kua-agent'))
        Pending Kua Agent
    @elseif(request()->is('*/rejected-kua-agent'))
        Rejected Kua Agent
    @endif
@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_agent.kua') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                            @if (request()->is('*/approved-kua-agent'))
                                {{ @trans('kua_agent.approved') }}
                            @elseif (request()->is('*/pending-kua-agent'))
                                {{ @trans('kua_agent.pending') }}
                            @elseif (request()->is('*/rejected-kua-agent'))
                                {{ @trans('kua_agent.rejected') }}
                            @endif
                            {{ @trans('kua_agent.kua') }}
                        </li>
                    </ol>
                </nav>

                <div class="top-bar d-flex align-items-center">
                    <h2>
                        @if (request()->is('*/approved-kua-agent'))
                            {{ @trans('kua_agent.approved') }}
                        @elseif (request()->is('*/pending-kua-agent'))
                            {{ @trans('kua_agent.pending') }}
                        @elseif (request()->is('*/rejected-kua-agent'))
                            {{ @trans('kua_agent.rejected') }}
                        @endif
                        {{ @trans('kua_agent.kua') }}
                    </h2>

                    {{--  @if (request()->is('*/approved-kua-agent'))
                <div class="right-table-container ml-auto">
                    @permission('kua-agent-write')
                        <a href="javascript:void(0)" class="btn btn-em btn-primary-em" id="add">{{ @trans('kua_agent.create_new') }}</a>
                    @endpermission
                </div>
                @endif  --}}
                </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" 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_agent.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_agent.first_name') }}<a href="javascript:void(0)"
                                                :class="classSort('first_name')" @click="sort('first_name')"></a></th>
                                        <th>{{ @trans('kua_agent.last_name') }}<a href="javascript:void(0)"
                                                :class="classSort('last_name')" @click="sort('last_name')"></a></th>
                                        <th>{{ @trans('kua_agent.email') }}<a href="javascript:void(0)"
                                                :class="classSort('email')" @click="sort('email')"></a></th>
                                        <th>{{ @trans('kua_agent.mobile') }}<a href="javascript:void(0)"
                                                :class="classSort('mobile')" @click="sort('mobile')"></a></th>
                                        <th>{{ @trans('kua_agent.gender') }}</th>
                                        <th>{{ @trans('kua_agent.city') }}</th>
                                        <th>{{ @trans('kua_agent.candidate_profile') }}</th>
                                        <th>{{ @trans('kua_agent.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in items" v-if="items.length > 0" :key="item.id || index">

                                        <td attr="">@{{ from + index }}</td>
                                        <td>@{{ item.user_first_name || '-' }}</td>
                                        <td>@{{ item.user_last_name || '-' }}</td>
                                        <td>@{{ item.user_email || '-' }}</td>
                                        <td>@{{ item.user_mobile || '-' }}</td>
                                        <td v-if="item.profiles && item.profiles.gender == 'male'">
                                            {{ @trans('kua_agent.male') }}</td>
                                        <td v-else-if="item.profiles && item.profiles.gender == 'female'">
                                            {{ @trans('kua_agent.female') }}</td>
                                        <td v-else> - </td>
                                        <td v-if="item.locations && item.locations.cities && item.locations.cities.name">
                                            @{{ item.locations.cities.name }}</td>
                                        <td v-else> - </td>
                                        <td class="act-btn">
                                            @permission('kua-agent-read')
                                                <a :href="'{{ url(Session::get('panel') . '/candidates/show') }}/' + item.empower_profile_id"
                                                    title="View" class="btn btn-view" target="_blank"><i
                                                        class="material-icons">remove_red_eye</i></a>
                                            @endpermission
                                        </td>
                                        <td class="act-btn">
                                            @permission('kua-agent-read')
                                                {{-- @{{ item }} --}}
                                                <a :href="'{{ url(Session::get('panel') . '/kua-agent/detail') }}/' + item.id"
                                                    title="View" class="btn btn-view" target="_blank"><i
                                                        class="material-icons">remove_red_eye</i></a>
                                            @endpermission
                                            @if (request()->is('*/approved-kua-agent'))
                                                {{-- @permission('kua-agent-write')
                                            <a href="javascript:void(0)" title="Edit" class="btn btn-edit" @click="edit(item.id)">
                                                <i class="material-icons">edit</i>
                                            </a>
                                            @endpermission --}}
                                                @permission('kua-agent-write')
                                                <!-- <label class="switch">
                                                    <input
                                                      type="checkbox"
                                                      v-model="item.is_active"
                                                      :true-value="true"
                                                      :false-value="false"
                                                      @click.prevent="confirmToggleStatus(item)"
                                                    >
                                                    <span class="slider round"></span>
                                                  </label> -->

                                                  <a href="javascript:void(0)" title="Edit Notes" 
                                                    @click="confirmEditKuaAgent(item.id)" class="btn">
                                                        <i class="material-icons">edit</i>
                                                    </a>

                                                    {{-- @click="editKuaAgent(item.id,'rejected' ,item.user_first_name + ' ' + item.user_last_name)"> --}}
                                                  
                                                
                                                @endpermission
                                                {{-- @permission('kua-agent-delete')
                                            <a href="javascript:void(0)" @click="confirm(item.id)" title="Delete" class="btn btn-dlt"><i class="material-icons">delete</i></a>
                                            @endpermission --}}
                                            @elseif(request()->is('*/pending-kua-agent'))
                                            @permission('kua-agent-write')
                                                <a href="javascript:void(0)" title="Approve" class="btn"
                                                    @click="confirmMplusApproval(item.id,'approved' ,item.user_first_name + ' ' + item.user_last_name)">
                                                    <i class="material-icons text-success">done</i>
                                                </a>
                                                <a href="javascript:void(0)" title="Reject" class="btn"
                                                    @click="confirmMplusApproval(item.id,'rejected' ,item.user_first_name + ' ' + item.user_last_name)">
                                                    <i class="material-icons text-danger">close</i>
                                                </a>
                                                @endpermission
                                            @endif
                                            @permission('kua-agent-user-impersonate-read')
                                           
                                                <a v-if="item.user.can_be_impersonated" class="btn btn-login"
                                                    :href="'{{ url('impersonate/take') }}/' + item.empower_profile_id"><i
                                                        class="material-icons">
                                                        input
                                                    </i>
                                                </a>
                                            @endpermission

                                            {{-- @permission('candidate-impersonate-read')
                                            <a v-if="item.can_be_impersonated" class="btn btn-login"
                                                :href="'{{url('impersonate/take')}}/'+ item.id"><i class="material-icons">
                                                    input
                                                </i>
                                            </a>
                                            @endpermission --}}

                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row" v-if="!items.length">
                    <div class="col-md-12">
                        <div class="alert alert-warning" role="alert">
                            {{ @trans('kua_agent.no_records_to_show') }}
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('pageModals')
    @include('admin.modules.kua_agent.modal')
    @if (request()->is('*/approved-kua-agent'))
        @include('admin.components.modal_delete_js')
    @endif
    <div class="modal fade" id="modalRejectConfirm" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Rejection</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 reject <b>@{{ user_name }}</b> Kua Agent?</p>

                     <div class="form-group mt-3">
                        <label for="rejectNotes">Notes (optional)</label>
                        <textarea id="rejectNotes" class="form-control" v-model="rejectNotes" placeholder="Enter any notes here..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-privous" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" @click="approvalMPlus">Reject</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Approve Modal -->
    <div class="modal fade" id="modalApproveConfirm" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Approval</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 approve <b>@{{ user_name }}</b> Kua Agent?</p>

                    <div class="form-group mt-3">
                        <label for="approvalNotes">Notes (optional)</label>
                        <textarea id="approvalNotes" class="form-control" v-model="approvalNotes" placeholder="Enter any notes here..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-privous" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-em" @click="approvalMPlus">Approve</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Edit notes modal --}}
    <div class="modal fade" id="modalEditKuaAgent" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Kua Agent</h5>
                    <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="form-group mt-3">
                        <label for="approvalNotes">Notes (optional)</label>
                        <textarea id="approvalNotes" class="form-control" v-model="approvalNotes" placeholder="Enter any notes here..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-privous" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-em" @click="editKuaAgent()">Submit</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Confirmation Modal -->
    <div class="modal fade" id="toggleStatusModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Status Change</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 change the status of this KUA Agent to <b>@{{ toggleStatusText }}</b>?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @click="cancelToggle">Cancel</button>
                    <button type="button" class="btn btn-primary" @click="toggleStatusConfirmed">Confirm</button>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('pageJs')
    {!! JsValidator::formRequest('App\Http\Requests\Kua_agent\StoreKuaAgentStep1', '#StoreKuaAgent') !!}

    <script>
        @if (request()->is('*/approved-kua-agent'))
            var mp_indexUrl =
                "{{ route('admin.kua-agent.index', ['panel' => Session::get('panel'), 'status' => 'approved']) }}";
        @elseif (request()->is('*/pending-kua-agent'))
            var mp_indexUrl =
                "{{ route('admin.kua-agent.index', ['panel' => Session::get('panel'), 'status' => 'pending']) }}";
            var mp_approvalUrl =
                "{{ route('admin.kua-agent.approval-kua-agent', ['panel' => Session::get('panel'), 'id' => null]) }}";
        @elseif (request()->is('*/rejected-kua-agent'))
            var mp_indexUrl =
                "{{ route('admin.kua-agent.index', ['panel' => Session::get('panel'), 'status' => 'rejected']) }}";
        @endif
        var editMPlusUrl = "{{ route('admin.kua-agent.edit', ['panel' => Session::get('panel'), 'id' => null]) }}"
        var mp_deleteUrl = "{{ route('admin.kua-agent.destroy', ['panel' => Session::get('panel'), 'id' => null]) }}";
        var toggle_statusUrl =
            "{{ route('admin.kua-agent.toggle-status', ['panel' => Session::get('panel'), 'id' => null]) }}";
        var updateKuaAgentUrl = "{{ route('admin.kua-agent.update-kua-agent', ['panel' => Session::get('panel'), 'id' => null])}}"
        @if (request()->is('*/approved-kua-agent'))
            var teleOperators = {!! $teleOperators !!};
        @endif

        @if (Session::has('message'))
            Snackbar.show({
                pos: 'bottom-right',
                text: "{!! session('message') !!}",
                actionText: 'Okay'
            });
        @endif
    </script>
    <script type="text/javascript" src="{{ asset('js/admin/kua_agent.js') }}"></script>
    <script>
        $('#birth_date').datepicker({
            autoHide: true,
            format: '{{ config('custom.formats.date_js') }}',
            endDate: $().datepicker('getDate', true),
            zIndex: 2048,
        });

        $('#StoreKuaAgent').on('submit', function() {
            if ($(this).valid()) {
                $formData = new FormData($('#StoreKuaAgent')[0]);

                $.ajax({
                    url: '{{ route('admin.kua-agent.store', ['panel' => Session::get('panel')]) }}',
                    type: 'POST',
                    data: $formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function($response) {

                        $response_data = JSON.parse($response);

                        if ($response_data.status == 'success') {

                            $('#create_kua_agents').modal('hide');
                            $('#mplus_id').val('');
                            $('#StoreKuaAgent').trigger('reset');
                            $("#StoreKuaAgent").validate().resetForm();
                            $('input').removeClass('is-valid');
                            $('select').removeClass('is-valid');
                            $('textarea').removeClass('is-valid');
                            $('.mPlusDocumentName').text('');
                            $('.mPlusContractName').text('');
                            $("[type='radio']").removeAttr("checked");
                            $('.personal_insurance_companies').hide();
                            $('.fuel_stations_select2').hide();
                            $('.business_insurance_companies').hide();
                            $('.js-example-basic-multiple').val('').trigger('change');
                            $('.parent_network_operator').remove();

                            app.get();

                            Snackbar.show({
                                pos: 'bottom-right',
                                text: ($response_data.edit == 'true') ?
                                    'Kua Agent Updated Successfully!' :
                                    'Kua Agent Added Successfully!',
                                actionText: 'Okay'
                            });
                        }
                    }
                });

            }

            $('#StoreKuaAgent').find('.is-invalid').parents('.collapse').addClass('show')
            return false;
        });
    </script>
@endpush