@extends('layouts.cmsApp')

@section('content')
@php
  $userRole = \Session::get('role');
  $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">Complaints</h3>
            <p>You have total <span class="record_count">{{ $complaintCount }}</span> complaints.</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="#modalFilterComplaint">
                                <div class="dot dot-primary"></div>
                                <em class="icon ni ni-filter-alt"></em>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="btn btn-sm btn-light export_data"
                                data-href="{{ url('cms/complaint/export') }}"><em
                                    class="icon ni ni-file-download"></em><span>Export</span></a>
                        </li>
                        <li>
                            <a href="{{ url('cms/complaint/import') }}" class="btn btn-sm btn-light import_data">
                                <em class="icon ni ni-file-upload"></em>
                                <span>Import</span>
                            </a>
                        </li>


                        <!-- <li>
                                <a href="#" class="btn btn-sm btn-light" data-toggle="modal" title="Bulk Upload" data-target="#modalBulkUpload"><em class="icon ni ni-file-plus"></em><span>Bulk Upload</span></a>
                            </li> -->
                        @if(isset($userPermission['create-compaint']))
                        <li>
                            <a href="{{url('/cms/complaint/create')}}" class="btn btn-sm  btn-primary"><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 ">
    <div class="d-flex flex-wrap g-1 pb-2">
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn all active" data-status="All">All</button></div>
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn" data-status="Assigned">Assigned</button></div>
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn" data-status="Re-Assigned">Re-Assigned</button></div>
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn" data-status="Acknowledged">Acknowledged</button></div>
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn" data-status="In progress">In progress</button></div>
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn" data-status="Completed">Completed</button></div>
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn" data-status="Closed">Closed</button></div>
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn" data-status="Re-Open">Re-Open</button></div>
        <div><button class="btn btn-sm btn-outline-primary status-filter-btn" data-status="Dropped">Dropped</button></div>
    </div>
    <!--  Filter Tag List -->
    <div id="filter_tag_list" class="filter-tag-list"></div>
    <!-- -->
    <div class="">
        <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">Complain Number</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Open Since</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Customer Organisation</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Custome Contact Person</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Dealer</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">Complaint Type</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Complaint Text</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Status</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Escalation Stage</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Created</span></th>
                    <th class="nk-tb-col tb-col-md"><span class="sub-text">Region</span></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr class="odd" id="no-data-message" style="display: none;"><td valign="top" colspan="11" class="dataTables_empty"><div><img width="300" src="http://127.0.0.1:8000/images/empty_item.svg"></div><h5>No records found.</h5></td></tr>
            </tfoot>
        </table>
    </div>
