@extends('layouts.app')

@section('content')
<style>
	button{
		margin-top: 25px; 
	}
</style>
<div class="box">
	<div class="box-header">
		<h3 class="box-title">Advertisement</h3>
	</div>
	<form   class="box-body" id="admaster_search-form">
		<div class="row">

			<div class="form-group col-xs-3" data-select2-id="ser_pro">
				<div class="form-group">
					<label>Service/Product Type</label>
					<select class="form-control select2 ser_proname" style="width: 100%;" id="ser_proname" name="ser_proname">
						<option selected="selected" value="">Please Select</option>
						@foreach ($data['product'] as $product)
						<option value="{{$product['id']}}">{{$product['value']}}</option>
						@endforeach
					</select>
				</div>
			</div>

			<div class="form-group col-xs-3" data-select2-id="advrttyp">
				<div class="form-group">
					<label>Advertisement Type</label>
					<select class="form-control select2 advrt_type" style="width: 100%;" id="advrt_type" name="advrt_type">
						<option selected="selected" value="">Any</option>
						@foreach ($data['adtype'] as $adtype)
						<option value="{{$adtype['id']}}">{{$adtype['value']}}</option>
						@endforeach
					</select>
				</div>
			</div>

			<div class="form-group col-xs-3">
				<label>Created from</label>
				<div class="input-group date">
					<div class="input-group-addon">
						<i class="fa fa-calendar"></i>
					</div>
					<input type="text" class="form-control pull-right created_from_date datepicker" id="created_from_date" name="created_from_date">
				</div>
			</div>
			
			<div class="form-group col-xs-3">
				<label>Created to</label>
				<div class="input-group date">
					<div class="input-group-addon">
						<i class="fa fa-calendar"></i>
					</div>
					<input type="text" class="form-control pull-right created_to_date datepicker" id="created_to_date"  name="created_to_date">
				</div>
			</div>
		</div>
		<div class="row">

			<div class="form-group col-xs-3">
				<label>Expires from</label>
				<div class="input-group date">
					<div class="input-group-addon">
						<i class="fa fa-calendar"></i>
					</div>
					<input type="text" class="form-control pull-right expire_from_date datepicker" id="expire_from_date" name="expire_from_date">
				</div>
			</div>

			<div class="form-group col-xs-3">
				<label>Expires to</label>
				<div class="input-group date">
					<div class="input-group-addon">
						<i class="fa fa-calendar"></i>
					</div>
					<input type="text" class="form-control pull-right expire_to_date datepicker" id="expire_to_date"  name="expire_to_date">
				</div>
			</div>
			<div class="form-group col-xs-3" data-select2-id="prov">
				<div class="form-group">
					<label>Province</label>
					<select class="form-control select2 proname" style="width: 100%;" id="proname" name="proname">
						<option selected="selected" value="">Please Select</option>
						@foreach ($data['province'] as $provin)
						<option value="{{$provin['id']}}">{{$provin['value']}}</option>
						@endforeach
					</select>
				</div>
			</div>

			<div class="form-group col-xs-3" data-select2-id="dist">
				<div class="form-group">
					<label>District</label>
					<select class="form-control select2 distname" style="width: 100%;" id="distname" name="distname">
						<option selected="selected" value="">Please Select</option>
						@foreach ($data['distric'] as $dist)
						<option value="{{$dist['id']}}">{{$dist['value']}}</option>
						@endforeach
					</select>
				</div>
			</div>
		</div>
		<div class="row">

			<div class="form-group col-xs-3" data-select2-id="ownr_id">
				<div class="form-group">
					<label>Owner</label>
					<select class="form-control select2 ownr_id" style="width: 100%;" id="ownr_id" name="ownr_id">
						<option selected="selected" value="">Please Select</option>
						@foreach ($data['regusr'] as $regusr)
						<option value="{{$regusr['id']}}">{{$regusr['value']}}</option>
						@endforeach
					</select>
				</div>
			</div>

			<div class="form-group col-xs-3" data-select2-id="active_stat">
				<div class="form-group">
					<label>Status</label>
					<select class="form-control select2 active_stat" style="width: 100%;" id="active_stat" name="active_stat">
						<option selected="selected" value="">All</option>
						<option value="ACT">Active</option>
						<option value="EXP">Expired</option>
						<option value="DISC">Discontinued</option>
					</select>
				</div>
			</div>

			
			<div class="form-group col-xs-3" data-select2-id="apprv_stat">
				<div class="form-group">
					<label>Approval status</label>
					<select class="form-control select2 apprv_stat" style="width: 100%;" id="apprv_stat" name="apprv_stat">
						<option value="">Any</option>
						<option selected="selected" value="P">Pending</option>
						<option value="A">Accepted</option>
						<option value="R">Rejected</option>
					</select>
				</div>
			</div>

		</div>
		<div class="row">
			<div class="form-group col-xs-2 pull-right">
				<button type="button" class="btn btn-block btn-social btn-dropbox" id="search_admaster">
					<i class="fa fa-search"></i> Search
				</button>
			</div>
			<div class="form-group col-xs-2">
				<button type="button" class="btn btn-light reset_btn">Reset</button>
			</div>

		</div>
	</form>
</div>

<div id="result_content"></div>
@endsection

@push('scripts')
<script type="text/javascript">


	jQuery(document).ready(function($) {

		$('.datepicker').datepicker()

		var date = new Date();
		$('.created_to_date').datepicker( "setDate", date);
		date.setMonth(date.getMonth() - 1);
		$('.created_from_date').datepicker( "setDate", date);

		$('#admaster_search-form').sayt({'recover': true});
		load_all_admaster();
		
		$('#search_admaster').click(function() {
			$('#admaster_search-form').sayt({'savenow': true});
			load_all_admaster();
		});

		$('#admaster_search-form .reset_btn').click(function () {
			
            $('#admaster_search-form').sayt({'erase': true});
			location.reload();
		});


	})

	function load_all_admaster(){
		var ajax_url = "{{ route("adverts_search") }}";
		form_data = $("#admaster_search-form").find(":input").serializeArray();
		$.ajax({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			url: ajax_url,
			type: 'POST',
			data: form_data,
			success: function(msg) {
				$('#result_content').html(msg);
				$('.datatable').DataTable()
			},
			error: function() {
				alert("Can't Connect to Server");
			}
		})
	}
</script>
@endpush