@extends('layouts.cmsApp')
@php
$userRole = \Session::get('role');
@endphp
@section('content')
@php
    $userPermission = \Session::get('userPermission');

@endphp
	<div class="nk-block-head nk-block-head-sm">
        <div class="nk-block-between">
            <div class="nk-block-head-content">
                <h3 class="nk-block-title page-title">Escalation</h3>
                <p>You have total <span class="record_count">{{$escalationCount}}</span> escalations.</p>
            </div><!-- .nk-block-head-content -->
            <div class="nk-block-head-content">
                <div class="toggle-wrap nk-block-tools-toggle">
                    <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="more-options"><em class="icon ni ni-more-v"></em></a>
                    <div class="toggle-expand-content" data-content="more-options">
                        <ul class="nk-block-tools g-3">

                            <li>
                                <a href="#" class="btn btn-trigger btn-icon dropdown-toggle" data-toggle="modal" title="filter" data-target="#modalFilterUser">
                                    <div class="dot dot-primary"></div>
                                    <em class="icon ni ni-filter-alt"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="btn btn-primary d-none d-md-inline-flex export_data" data-href="{{ url('cms/escalation/export') }}"><em class="icon ni ni-download"></em></a>
                            </li>
                            <!-- @if(isset($userPermission['create-campaign'])) -->
                            <li class="nk-block-tools-opt">
                                <a href="{{url('/cms/escalation/create')}}" class="btn btn-primary d-none d-md-inline-flex"><em class="icon ni ni-plus"></em><span>Add New</span></a>
                            </li>
                            <!-- @endif -->
                        </ul>
                    </div>
                </div>
            </div>
        </div><!-- .nk-block-between -->
    </div><!-- .nk-block-head -->
   
    <div class="nk-block table-compact">
        <!--  Filter Tag List -->
        <div id="filter_tag_list" class="filter-tag-list"></div>
        <!-- -->
        <div class="nk-tb-list is-separate mb-3">
            <table class="broadcast-init nowrap nk-tb-list is-separate" data-auto-responsive="false">
                <thead>
                    <tr class="nk-tb-item nk-tb-head">
                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Matrix Identifier</span></th>
                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Complaint Type</span></th>
                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Sub Category</span></th>
                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Product</span></th>
                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Escalation Stages</span></th>
                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Segments</span></th>
                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Max Time Frame (Days)</span></th>
                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Status</span></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div><!-- .nk-block -->
        <div class="modal fade zoom" tabindex="-1" id="modalFilterUser">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Filter</h5>
                        <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                            <em class="icon ni ni-cross"></em>
                        </a>
                    </div>
                    <form role="form" class="mb-0" method="get" action="#">
                    @csrf
                    <div class="modal-body modal-body-lg">
                        <div class="gy-3">
                            <div class="row g-3 align-center">
                                <div class="col-lg-5">
                                    <x-inputs.verticalFormLabel label="Complaint Type" for="surveyTtype" suggestion="Specify the complaint type" />
                                </div>
                                <div class="col-lg-7">

                                    <select class="form-select form-select-sm" data-search="off" data-placeholder="Select complaint category" name="complaint_category" id="selectComplaintCategory">
                                        <option value="">Select Complaint Type</option>
                                        @foreach($complaintCategory as $category)
                                        <option value="{{$category->id}}">{{$category->category}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 align-center">
                                <div class="col-lg-5">
                                    <x-inputs.verticalFormLabel label="Product" for="product" suggestion="Specify the product" />
                                </div>
                                <div class="col-lg-7">
                                    <select class="form-select form-select-sm" data-search="off" data-placeholder="Select Product" name="product" id="selectProduct">
                                        <option value="">Select Product</option>
                                        @foreach($products as $product)
                                        <option value="{{$product->product_id}}">{{$product->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="userId" name="user_id" value="0">
                    <div class="modal-footer bg-light">
                        <div class="row">
                            <div class="col-lg-12 p-0 text-right">
                                <button class="btn btn-outline-light" data-dismiss="modal" aria-label="Close">Cancel</button>
                                <button class="btn btn-danger resetFilter" data-dismiss="modal" aria-label="Close">Clear Filter</button>
                                <button class="btn btn-primary submitBtn" type="button">Submit</button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade zoom" tabindex="-1" id="modalUserPassword">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Update Password</h5>
                        <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                            <em class="icon ni ni-cross"></em>
                        </a>
                    </div>
                    <form role="form" class="mb-0" method="post" action="{{ url('user/update-user-password') }}">
                    @csrf
                    <div class="modal-body modal-body-lg">
                        <div class="gy-3">
                            <div class="row g-3 align-center">
                                <div class="col-lg-5">
                                    <x-inputs.verticalFormLabel label="New Password" for="newPassword" suggestion="Specify the new password the user." />
                                </div>
                                <div class="col-lg-7">
                                    <x-inputs.password value="" for="newPassword" icon="lock-alt" placeholder="New Password" name="newPassword"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="password_user_id" name="password_user_id" value="0">
                    <div class="modal-footer bg-light">
                        <div class="row">
                            <div class="col-lg-12 p-0 text-right">
                                <button class="btn btn-outline-light" data-dismiss="modal" aria-label="Close">Cancel</button>
                                <button type="submit" class="btn btn-primary" type="button">Submit</button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade zoom" tabindex="-1" id="modalLogs">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Audit Logs</h5>
                        <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                            <em class="icon ni ni-cross"></em>
                        </a>
                    </div>
                    <div class="modal-body modal-body-lg">
                        <div class="timeline">                                  
                            <ul id="orderLogs" class="timeline-list">                                            
                                {{-- <li class="timeline-item">
                                    <div class="timeline-status bg-primary is-outline"></div>
                                    <div class="timeline-date logDate">23 Nov 2020 <em class="icon ni ni-alarm-alt"></em></div>
                                    <div class="timeline-data">
                                        <div class="timeline-des">
                                            <p class="logText">Task created and assigned to Sonu Goyal</p>
                                            <span class="text-muted fs-10px">by <span class="logBy">SIPL ADMIN</span> at <span class="logTime">04:46 PM</span></span>
                                        </div>
                                    </div>
                                </li> --}}
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer bg-light">
                        <div class="row">
                            <div class="col-lg-12 p-0 text-right">
                                <button class="btn btn-outline-light" data-dismiss="modal" aria-label="Close">Close</button>
                            </div>
                        </div>
                    </div>            
                </div>
            </div>
        </div>

@endsection
@push('footerScripts')
<script src="{{url('js/tableFlow.js')}}"></script>
<script type="text/javascript">

    $(function() {

        var root_url = "