</div><!-- .nk-block -->
<!--  Modal: Complaint List Filter -->
<div class="modal fade zoom" tabindex="-1" id="modalFilterComplaint">
    <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">
                    <!-- <input id="status" type="hidden" name="status[]" class="form-control" /> -->
                    <div class="gy-3">
                        <div style="display: none;">
                        <div class="row g-3 align-center">
                            <div class="col-lg-5">
                                <x-inputs.verticalFormLabel label="Complaint Status" for="Status"
                                    suggestion="Specify the complaint status" />
                            </div>
                            <div class="col-lg-7">
                                <select id="status" name="status[]" class="form-select form-select-sm" multiple>
                                    <option disabled></option>
                                    <option value="Assigned">Assigned</option>
                                    <option value="Re-Assigned">Re-Assigned</option>
                                    <option value="Acknowledged">Acknowledged</option>
                                    <option value="In progress">In progress</option>
                                    <option value="Completed">Completed</option>
                                    <option value="Closed">Closed</option>
                                    <option value="Re-Open">Re-Open</option>
                                    <option value="Dropped">Dropped</option>
                                </select>
                            </div>
                        </div>
                        </div>
                        <div class="row g-3 align-center">
                            <div class="col-lg-5">
                                <x-inputs.verticalFormLabel label="Complaint Type" for="complaintType"
                                    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 Type" name="complaintType[]" id="complaintType"
                                    multiple>
                                    <option disabled></option>
                                    @foreach($complaintTypes as $type)
                                    <option value="{{$type->id}}">{{$type->category}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 align-center">
                            <div class="col-lg-5">
                                <x-inputs.verticalFormLabel label="Product" for="products"
                                    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="product" multiple>
                                    <option disabled></option>
                                    @foreach($products as $product)
                                    <option value="{{$product->id}}">{{$product->product_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 align-center">
                            <div class="col-lg-5">
                                <x-inputs.verticalFormLabel label="Segment" for="segment"
                                    suggestion="Specify the segment." />
                            </div>
                            <div class="col-lg-7">
                                <select class="form-select form-select-sm" data-search="off"
                                    data-placeholder="Select Segment" name="segment[]" id="segment" multiple>
                                    <option disabled></option>
                                    @foreach($segments as $segment)
                                    <option value="{{$segment->id}}">{{$segment->application_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 align-center">
                            <div class="col-lg-5">
                                <x-inputs.verticalFormLabel label="Region" for="region"
                                    suggestion="Specify the region." />
                            </div>
                            <div class="col-lg-7">
                                <select class="form-select form-select-sm" data-search="off"
                                    data-placeholder="Select Region" name="region[]" id="region" multiple>
                                    <option disabled></option>
                                    @foreach($regions as $region)
                                    <option value="{{$region->id}}">{{$region->region_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 align-center">
                            <div class="col-lg-5">
                                <x-inputs.verticalFormLabel label="Dealer" for="dealer"
                                    suggestion="Specify the dealer." />
                            </div>
                            <div class="col-lg-7">
                                <select class="form-select form-select-sm" data-search="off"
                                    data-placeholder="Select Dealer" name="dealer[]" id="dealer" multiple>
                                    <option disabled></option>
                                    @foreach($dealers as $dealer)
                                    <option value="{{$dealer->id}}">{{$dealer->service_center_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 align-center">
                            <div class="col-lg-5">
                                <x-inputs.verticalFormLabel label="Created at" for="createdAt"
                                    suggestion="Select the dates of created at." />
                            </div>
                            <div class="col-lg-7">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-control-wrap">
                                            <div class="form-icon form-icon-left">
                                                <em class="icon ni ni-calendar"></em>
                                            </div>
                                            <input type="text" class="form-control date-picker" placeholder="Form Date"
                                                data-date-format="yyyy-mm-dd" id="fromDate" name="fromDate">
                                        </div>
                                        <!-- <div class="form-note mt-0">Form Date</div> -->
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-control-wrap">
                                            <div class="form-icon form-icon-left">
                                                <em class="icon ni ni-calendar"></em>
                                            </div>
                                            <input type="text" class="form-control date-picker" placeholder="To Date"
                                                data-date-format="yyyy-mm-dd" id="toDate" name="toDate">
                                        </div>
                                        <!-- <div class="form-note mt-0">To Date</div> -->
                                    </div>
                                </div>
                            </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>
<!--  Modal: Bulk Upload -->
<div class="modal fade zoom" tabindex="-1" id="modalBulkUpload">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Upload</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" enctype="multipart/form-data"
                action="{{ url('cms/complaint/import-complaints') }}">
                @csrf
                <div class="modal-body modal-body-lg">
                    <div class="gy-3">
                        <div class="download-template-text">
                            Download the excel template from here <a href="{{ url('cms/complaint/template') }}"
                                class="btn btn-sm btn-light"><em class="icon ni ni-download"></em>
                                <span>Download</span></a>
                        </div>
                        <div class="row g-3 align-center">
                            <div class="col-lg-5">
                                <x-inputs.verticalFormLabel label="Choose File" for="bulkUploadFile"
                                    suggestion="Please select the file for bulk upload" />
                            </div>
                            <div class="col-lg-7">
                                <div class="form-control-wrap">
                                    <div class="custom-file">
                                        <input type="file" name="bulkUploadFile" multiple class="custom-file-input"
                                            id="bulkUploadFile" required>
                                        <label class="custom-file-label" for="bulkUploadFile">Choose file</label>
                                    </div>
                                </div>
                            </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-primary submitBtn" type="submit">Upload</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push('footerScripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="{{url('js/tableFlow.js')}}"></script>
<script type="text/javascript">
var root_url = "