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

{{-- Page title --}}
@section('title', 'Customer Lists')
{{-- 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('Customer', 'Role')

@section('content')
<section class="users-list-wrapper section">
    <div class="users-list-table">
        <div class="card">
            <div class="row col s12">
                <h5 class="col s8"><b>Customer</b></h5>
                <div class="input-field col s4">
                    <form action="{{ route('admin.customer.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">
                        {{$customers->withQueryString()->links()}}
                    </div>
                    <table id="data-table-reqeust" class="table responsive-table striped">
                        <thead class="grey lighten-2">
                            <tr>
                                <th>#</th>
                                <th>Customer Name</th>
                                <th>Profile Photo</th>
                                <th>Phone Number</th>
                                <th>City</th>
                                <th>Township</th>
                                <th>Address</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($customers as $key => $customer)
                            <tr>
                                <td>{{$key + $customers->firstItem()}}</td>
                                <td width="15%">{{$customer->name}}</td>
                                <td width="10%">
                                    @if ($customer->image)
                                        <img class="circle" src="{{ url($customer->image) }}" alt="" width="70" height="70">
                                    @else
                                        <img class="circle" src="{{ asset('images/profile.png') }}" alt="" width="70" height="70">
                                    @endif
                                </td>
                                <td width="15%">{{$customer->phone_number}}</td>
                                <td>{{$customer->CustomerAddress->city->name ?? '-' }}</td>
                                <td>{{$customer->CustomerAddress->township->name ?? '-'}}</td>
                                <td>{{$customer->CustomerAddress->address ?? '-'}}</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.customer.show.tab', [$customer->id, 'active-order']) }}" style="padding: 6px 10px;">remove_red_eye</a>
                                        </i>
                                    </div>
                                </td>
                            </tr>
                            @empty
                                <h3>No customer Found</h3>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="center">
                        {{$customers->withQueryString()->links()}}
                    </div>
                </div>
                <!-- datatable ends -->
            </div>
        </div>

        <div id="modal1" class="modal big-size-modal modal-fixed-header">
            <form action="{{ route('admin.customer.index') }}" method="get">
                <div class="modal-filter-header modal-header pt-1">
                    <div class="row">
                        <div class="col s8 custom-d-flex">
                            <h6 class="m-0 pr-2 custom-border-right"><b>Customer 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>
                <div class="modal-content modal-content-bg">
                    <div class="modal-filter-body row ml-0 mr-0 pl-2 pr-2 pt-2 pb-2">
                        <div class="col s3 mb-3 custom-border-right">
                            <h5 class="mb-5 mt-0"><b>City</b></h5>
                            <div>
                                @forelse ($cities as $city)
                                    <div onclick="checkFilter({{ $city->id }}, 'city')" id="filter-box-city-{{ $city->id }}" class="filter-box mb-3 @if(request('city_ids') && in_array($city->id, request('city_ids'))) box-checked @endif">{{ $city->name }}</div>
                                    <input type="checkbox" value="{{ $city->id }}" name="city_ids[]" id="filter-check-city-{{ $city->id }}" class="filter-check" @if(request('city_ids') && in_array($city->id, request('city_ids'))) checked="checked" @endif>
                                @empty
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </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();
	});

	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-reqeust').DataTable( {
        "paging":   false,
        "bFilter": false,
        // "info":     false
        "columnDefs": [
        {
        "orderable": false, "targets": 0
        },
        {
        "orderable": false, "targets": 1
        },
        {
        "orderable": false, "targets": 3
        },
        {
        "orderable": false, "targets": 4
        },
        {
        "orderable": false, "targets": 7
        },
        {
        "orderable": false, "targets": 8
        },
        ],
        "order": [],
    });
</script>
@endsection