@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="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->client->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>
                    @permission('mystery-program-write')
                    <div class="right-table-container ml-auto">
                        <a href="javascript:void(0)" class="btn btn-em" data-toggle="modal" data-target="#add_assessment">Assessment</a>
                        <a href="javascript:void(0)" class="btn btn-em" id="add_branches_modal">{{ @trans('mystery_program.add_branch') }}</a>
                    </div>
                    @endpermission
                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link"  :class="{'active' : current_tab == 'program_details'}"
                            @click="tab('program_details')">{{ @trans('mystery_program.program_details') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  :class="{'active' : current_tab == 'assessment'}"
                            @click="tab('assessment')">{{ @trans('mystery_program.assessment') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  :class="{'active' : current_tab == 'custom_questions'}"
                            @click="tab('custom_questions')">{{ @trans('mystery_program.custom_question') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  :class="{'active' : current_tab == 'mp_clients_branches'}"
                            @click="tab('mp_clients_branches')">{{ @trans('mystery_program.branch_m') }}+</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  :class="{'active' : current_tab == 'results'}"
                            @click="tab('results')">{{ @trans('mystery_program.results') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  :class="{'active' : current_tab == 'user_access'}"
                            @click="tab('user_access')">{{ @trans('mystery_program.user_access') }}</a>
                    </li>
                </ul>
            </div>

            <div class="detail-content mt-4">
                <!-- Tab panes -->
                <div class="tab-content box">

                    @include('admin.modules.mystery_program.lists.program_details')

                    @include('admin.modules.mystery_program.lists.assessments')

                    @include('admin.modules.mystery_program.lists.custom_questions')

                    @include('admin.modules.mystery_program.lists.mp_clients_branches')

                    @include('admin.modules.mystery_program.lists.results')

                    @include('admin.modules.mystery_program.lists.user_access')
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

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


@push('pageJs')
<script type="text/javascript" src="{{ asset('js/admin/mystery_program_detail.js') }}"></script>
<script>
    var custom_questionsStoreUrl = "{{ route('admin.custom-questions.store_custom_question',['panel' => Session::get('panel'), 'id' => NULl]) }}";


    $('#client_branches').select2({
        placeholder: "Select Client Branch(s)"
    });

    $('#add_branches_modal').on('click',function(){
        $('#clients').empty();
        $('#client_branches').empty();
        $('#add_branches').modal('show');
    });

    $("#clients").on('change', function () {

        $('#client_branches').empty();
        $clients = $('#clients').val();

        $currentUrl = window.location.pathname.split("/");
        $mp_id = $currentUrl[4];

        if($clients != ''){
            $.ajax({
                type: "POST",
                url: "{{ route('admin.mystery-programs.getBranchesByClients', ['panel' => Session::get('panel')]) }}",
                data:  {
                    'mystery_program' : $mp_id,
                    'clients': $clients
                },
                headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                cache: false,
                success: function ($response) {
                    if ($response != "") {
                        $("#client_branches").empty();
                        $("#client_branches").append('<option value="" hidden>Select Client Branch(s)</option>');
                        $.each($response, function (id, data) {
                            $("#client_branches").append('<option value="'+ data.company_id + ':'+ data.id +'">' + data.name + '</option>');
                        });

                    } else {
                        $("#client_branches").empty();
                        $("#client_branches").append('<option value="" hidden>Select Branch</option>');
                    }

                }
            });
        }

    });

    $("#StoreClientAndBranchInMp").on('submit', function (e) {
        e.preventDefault();
        $mp_id = $('#mp_id_custom_question').val();
        $clients = $('#clients').val();
        $client_branches = $('#client_branches').val();

        $.ajax({
            type: "POST",
            url: "{{ route('admin.mystery-programs.storeMpClientBranches', ['panel' => Session::get('panel')]) }}",
            data:  {
                'mp_id': $mp_id,
                'clients': $clients,
                'client_branches': $client_branches
            },
            headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            cache: false,
            success: function ($response) {

                $response_data = JSON.parse($response);

                app.get();

                if($response_data.status == 'success') {
                    $('#add_branches').modal('hide');
                    Snackbar.show({
                        pos: 'bottom-right',
                        text: $response_data.message,
                        actionText: 'Okay'
                    });
                }
            }
        });


    });

    $(document).ready(function() {
        var myForm = $('#storeAssessmentDescription');
        $.data(myForm[0], 'validator').settings.ignore = "null";

        tinymce.init({
            selector: 'textarea.editor',
            height: 300,
            menubar: false,
            branding: false,
            browser_spellcheck: true,
            toolbar: 'undo redo | bold italic underline strikethrough | link | alignleft aligncenter alignright alignjustify | bullist numlist  | removeformat | preview',
            plugins: [
                'link preview wordcount lists','paste'
            ],
            paste_auto_cleanup_on_paste : true,
            paste_remove_styles: true,
            paste_remove_styles_if_webkit: true,
            paste_strip_class_attributes: true,
            setup: function(editor) {
                editor.on('keyUp', function() {
                    tinyMCE.triggerSave();

                    if (!$.isEmptyObject(myForm.validate().submitted))
                        myForm.validate().form();
                });
            },

        });
    });

    $('#storeAssessmentDescription').validate({
        errorElement: 'span',
        errorClass: 'invalid-feedback',
        errorPlacement: function(error, element) {
            if (element.is("textarea")) {
                error.insertAfter(element.next());
            } else {
                error.insertAfter(element);
            }
        },
        rules: {
            'assessment_description[*][]' : 'required'
        },
    });
</script>
{!! JsValidator::formRequest('App\Http\Requests\Mystery_program\StoreCustomQuestion', '#storeCustomQuestion') !!}
{!! JsValidator::formRequest('App\Http\Requests\Mystery_program\StoreClientAndBranchInMp', '#StoreClientAndBranchInMp') !!}
{!! JsValidator::formRequest('App\Http\Requests\Mystery_program\StoreAssessment', '#store_assessment') !!}


@if(!empty(Session::get('description_modal')) && Session::get('description_modal') == 'show')
    <script>
        $(function() {
            $('#add_assessment_description').modal('show');
        });
    </script>
@endif

<script type="text/javascript">
	@if(Session::has('message'))
	Snackbar.show({
		pos: 'bottom-right',
		text: "{!! session('message') !!}",
		actionText: 'Okay'
	});
	@endif
</script>
<script type="text/javascript">
    $('#storeCustomQuestion').on('submit',function(){
        if($(this).valid()) {

            if($('#custom_question_id').val() != ''){
                $id = $('#custom_question_id').val()
            } else {
                $id = '';
            }

            $data = {
                    id: $id,
                    mp_id: $('#mp_id_custom_question').val(),
                    question: $('#question').val(),
                    question_type: $('#question_type').val()
            };

            $.ajax({
                type : 'post',
                data : $data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url  : '{{route('admin.custom-questions.store_custom_question',['panel' => Session::get('panel')])}}',
                success : function($response){

                    $('input').removeClass('is-valid');
                    $('select').removeClass('is-valid');
                    $('#storeCustomQuestion').trigger('reset');
                    $('#add_custom_question').modal('hide');

                    app.get();

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

                }
            });
        }
        return false;
    });

</script>
<script src="{{ asset('js/vendor/bootree/bootree.js') }}"></script>
<script type="text/javascript">
        $(document).ready(function () {
            var tree = $('#tree').tree({
                uiLibrary: 'bootstrap4',
                iconsLibrary: 'materialicons',
                dataSource: [
                    @foreach($assessments as $key => $assessment)
                            { id: {{$assessment->id}}, text: '{{$assessment->name}}', children: [
                                @foreach($assessment->focus_areas as $fa_key => $focus_areas)
                                    { id: {{$focus_areas->id}}, text: '{{ $focus_areas->title }}', children:[
                                        @foreach($focus_areas->focus_details as $fd_key => $focus_details)
                                            { id: '{{$assessment->id}}-{{$focus_areas->id}}-{{ $focus_details->id }}', text: '{{ $focus_details->title }}',
                                            @isset($oldAssessment)
                                                @foreach($oldAssessment as $key => $value)
                                                    @if($value->focus_detail_id == $focus_details->id && $value->focus_area_id == $focus_areas->id && $value->pillar_id == $assessment->id)
                                                        checked:true,
                                                      @endif
                                                 @endforeach
                                             @endisset },
                                         @endforeach
                                    ] },
                                @endforeach
                                ] },
                    @endforeach
                ],
                checkboxes: true
            });
            $('#btnSave').on('click', function (e) {
                var checkedIds = tree.getCheckedNodes();
                $('#assessmentData').val(checkedIds);
            });
        });
</script>
@endpush

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