@extends('layouts.master')

@section('title', __('tr.Requests') )
@section('subtitle', __('tr.Requests Management'))
@section('titleicon', "icon-documents")

@section('content')
   
    <!-- BEGIN .main-content -->
    <div class="main-content">
        <div class="row gutters">
            <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-body pb-0">
                        <div class="filter-box">
                            <div class="row">

                                <div class="col-md-2">
                                    <select class="form-control" id="search_unit_id" name="search_unit_id">
                                        <option value="">@lang('tr.Select Unit')</option>
                                        @foreach ($units as $unitID => $unitName)
                                            <option value="{{$unitID}}">{{$unitName}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                   <select class="form-control" id="search_service_id" name="search_service_id">
                                        <option value="">@lang('tr.Select Service')</option>
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    {!! Form::select('search_status', array(""=>__("tr.Select Status")) + \App\ConsultancyRequest::statusLabels(), null, array('class' => 'form-control', 'id'=> 'search_status', 'data-placement'=>'top', 'title'=> __('tr.Status'))); !!}

                                 </div>

                                <div class="col-md-2">
                                    <input type="text" placeholder="@lang('tr.TextSearch')" id="text_search">
                                </div>
                                <div class="col-md-2 float">
                                    <button class="btn btn-primary" type="button"
                                            id="search_button">@lang('tr.Search')</button>
                                </div>
                                {{--Button--}}
                                <div class="col-md-2 float">
                                    <button class="btn btn-danger" type="button"
                                            id="reset_button">@lang('tr.Reset')</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                        <div class="card-body">
                            <table id="requests_table" class="display" style="width:100%">
                                <thead>
                                <tr>
                                    <th width="5%">@lang('tr.#')</th>
                                    <th width="15%">@lang('tr.Unit')</th>
                                    <th width="10%">@lang('tr.Service')</th>
                                    <th width="20%">@lang('tr.Client Information')</th>
                                    <th width="10%">@lang('tr.Description')</th>
                                    <th width="10%">@lang('tr.QR Code')</th>
                                    <th width="15%">@lang('tr.Service Date')</th>
                                    <th width="10%">@lang('tr.Status')</th>
                                    <th width="5%"></th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Row end -->
    </div>
    <!-- END: .main-content -->

    <script type="text/javascript">

        $(document).ready(function () {
            let jobsTypes = [];

            let statusLabels = [];
            let statusBadges = [];

            @foreach(\App\ConsultancyRequest::statusLabels() as $key => $value)
                statusLabels[{{$key}}] = "{{$value}}"
            @endforeach

            @foreach(\App\ConsultancyRequest::statusBadges() as $key => $value)
                statusBadges[{{$key}}] = "{{$value}}"
            @endforeach

            var showUrl = '{{ route('consultancy_request_show', ['consultancyRequest'=>'#id']) }}';
            var getServices = '{{ route('consultancy_get_services', ['unit'=>'#id']) }}';

            var table = $('#requests_table').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                stateSave: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('consultancy_requests') }}',
                    "dataSrc": "data.data"
                },
                "columns": [
                    {"data": "id", "name": "id"},
                    {"data": "unit_name", "name": "unit_name"},
                    {"data": "service_name", "name": "service_name"},
                    {
                        "data": "amount", "name": "amount",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";
                            if(oData.client_name)
                                html += "<span class='badge-course'>Client Name: </span><small>" + oData.client_name + "</small><br>"
                            if(oData.auditor_name)
                                html += "<span class='badge-course'>Auditor Name: </span><small>" + oData.auditor_name + "</small><br>"
                            if(oData.amount)
                                html += "<span class='badge-course'>Amount: </span><small>" + oData.amount + "</small>"
                            
                            $(nTd).html(html);
                        }
                    },
                    {"data": "description", "name": "description"},
                    {"data": "qr_code", "name": "qr_code"},
                    {"data": "service_date", "name": "service_date"},
                    
                    {
                        "data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";
                            html += "<span class='badge badge-"+statusBadges[oData.status]+"'>" + statusLabels[oData.status]  + "</span>"

                            $(nTd).html(html);
                        }
                    },
                    {
                        "data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";
                            
                            html += "<a title='@lang('tr.View Request')'  href='"+showUrl.replace('#id',oData.id)+"' target='_blank'><i class='icon-eye'></i></a>&nbsp;";

                            $(nTd).html("<span class='action-column'>" + html + "</span>");
                        }
                    },
                ]
            });

            $(".dataTables_filter").hide();

            $('#search_button').on('click', function () {
                table.search($("#text_search").val());
                table.columns(0).search($("#search_unit_id").val());
                table.columns(1).search($("#search_service_id").val());
                table.columns(2).search($("#search_status").val());
                table.columns(3).search($("#search_client_id").val());
                table.columns(4).search($("#search_auditor_id").val());
                table.draw();
            });

            $('#text_search').keyup(function (e) {
                if (e.keyCode == 13)
                    $('#search_button').trigger('click');
            });

            $('#reset_button').on('click', function () {
                $("#text_search").val("");
                $("#search_unit_id").val("");
                $("#search_service_id").val("");
                $("#search_client_id").val("");
                $("#search_auditor_id").val("");
                $("#search_status").val("");

                $('#search_button').trigger('click');
            });

            $(document).on('change','#search_unit_id',function(){

                if($(this).val()) {
                    url = getServices.replace('#id',$(this).val())

                    $('#search_service_id').find('option').remove();
                    $('#search_service_id').append($('<option>', {value:'', text:'@lang('tr.Select Service')'}));

                    $('#search_client_id').find('option').remove();
                    $('#search_client_id').append($('<option>', {value:'', text:'@lang('tr.Select Client')'}));

                    $('#search_auditor_id').find('option').remove();
                    $('#search_auditor_id').append($('<option>', {value:'', text:'@lang('tr.Select Auditor')'}));

                    $.ajax({
                        type: 'get', 
                        url: url,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (data) {
                            
                            if(data.services) {

                                for (const [key, value] of Object.entries(data.services)) {
                                    var option = $('<option></option>');
                                    option.attr('value', key).text(value);
                                    $('#search_service_id').append(option);
                                }
                            }
                           
                            if(data.clients) {

                                for (const [key, value] of Object.entries(data.clients)) {
                                    var option = $('<option></option>');
                                    option.attr('value', key).text(value);
                                    $('#search_client_id').append(option);
                                }
                                for (const [key, value] of Object.entries(data.clients)) {
                                    var option = $('<option></option>');
                                    option.attr('value', key).text(value);
                                    $('#search_auditor_id').append(option);
                                }
                            }
                       
                        }, error:function(response){ 
                            showRepsonseErrors(response);
                        }
                    });
                }
              
            })

            $('#search_button').trigger('click');

        });
    </script>
@stop