@extends('admin.layouts.main')

@section('title')
Mystery Programs
@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('mystery_program.mystery_programs') }}</a></li>
                </ol>
            </nav>

            <div class="top-bar d-flex align-items-center">
                <h2>{{ @trans('mystery_program.mystery_programs') }}</h2>

                <div class="right-table-container ml-auto">
                    <div class="form-group date-range">
                        <div id="reportrange" class="date-range-input">
                            <i class="material-icons">date_range</i>&nbsp;
                            <span></span>
                        </div>
                    </div>
                    {{-- <a href="javascript:void(0)" class="btn btn-em" data-toggle="modal" data-target="#filter"><img src="{{ asset('img/admin/ic_filter.svg') }}" alt="" class="mr-1"> Filter</a> --}}
                    @permission('mystery-program-write')
                        <a href="javascript:void(0)" class="btn btn-em btn-primary-em" id="add">{{ @trans('mystery_program.create_new') }}</a>
                    @endpermission
                </div>
            </div>

            <div class="statistics-panel d-flex">
                <div class="col draft">
                    <div class="stat-panel-info">
                        <h3>@{{ ongoing_task_count }}</h3>
                        <p>{{ @trans('mystery_program.ongoing') }}</p>
                    </div>
                </div>
                <div class="col pending">
                    <div class="stat-panel-info">
                        <h3>@{{ scheduled_task_count }}</h3>
                        <p>{{ @trans('mystery_program.scheduled') }}</p>
                    </div>
                </div>
                <div class="col paid">
                    <div class="stat-panel-info">
                        <h3>@{{ completed_task_count }}</h3>
                        <p>{{ @trans('mystery_program.completed') }}</p>
                    </div>
                </div>
            </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/admin/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">
                        <div class="form-group select btm-arrow mb-0 d-flex without-label align-items-center" v-if="items.length">
                            <label style="white-space: nowrap;" class="mb-0 gray">{{ @trans('mystery_program.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('mystery_program.scenario_no') }}.<a href="javascript:void(0)" :class="classSort('scenario_number')" @click="sort('scenario_number')"></a></th>
                                    <th>{{ @trans('mystery_program.scenario_name') }}<a href="javascript:void(0)" :class="classSort('scenario_name')" @click="sort('scenario_name')"></th>
                                    <th>{{ @trans('mystery_program.industry') }}</th>
                                    <th>{{ @trans('mystery_program.client') }}</th>
                                    <th>{{ @trans('mystery_program.status') }}<a href="javascript:void(0)" :class="classSort('status')" @click="sort('status')"></th>
                                    <th>{{ @trans('mystery_program.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in items">
                                    <td v-if="item.is_red_flag =='1'"><i class="material-icons text-danger">warning</i></td>
                                    <td v-else-if="item.is_star_rate =='1'"><i class="material-icons text-success">star</i></td>
                                    <td v-else></td>
                                    <td>@{{ item.scenario_number }}</td>
                                    <td><a :href="'{{url('mfmp-admin/mystery-programs/detail')}}/'+ item.id" class="d-block text-underlined">@{{ item.scenario_name }}</a></td>
                                    <td v-if="item.client && item.client.industry && item.client.industry.name">@{{ item.client.industry.name }}</td>
                                    <td v-else>-</td>
                                    <td v-if="item.client && item.client.name">@{{ item.client.name }}</td>
                                    <td v-else>-</td>
                                    <td>@{{ item.status | capitalize }}</td>
                                    <td class="act-btn">
                                        @permission('mystery-program-read')
                                        <a :href="'{{url(Session::get('panel').'/mystery-programs/detail')}}/'+ item.id" title="View" class="btn btn-view"><i class="material-icons">remove_red_eye</i></a>
                                        @endpermission
                                        @permission('mystery-program-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('mystery-program-delete')
                                        <a href="javascript:void(0)" @click="confirm(item.id)" title="Delete" class="btn btn-dlt"><i class="material-icons">delete</i></a>
                                        @endpermission --}}

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </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>
</main>
@endsection

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

@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\Mystery_program\StoreMysteryProgram', '#storeMysteryProgram') !!}

<script>

    $(document).ready(function() {

        $('#start_date').datepicker({
            autoHide: true,
            format: '{{ config('custom.formats.date_js') }}',
            startDate: $().datepicker('getDate', true),
            zIndex: 2048,
        });

        $('#end_date').datepicker({
            autoHide: true,
            format: '{{ config('custom.formats.date_js') }}',
            startDate: $().datepicker('getDate', true),
            zIndex: 2048,
        });

        $(document).on('change','#start_date', function () {
            $('#end_date').datepicker('setStartDate', $('#start_date').datepicker('getDate'));
        });

        $(document).on('change','#end_date',function () {
            $('#start_date').datepicker('setEndDate', $('#end_date').datepicker('getDate'));
        });

        $('#add').on('click',function(){

            $('#client_id').empty();
            $("#storeMysteryProgram").validate().resetForm();
            $('input').removeClass('is-valid');
            $('select').removeClass('is-valid');

            $.ajax({
                type : 'get',
                data : '',
                url  : '{{route('admin.mystery-programs.get_clients',['panel' => Session::get('panel')])}}',
                success : function($response){

                    $response_data = JSON.parse($response);

                    if($response_data.status == 'success'){
                        $('#scenario_number').val($response_data.data.scenario_number);

                        $('#mp_id').val('');
                        $('#scenario_name').val('');
                        $('#start_date').val('');
                        $('#end_date').val('');

                    }

                }
            });

            $('h4.mpHeader').text('Add Mystery Program');
            $('#storeButton').html('Add Mystery Program');
            $('#create_mystery_program').modal();
        });

        $('#storeMysteryProgram').on('submit',function(){
            if($(this).valid()) {

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

                $data = {
                    id: $id,
                    scenario_number: $('#scenario_number').val(),
                    scenario_name: $('#scenario_name').val(),
                    client_id: $('#client_id').val(),
                    start_date: $('#start_date').val(),
                    end_date: $('#end_date').val()
                   };

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

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

                    app.get();

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

                }
            });
            }
            return false;
        });

        $('#reportrange span').html('All');

        $('#reportrange').daterangepicker({
            ranges: {
                'All' : [moment(), 'all'],
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            },
            "startDate": moment(),
            "endDate": "all",
            showCustomRangeLabel: true,
        }, function(start, end, label) {
            if(end.format('YYYY-MM-DD') == 'Invalid date'){
                $('#reportrange span').html('All');
            }  else {
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }
        });

        $('#reportrange').on('apply.daterangepicker',function(){
            if($('#reportrange').data('daterangepicker').endDate.format('YYYY-MM-DD') == 'Invalid date'){
                $dateRange = ''
            }  else {
                $dateRange = $('#reportrange').data('daterangepicker').startDate.format('YYYY-MM-DD') +  ' to '  + $('#reportrange').data('daterangepicker').endDate.format('YYYY-MM-DD');
            }
            app.dateRangeFilter($dateRange);
        });
    });

    var mp_indexUrl     = "{{route('admin.mystery-programs.index',['panel' => Session::get('panel') ])}}";
    var mp_editUrl      = "{{route('admin.mystery-programs.edit',['panel' => Session::get('panel'), 'id' => null])}}"
    var mp_deleteUrl    = "{{route('admin.mystery-programs.destroy',['panel' => Session::get('panel'),'id' => null])}}";
    @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: 'Okay'
    });
    @endif

</script>
<script type="text/javascript" src="{{ asset('js/admin/mystery_program.js') }}"></script>
@endpush