{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Service Report List')

{{-- vendor styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/flag-icon/css/flag-icon.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css"href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/select.dataTables.min.css')}}">
@endsection

{{-- page style --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/data-tables.css')}}">
@endsection


@section('content')
<section class="users-list-wrapper section">
    <div class="users-list-table">
      	<div class="card">
			<div class="row pl-1 pr-1 col s12">
				<h5 class="col s8"><b>Service Reports</b></h5>
				<div class="input-field col s4">
					<form action="{{ route('admin.replacement-tools.index') }}" method="get" id="report-search-form">
						<input class="search-keyword" type="text" name="keyword" id="keyword" value="{{ request('keyword') ?? '' }}" placeholder="Search...">
						<i class="material-icons prefix custom-search-icon">search</i>
					</form>
					<a class="modal-trigger" href="#modal1">
						<i class="material-icons prefix custom-filter-icon">filter_list</i>
					</a>
				</div>
			</div>
			<div class="card-content">
				<!-- datatable start -->
				<div class="responsive-table">
					<div class="center">
						{{$replacement_tools->withQueryString()->links()}}
					</div>
					<table id="data-table-request" class="table responsive-table striped">
						<thead class="grey lighten-2">
							<tr>
							<th></th>
							<th id="order_id">#</th>
							<th>Customer Name</th>
							<th>ASC Name</th>
							<th id="battery_type">Battery Type</th>
							<th id="model">Model</th>
							<th id="status">Status</th>
							<th id="walk_in">Is Walk In</th>
							<th id="created_at">Created</th>
							<th id="view"></th>
							{{-- <th>Delete</th> --}}
							</tr>
						</thead>
						<tbody id="append-data">
							@forelse ($replacement_tools as $key => $replacement_tool)
							<tr>
								<td></td>
								<td class="order-no">{{$key + $replacement_tools->firstItem()}}</td>
								<td>
									@if ($replacement_tool->customer && $replacement_tool->customer->name)
                                        <a href="{{ route('admin.customer.show.tab', [$replacement_tool->customer->id, 'active-order']) }}">{{ $replacement_tool->customer->name }}</a>
                                    @else
                                        -
                                    @endif
								</td>
								<td>
									@if ($replacement_tool->merchant && $replacement_tool->merchant->name)
                                        <a href="{{ route('admin.merchant.show.tab', [$replacement_tool->merchant->id, 'merchant-order']) }}">{{ $replacement_tool->merchant->name }}</a>
                                    @else
                                        -
                                    @endif
								</td>
								<td>{{$replacement_tool->product->category->name ?? '-'}}</td>
								<td>{{$replacement_tool->product->model ?? '-'}}</td>
								<td>
									<span class="chip
										{{
											$replacement_tool->status == 'pending' ?
											'orange' :
											(
												$replacement_tool->status == 'fail' || $replacement_tool->status == 'reject' ?
												'red' : 'green'
											)
										}}
									lighten-4">
										<span class="{{
											$replacement_tool->status == 'pending' ?
											'orange-text' :
											(
												$replacement_tool->status == 'fail' || $replacement_tool->status == 'reject' ?
												'red-text' : 'green-text'
											)
										}}">{{ $replacement_tool->status }}</span>
									</span>
								</td>
								<td>{{ $replacement_tool->service->is_walk_in == 1 ? 'Yes' : 'No' }}</td>
								<td>{{ $replacement_tool->created_time }}</td>
								<td>
									<div class="right">
										<i class="material-icons left pt-4">
											<a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.replacement-tools.show', $replacement_tool) }}" style="padding: 6px 10px;">remove_red_eye</a>
										</i>
									</div>
								</td>
								{{-- <td>
									<form action="{{ route('admin.replacement-tools.destroy', $replacement_tool->id) }}" method="POST" onsubmit="return confirm('Are You Sure?');" style="display: inline-block;">
										<input type="hidden" name="_method" value="DELETE">
										<input type="hidden" name="_token" value="{{ csrf_token() }}">
										<button class="btn waves-effect waves-light red darken-2" type="submit" name="action">Delete</button>
									</form>
								</td> --}}
							</tr>
							@empty
							<tr>
								<td colspan="9">No Data Found!</td>
							</tr>
							@endforelse
						</tbody>
					</table>
					<div class="center">
						{{$replacement_tools->withQueryString()->links()}}
                    </div>
                    <input type="hidden" name="latest_date" id="latest_date" value="{{ $latest_date }}">
				</div>
			<!-- datatable ends -->
			</div>
			<div id="modal1" class="modal big-size-modal modal-fixed-header">
				<form action="{{ route('admin.replacement-tools.index') }}" method="get">
                    <div class="modal-filter-header mb-3 modal-header pt-1">
                        <div class="col s8 custom-d-flex">
                            <h6 class="m-0 pr-2 custom-border-right"><b>Service Report Filter</b></h6>
                            <a href="#" class="pl-2 clear-filter" id="clearFilter">Clear Filter</a>
                        </div>
                        <div class="col s4">
                            <a href="javascript:void(0)" class="right modal-close">
                                <i class="material-icons prefix custom-close-icon">close</i>
                            </a>
                            <button class="right btn waves-effect waves-light red border-radius-10 mr-4" type="submit">Filter</button>
                        </div>
                    </div>
					<div class="modal-content modal-content-bg">
						<div class="modal-filter-body ">
							<div class="col s2 mb-3 custom-border-right">
								<h6 class="mb-5 mt-0"><b>Battery Type</b></h6>
								@forelse ($categories as $category)
									<div class="row">
										<div onclick="checkFilter({{ $category->id }}, 'category')" id="filter-box-category-{{ $category->id }}" class="filter-box mb-3 @if(request('categor_ids') && in_array($category->id, request('categor_ids'))) box-checked @endif">{{ $category->name }}</div>
										<input type="checkbox" value="{{ $category->id }}" name="categor_ids[]" id="filter-check-category-{{ $category->id }}" class="filter-check" @if(request('categor_ids') && in_array($category->id, request('categor_ids'))) checked="checked" @endif>
									</div>
								@empty

								@endforelse
							</div>
							<div class="col s5 mb-3 custom-border-right">
								<h6 class="mb-5 mt-0"><b>Model</b></h6>
								<div class="model-flex">
									@forelse ($products as $product)
										<div class="pl-1">
											<div onclick="checkFilter({{ $product->id }}, 'product')" id="filter-box-product-{{ $product->id }}" class="filter-box mb-3 @if(request('product_ids') && in_array($product->id, request('product_ids'))) box-checked @endif">{{ $product->model }}</div>
											<input type="checkbox" value="{{ $product->id }}" name="product_ids[]" id="filter-check-product-{{ $product->id }}" class="filter-check" @if(request('product_ids') && in_array($product->id, request('product_ids'))) checked="checked" @endif>
										</div>
									@empty

									@endforelse
								</div>
							</div>
							<div class="col s2 mb-3 custom-border-right">
								<h6 class="mb-5 mt-0"><b>Status</b></h6>

								<div onclick="checkFilter(1, 'status')" id="filter-box-status-1" class="filter-box mb-3 @if(request('status') && in_array("pending", request('status'))) box-checked @endif">Pending</div>
								<input type="checkbox" value="pending" name="status[]" id="filter-check-status-1" class="filter-check"  @if(request('status') && in_array("pending", request('status'))) checked="checked" @endif>

								<div onclick="checkFilter(2, 'status')" id="filter-box-status-2" class="filter-box mb-3 @if(request('status') && in_array("fail", request('status'))) box-checked @endif">Fail</div>
								<input type="checkbox" value="fail" name="status[]" id="filter-check-status-2" class="filter-check" @if(request('status') && in_array("fail", request('status'))) checked="checked" @endif>

								<div onclick="checkFilter(3, 'status')" id="filter-box-status-3" class="filter-box mb-3 @if(request('status') && in_array("reject", request('status'))) box-checked @endif">Reject</div>
								<input type="checkbox" value="reject" name="status[]" id="filter-check-status-3" class="filter-check" @if(request('status') && in_array("reject", request('status'))) checked="checked" @endif>

								<div onclick="checkFilter(4, 'status')" id="filter-box-status-4" class="filter-box mb-3 @if(request('status') && in_array("pass", request('status'))) box-checked @endif">Pass</div>
								<input type="checkbox" value="pass" name="status[]" id="filter-check-status-4" class="filter-check" @if(request('status') && in_array("pass", request('status'))) checked="checked" @endif>

							</div>
							<div class="col s3 mb-3">
								<h6><b>Created</b></h6>
								<div class="filter-box custom-d-flex custom-created pt-0 pb-0 pl-2 pr-2">
									<input type="date" style="date" name="created_time" placeholder="Choose Date" class="date-filter mb-0" value="{{ request('created_time') ? request('created_time') : '' }}">
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
      	</div>
    </div>
  </section>
@endsection
{{-- vendor scripts --}}
@section('vendor-script')
<script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/js/dataTables.select.min.js')}}"></script>
@endsection

{{-- page script --}}
@section('page-script')
<script src="{{asset('js/scripts/data-tables.js')}}"></script>
<script>
	$(document).ready(function() {
		$('.modal').modal();

		$('#keyword').on('change', function() {
			$('#report-search-form').submit();
		});
	});

	function checkFilter(id, type) {
		var filter_box = "#filter-box-" + type + '-' + id;
		var filter_check = "#filter-check-" + type + '-' + id;

		if ($(filter_box).hasClass("box-checked")) {
			$(filter_box).removeClass("box-checked");
			$(filter_check).removeAttr('checked');
		} else {
			$(filter_box).addClass("box-checked");
			$(filter_check).attr('checked', 'checked');
		}
	}

	$('#clearFilter').on('click', function() {
		$('.filter-box').removeClass('box-checked');
		$('.filter-check').removeAttr('checked');
		$('.date-filter').val('');
	});

      $('#data-table-request').DataTable( {
        "paging":   false,
        "bFilter": false,
        // "info":     false
        "columnDefs": [
          {
            "orderable": false, "targets": 0
          },
          {
            "orderable": false, "targets": 1
          },

          {
            "orderable": false, "targets": 4
          },
          {
            "orderable": false, "targets": 5
          },
          {
            "orderable": false, "targets": 6
          },
          {
            "orderable": false, "targets": 7
          },
          {
            "orderable": false, "targets": 8
          },
          {
            "orderable": false, "targets": 9
          }
      ],
      "order": [],
    });

    $(document).ready(function() {
        setInterval(getLatestData, 10000);
        function getLatestData() {
            var latest_date = $('#latest_date').val();
            var key_di = $('#key').val();

            $.ajax({
                type:"GET",
                url:`{{ route('admin.latest.report.data') }}?date=${latest_date}`,
                success:function(res){
                    if(res){
                        console.log(res.data);

                        $.each(res.data, function(key,value){
                            $('#latest_date').val(value.created_at);

                            row = $(`<tr class="red lighten-5"></tr>`)
                            col0 =$(`<td></td>`)
                            col1 = $(`<td class="order-no">${value.id}</td>`)
                            col2 = $(`<td>${value.customer && value.customer.name ? value.customer.name : '-'}</td>`)
                            col3 = $(`<td>${value.merchant && value.merchant.name ? value.merchant.name : '-'}</td>`)
                            col22 = $(`<td>${value.product.category && value.product.category.name ? value.product.category.name  : '-'}</td>`)
                            col5 = $(`<td>${value.product && value.product.model ? value.product.model : '-'}</td>`)
                            col6 = $(`<td>${value.service.is_walk_in ? 'Yes' : 'No'}</td>`)
                            col7 = $(`
                            <td width="20%">
                                    <span class="chip
                                        ${value.status == 'pending' ?
                                        'orange' : (
                                        value.status == 'reject' ?
                                        'red' : 'purple')}
                                    lighten-4">
                                    <span class="
                                        ${value.status == 'pending' ?
                                        'orange-text' : (
                                        value.status == 'reject'  ?
                                        'red-text' : 'purple')}">
                                        ${ value.status }</span>
                                </span>
                        </td>
                            `)
                            col9 = $(`<td width="5%">
                                        <div class="right">
                                            <i class="material-icons left pt-4">
                                                <a class="blue lighten-4 border-radius-button z-depth-1" href=/admin/service-requests/${value.id}" style="padding: 6px 10px;">remove_red_eye</a>
                                            </i>
                                        </div>
                                    </td>`)
                            col8 = $(`<td>${ value.created_time }</td>`)

                            row.append(col0,col1, col2, col3, col22, col5, col7, col6, col8, col9).prependTo("#append-data");
                        });

                        if(res.data.length > 0){
                            $('.order-no').each(function(key, item){
                                $(item).html(key+1);
                            });

                            $('table > tbody > tr').each(function(row, tr) {
                                if(row >= 10)
                                {
                                    $(tr).remove();

                                }
                            });
                        }
                    }
                }
            });
        }
    });

</script>
@endsection