@extends('admin.layouts.main')

@section('title')
Mystery Program Detail
@endsection

@section('content')

<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.mystery-programs.indexpageload', ['panel' => Session::get('panel')]) }}">{{ @trans('mystery_program.mystery_programs') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('mystery_program.detail') }}</li>
                </ol>
            </nav>
            <div class="profile-detail">
                <span class="act-btn">
                    <a href="{{ route('admin.mystery-programs.detail', ['panel' => Session::get('panel'), 'id' => $detail->mp_id]) }}" title="Back" class="btn btn-back">
                        <i class="material-icons">keyboard_arrow_left</i>
                    </a>
                </span>
                <div class="person-details">
                    <div class="about pl-3">
                        <h2 class="cndidate-name">{{ $detail->scenario_name }}</h2>
                        <div class="franchise-tags">
                            <span class="admin-tag">{{ $detail->client_name }}</span>
                            <span class="date"><i class="material-icons">date_range</i>
                                {{ \Carbon\Carbon::parse($detail->start_date)->format( config('custom.formats.date'))}}
                            </span>
                            <span class="badge badge-pill green">{{ ucfirst($detail->status) }}</span>
                        </div>
                    </div>
                </div>
                <div class="right-table-container ml-auto">
                @permission('mystery-program-write')
                    <a href="javascript:void(0)" class="btn btn-em" @click="add">{{ @trans('mystery_program.add_m') }}</a>
                @endpermission
                </div>
            </div>
            <div class="detail-content mt-4">
				<div class="card">
                    <div class="container-fluid">
                        <div class="card-body">
                            <p class="gray  semibold">{{ $detail->branch_name }}</p>
                            <div class="table-data">
                                <div class="table-responsive" v-if="items.length">
                                    <table class="table" id="mtcTable">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{ @trans('mystery_program.m_user') }}</th>
                                                <th>{{ @trans('mystery_program.city') }}</th>
                                                <th>{{ @trans('mystery_program.start_date') }}</th>
                                                <th>{{ @trans('mystery_program.end_date') }}</th>
                                                <th>{{ @trans('mystery_program.visiting_charge') }}</th>
                                                <th>{{ @trans('mystery_program.time_slot') }}</th>
                                                <th>{{ @trans('mystery_program.status') }}</th>
                                                @permission(['mystery-program-write','mystery-program-delete'],false)
                                                <th>{{ @trans('mystery_program.action') }}</th>
                                                @endpermission
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,index) in items">
                                                    <td>@{{ index + 1 }}</td>
                                                    <td>@{{ item.m_plus.first_name }} @{{ item.m_plus.last_name }}
                                                        <i class="material-icons text-danger" v-if="item.red_flag && item.red_flag == '1'">warning</i><i class="material-icons text-success" v-if="item.red_flag == '0' && item.service_star && item.service_star == '1'">star</i>
                                                    </td>
                                                    <td>@{{ item.m_plus.locations.cities.name }}</td>
                                                    <td>@{{ item.start_date | moment('start_date')}}</td>
                                                    <td>@{{ item.end_date | moment('start_date')}}</td>
                                                    <td>{{ $currency_code }} @{{ Number(item.visit_charge).toLocaleString()}}</td>
                                                    <td>@{{ item.time_slot | capitalize }}</td>
                                                    <td v-if="item.status === 'approved'">
                                                        <span class="em-badge gray">{{ @trans('mystery_program.approved') }}</span>
                                                    </td>
                                                    <td v-if="item.status === 'submitted'">
                                                        <span class="em-badge green">{{ @trans('mystery_program.submitted') }}</span>
                                                    </td>
                                                    <td v-if="item.status === 'scheduled'">
                                                        <span class="em-badge gray">{{ @trans('mystery_program.scheduled') }}</span>
                                                    </td>
                                                    <td v-if="item.status === 'rejected'">
                                                        <span class="em-badge red">{{ @trans('mystery_program.rejected') }}</span>
                                                    </td>
                                                    <td v-if="item.status === 'due'">
                                                        <span class="em-badge orange">{{ @trans('mystery_program.due') }}</span>
                                                    </td>
                                                    <td v-if="item.status === 'pending'">
                                                        <span class="em-badge green">{{ @trans('mystery_program.pending') }}</span>
                                                    </td>
                                                    @permission(['mystery-program-write','mystery-program-delete'],false)
                                                    <td class="act-btn">
                                                        @permission('mystery-program-write')
                                                        <a href="javascript:void(0)" title="Edit" class="btn btn-edit" @click="edit(item.id,
                                                            item.visit_charge,item.languages,item.start_date,item.end_date,item.time_slot,item.first_name,
                                                            item.last_name,item.m_plus_id,item.status)" v-if="item.status != 'approved'">
                                                            <i class="material-icons">edit</i>
                                                        </a>
                                                        @endpermission
                                                        @permission('mystery-program-delete')
                                                        <a href="javascript:void(0)" title="Delete" class="btn btn-delete" @click="confirm(item.id)">
                                                            <i class="material-icons">delete</i>
                                                        </a>
                                                        @endpermission
                                                    </td>
                                                    @endpermission
                                                </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="row" v-if="!items.length && loaded == true">
                                    <div class="col-md-12">
                                        <div class="alert alert-warning" role="alert">
                                        {{ @trans('mystery_program.no_records_to_show') }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>
@endsection

@push('pageModals')
@include('admin.components.modal_delete_js')
@include('admin.modules.mystery_program.client_branches.add_m_plus_modal')
@endpush


@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\Mystery_program\editAssignedMPlus', '#updateAssignedMPlus') !!}
<script>
    jQuery(document).ready(function() {

            $('#assignMPlus').validate({
                errorElement: 'span',
                errorClass: 'invalid-feedback',
                errorPlacement: function(error, element) {

                    if (element.hasClass('dateselect')) {
                        error.insertAfter(element.parent('.date'))
                    } else if (element.hasClass('time_picker')) {
                        error.insertAfter(element.parent('.time'))
                    } else if (element.parent('.input-group').length ||
                        element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                        error.insertAfter(element.parents('.form-group'));
                    } else if (element.prop('type') == 'file') {
                        error.insertAfter(element.parents('.browse-btn'));
                    } else if (element.is("textarea")) {
                        error.insertAfter(element.next());
                    } else if (element.hasClass('select-two')) {
                        error.insertAfter(element.next());
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element) {
                    $(element).closest('.form-control').removeClass('is-valid').addClass('is-invalid'); // add the Bootstrap error class to the control group
                },
                unhighlight: function(element) {
                    $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
                },
                success: function (element) {
                    $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
                },
                rules: {
                    "data[*][visit_charge]":{
                        "laravelValidation":[
                            ["Required",[],"Visit Charge is required.",true],
                            ["Numeric",[],"Visit Charge must be a number.",false],
                            ["Min",["0"],"Visit Charge must be a number.",false,"visit_charge"]
                        ]},
                    "data[*][languages][]":{
                        "laravelValidation":[["Required",[],"Language is required.",true]]
                        },
                    "data[*][start_date]":{
                        "laravelValidation":[["Required",[],"Start date is required.",true]
                        ]},
                    "data[*][end_date]":{
                        "laravelValidation":[["Required",[],"End date is required.",true]
                        ]},
                    "data[*][end_date]":{timeGreaterThanCurrent: '#start_date'},
                    "data[*][time_slot]":{
                        "laravelValidation":[["Required",[],"Time Slot is required.",true]],
                        }
                }
            });
            $.validator.addMethod("timeGreaterThanCurrent", function(value, element) {
                var sdate = $('#start_date').val().split('/');
                var sYmd = sdate[2] + '/' + sdate[1] + '/' + sdate[0];
                var start = new Date(sYmd);

                var edate = value.split('/');
                var eYmd = edate[2] + '/' + edate[1] + '/' + edate[0];
                var end = new Date(eYmd);
                return start < end;
            }, function(value, element) {
                value2 = $('#end_date').val();;
                var msg = 'End Date must be greater than of Start Date.';
                if(value2 == ''){
                    msg = 'End date is required';
                }
                return msg;
            });
    });
</script>
<script>

var dateFormat = "{{ config('custom.formats.date') }}".toUpperCase();
var dateFormatJs = "{{ config('custom.formats.date_js') }}".toUpperCase();
var clientBranchId = {{ request()->id }};
var mp_mPlusUrl = '{{ route("admin.mystery-programs.get_assigned_m_plus",["panel" => Session::get("panel"),"id" => request()->id]) }}';
var get_mPlusUrl  = "{{ route('admin.mystery-programs.get_m_plus',['session' => Session::get('panel'),'id' => request()->id]) }}";
var get_mPlusEditUrl = "{{ route('admin.mystery-programs.get_edit_m_plus',['session' => Session::get('panel'), 'id' => null]) }}";
var assignedMPlus_deleteUrl = "{{ route('admin.mystery-programs.deleteAssignedMPlus', ['session' => Session::get('panel'), 'id' => NULL]) }}"
var languagesData = {!! json_encode($languages) !!}

$(document).on('submit', '#assignMPlus', function(e){
    if($(this).valid()) {

    $("#submit").attr("disabled", true).val("Please Wait...");

    e.preventDefault();

    $formData = $('#assignMPlus').serializeArray();

    $.ajax({
        type: 'post',
        data: $formData,
        url: '{{ route('admin.mystery-programs.assignMPlus', ['panel' => Session::get('panel')]) }}',
        success: function($response) {
            $response_data = JSON.parse($response);

            if($response_data.status == 'success') {
                $('#assignMPlus').html(' <input type="hidden" name="_token" value="