@extends('incharge.layout.page-app')
@section('page_title', __('label.requests'))
@section('tab_title', __('label.requests'))

@section('content')
    @include('incharge.layout.sidebar')

    <!-- Select2 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />

    <div class="right-content">
        @include('incharge.layout.header')

        <div class="body-content">
            <!-- mobile title -->
            <h1 class="page-title-sm">{{__('label.requests')}}</h1>

            <div class="border-bottom row mb-3">
                <div class="col-sm-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('incharge.dashboard') }}">{{__('label.dashboard')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{__('label.requests')}}</li>
                    </ol>
                </div>
            </div>

            <!-- Search -->
            <div class="page-search">
                <div class="sorting" >
                    <h6 class="mt-2" style="width: 150px;">{{__('label.start_date')}}:</h6>
                    <input type="date" name="input_start_date" id="input_start_date" class="form-control">
                </div>
                <div class="sorting ml-3">
                    <h6 class="ml-2 mt-2" style="width: 150px;">{{__('label.end_date')}}:</h6>
                    <input type="date" name="input_end_date" id="input_end_date" class="form-control">
                </div>
                <div class="sorting ml-3" style="width: 30%;">
                    <h6 class="mr-2 mt-2" style="width: 70px;">{{__('label.sort_by')}}</h6>
                    <select class="form-control" name="input_service" id="input_service">
                        <option value="all">{{__('label.all_service')}}</option>
                        @foreach ($service as $key => $value)
                            <option value="{{$value->id}}">
                                {{ $value->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <ul class="ml-1 nav nav-pills custom-tabs inline-tabs" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-status="all" href="#" role="tab" aria-selected="true">{{__('label.all')}}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-status="1" href="#" role="tab" aria-selected="false">{{__('label.open')}}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-status="2" href="#" role="tab" aria-selected="false">{{__('label.in_progress')}}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-status="3" href="#" role="tab" aria-selected="false">{{__('label.archived')}}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-status="4" href="#" role="tab" aria-selected="false">{{__('label.completed')}}</a>
                </li>
            </ul>

            <div class="table-responsive">
                <table class="table table-striped text-center table-bordered" id="datatable">
                    <thead>
                        <tr style="background: #F9FAFF;">
                            <th>{{__('label.#')}}</th>
                            <th>{{__('label.citizen')}}</th>
                            <th>{{__('label.sub_in_charge')}}</th>
                            <th>{{__('label.service')}}</th>  
                            <th>{{__('label.request_info')}}</th>  
                            <th>{{__('label.requested_on')}}</th>               
                            <th>{{__('label.status')}}</th>
                            <th>{{__('label.action')}}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('pagescript')
    <!-- Select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <script>
        // Sidebar Scroll Down
        sidebar_down(480);

        $("#input_service").select2();
        $("#input_user").select2();

        $(document).ready(function() {
            var table = $('#datatable').DataTable({
                ...dataTableDefaults,
                ajax: {
                    url: "{{ route('incomplaint.index') }}",
                    data: function(d) {
                        d.input_service = $('#input_service').val();
                        d.input_status = $('.nav-link.active').data('status');
                        d.input_start_date = $('#input_start_date').val(); 
                        d.input_end_date = $('#input_end_date').val();
                    },
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {
                        data: 'user',
                        name: 'user',
                        render: function(data) {
                            return data ? data.full_name : "-";
                        }
                    },
                    {
                        data: 'sub_in_charge',
                        name: 'sub_in_charge',
                        render: function(data) {
                            return data ? data.full_name : "-";
                        }
                    },
                    {
                        data: 'service',
                        name: 'service',
                        render: function(data) {
                            return data ? data.name : "-";
                        }
                    },
                    {
                        data: 'complaint_info',
                        name: 'complaint_info',
                        render: function(data) {
                            return data ? data : "-";
                        }
                    },
                    {
                        data: 'start_date',
                        name: 'start_date',
                    },
                    {
                        data: 'status',
                        name: 'status',
                        render: function(data) {
                            if (data == 1) {
                                return "<h5 class='text-danger'><strong>{{__('label.open')}}</strong></h5>";
                            } else if (data == 2) {
                                return "<h5 class='text-warning'><strong>{{__('label.in_progress')}}</strong></h5>";
                            } else if (data == 3) {
                                return "<h5 class='text-muted'><strong>{{__('label.archived')}}</strong></h5>";
                            } else if (data == 4) {
                                return "<h5 class='text-success'><strong>{{__('label.completed')}}</strong></h5>";
                            }
                        }
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
            });
            
            $('#input_service, #input_start_date, #input_end_date').change(function() {
                table.draw();
            });

            $('.nav-link').on('click', function(e) {
                e.preventDefault();
                $('.nav-link').removeClass('active');
                $(this).addClass('active');
                table.draw();
            });
        });
    </script>
@endsection