@extends('layouts.admin')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/styles/apps/file-manager.css')}}">
@endsection

@section('content')
    <div class="ks-column ks-page">
        <div class="ks-page-header">
            <section class="ks-title">
                <h3>{{$pageTitle}}</h3>
            </section>
        </div>
        <div class="ks-page-content">
            <div class="ks-page-content-body ks-content-nav ks-user-list-view">
                <div class="ks-nav-body">
                    <form action="" method="post" id="searchForm">
                        {{csrf_field()}}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label for="default-input-rounded" class="col-sm-4 form-control-label">Assistance Type *</label>
                                    <div class="col-sm-8">
                                        <select class="form-control ks-select" name="record[assistance_type_id]" id="assistance_type_assistance" data-lang="{{$locale}}" required>
                                            <option></option>
                                            @foreach($assistance_types as $assistance_type)
                                                <option value="{{$assistance_type->id}}" @if(isset($assistance_task) && ($assistance_type->id == $assistance_task->assignee->assistance->assistance_type_id )) selected @endif data-url="{{route('search-assistances.drop-list',['assistance_type_id'=>$assistance_type->id])}}" >{{lang($assistance_type->title)}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label for="default-input-rounded" class="col-sm-4 form-control-label">Assistance Type *</label>
                                    <div class="col-sm-8">
                                        <select class="form-control ks-select" name="record[assistance_type_id]" id="assistance_type_assistance" data-lang="{{$locale}}" required>
                                            <option></option>
                                            @foreach($assistance_types as $assistance_type)
                                                <option value="{{$assistance_type->id}}" @if(isset($assistance_task) && ($assistance_type->id == $assistance_task->assignee->assistance->assistance_type_id )) selected @endif data-url="{{route('search-assistances.drop-list',['assistance_type_id'=>$assistance_type->id])}}" >{{lang($assistance_type->title)}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label for="default-input-rounded" class="col-sm-4 form-control-label">Assistance</label>
                                    <div class="col-sm-8">
                                        <select class="form-control ks-select" name="record[assistance_id]" id="assistance" data-lang="{{$locale}}" data-url="{{route('search-assistance-tasks.drop-list')}}" @isset($assistance_task)  data-selected="{{$assistance_task->assignee->assistance->id}}" @endisset required>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group row">
                                    <label for="default-input-rounded" class="col-sm-4 form-control-label">Assistance Task</label>
                                    <div class="col-sm-8">
                                        <select class="form-control ks-select" name="record[assistance_task_id]" id="assistance_task_id" data-url="{{route('gallery-assistance.display-tasks')}}" data-lang="{{$locale}}" @isset($assistance_task) data-selected="{{$assistance_task->id}}" @endisset required>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group row">
                                    <a class="la la-search" href="#" onclick="getData(1)" style="font-size: 30px"></a>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </form>
                    <div class="row" id="button-delete" style="display: none">
                        <div class="col-md-2 offset-md-10">
                            <button class="btn btn-danger width-100" id="delete-photos" data-url="{{route('gallery-assistance-task.photos-delete')}}">Delete</button>
                        </div>
                    </div>
                    <div id="attachments">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="{{asset('assets/scripts/search.js')}}"></script>

    <script>
		function getData(page) {
			if ($('#searchForm').valid()) {
				var selected = $('select#assistance_task_id').find('option:selected');
				var url = selected.data('url');
				var token = $('input[name=_token]').val();
				$.ajax({
					type: 'get',
					url: url + '?page=' + page,
					method: 'get',
					headers: {
						"X-CSRF-TOKEN": token,
						"Cache-Control": "no-cache"
					},
					success: function (data) {
						$('#attachments').html(data);
						$('#button-delete').show();
					}
				});
			}
		}

		$(document).on('click', '.pagination a',function(event)
		{
			event.preventDefault();

			$('li').removeClass('active');
			$(this).parent('li').addClass('active');

			var myurl = $(this).attr('href');
			var page=$(this).attr('href').split('page=')[1];
			getData(page);
		});


		$('#delete-photos').on('click', function () {
			var ids = [];
			var len = $('input:checkbox:checked').length;

			if (len) {
				$('input:checkbox:checked').each(function () {
					ids.push($(this).attr("id"));
					$(this).parent().closest('li').hide();
				});
			}
			var token = $('input[name=_token]').val();
			$.ajax({
				type: 'post',
				url:$(this).data('url'),
				method: 'post',
				data: {'ids': ids},
				headers: {
					"X-CSRF-TOKEN": token,
					"Cache-Control": "no-cache"
				},
				success: function (data) {
				}
			});
		});
    </script>

    <script>
		$(document).ready(function() {
			$('select#assistance_type_assistance').select2({
				placeholder: "Select a value",
				allowClear: true
			}).trigger('change');
		});
    </script>

@endsection