@extends('admin.layout')
@section('content')
<style>	
	.bootstrap-select.btn-group .dropdown-menu li {
	    border-bottom: 1px solid #6c6c6cde;
	}
	.box-body br {
		display: block !important;
	}

	.signatures-table  br {
		display: none !important;
	}
    
    ._subject .dropdown-menu {
        box-shadow: -1px 3px 13px 0 rgba(85, 85, 85, 0.52);
        border: 1px solid #b5b5b5;
        /*width: 100%;*/
    }
    ul.typeahead li {
        border-bottom: 1px solid;
    }
    .typeahead__container {
        font: 1.3rem Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
    }
    .typeahead__label {
        font-size: calc(1rem * 1.1);
    }
    #assignedto .typeahead__result ul.typeahead__list {
        overflow-y: scroll;
        height: 350px;
        overflow-x: auto;
    }
    #leads_products .typeahead__result ul.typeahead__list {
        overflow-y: scroll;
        height: 350px;
        overflow-x: auto;
    }
    input#search_text,#from_date, #to_date{height: 28px;}
     /*    new style added by Dalip on 20-05-2020*/
    .row.myFlexDiv {
        display: flex;
        margin: 15px -5px 0;
    }

    .row.myFlexDiv > div {
        padding: 0 5px;
        margin-bottom: 0;
    }

    .row.myFlexDiv > div .form-group {
        margin-bottom: 0;
    }
    html .typeahead__label-container {
        position: static;
        display: flex;
        order: 2;
        padding: 5px 0 0 0 !important;
        max-height:60px;
        overflow-y: auto;
    }

    html .typeahead__query {
        position: relative;
        z-index: 2;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
        .typeahead__field input, .typeahead__field textarea, .typeahead__field [contenteditable], .typeahead__field .typeahead__hint {
        padding: 0.5rem 0.75rem !important;
    }
    html .typeahead__label > *{
        line-height: 1.2;
        font-size: 11px;
        align-self: center;
    }
    html .typeahead__label .typeahead__cancel-button{
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        font-size: 11px;
    }
    .row.myFlexDiv > div .btn-primary {
        line-height: 1;
        width: 100%;
    }
    ::-webkit-scrollbar {
      width: 5px;
    }

    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    ::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
    }
    html ul.typeahead__list {
        height: auto !important;
        max-height: 50vh;
            overflow-y: auto;
    }
    #error_search_text {
        color: red;
        font-size: 12px;
    }
    .fullLoader{
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8) url("{{ URL::to('/assets/admin/images/img/loading.svg')}}") no-repeat center 20px;
        background-size: 50px;
        display: none;
        z-index: 99;
    }
    .row.listing {
        position: relative;
    }
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list"> 	
	<section class="content-header">
		<h1> {{ trans('IPTV Details Reports') }} <small class="pagination-result" style="color: #111111; font-weight: 500; margin-left: 25px;"> (Showing {{($result['get_details_reports']['detailed_reports']->currentPage()-1)* $result['get_details_reports']['detailed_reports']->perPage()+($result['get_details_reports']['detailed_reports']->total() ? 1:0)}} to {{($result['get_details_reports']['detailed_reports']->currentPage()-1)*$result['get_details_reports']['detailed_reports']->perPage()+count($result['get_details_reports']['detailed_reports'])}}  of  {{$result['get_details_reports']['detailed_reports']->total()}}  Results)  </small></h1>
		<ol class="breadcrumb">
			<li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
			<li class="active"> {{ trans('IPTV Details Reports') }}</li>
		</ol>
	</section>
    @include('admin.loader')
	@php
		$getUserRoleData = userRoleData();
		$LeadSources		= explode(",",$getUserRoleData->LeadSources);
	@endphp	
	<section class="content">
		<div class="row">
			<div class="col-xs-12">
				<div class="box box-info">
					<div class="box-body">	
						<div class="col-xs-12">
							<div class="row">
								@if(session()->has('message'))
								<div class="alert alert-success alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
									{{ session()->get('message') }}
								</div>
								@endif
								@if(session()->has('error'))
									<div class="alert alert-warning alert-dismissible">
									   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
									   <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
										{{ session()->get('error') }}
									</div>
								@endif
                                                                <form action="" method="GET" id="search_form">
                                    <input type="hidden" name="date_range" id="date_range" value="">
                                     <div class="row myFlexDiv">
                                        <div class="col-sm-6 col-md-6">
                                            <strong style="color: #00c0ef;">Search By: Products/Lead Sources/Date Range</strong>
                                        </div>
                                        <div class="col-sm-6 col-md-6">
                                            <a href="{{ URL('admin/details-reports') }}" class="btn-primary-apply pull-right">Clear Filter</a>
                                        </div>
                                    </div>
                                    <div class="row myFlexDiv">
                                        <div class="col-sm-3 col-md-3">
                                            <div class="form-group">
                                                {!! Form::select('leads_products[]', $result['services'], $leads_products, array('class'=>'form-control', 'id'=>'leads_products', 'multiple'=>'')) !!}
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-md-3">
                                            <div class="form-group">
                                                {!! Form::select('lead_source[]', $result['lead_source'], $lead_source, array('class'=>'form-control', 'id'=>'lead_source', 'multiple'=>'')) !!}
                                            </div>
                                        </div>
                                        <div class="col-sm-2 col-md-2"></div> 
                                        <div class="col-sm-4 col-md-4">
                                            <div class="input-group pull-right">
                                                <input type="text" name="from_date" id="from_date" value="" class="form-control" readonly placeholder="Date range" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                </form>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">	
					              <table border="1" bordercolor="teal" cellpadding = "5" cellspacing = "5" style="border-collapse: collapse;" class="table table-bordered table-striped">					                  
					               <thead>
					                  <tr>
					                      <th>Lead Date</th>
					                      <th>Product Name</th>
					                      <th>Name</th>
					                      <th>Phone number</th>
					                      <th>BDR</th>
					                      <th>Quantity</th>
					                      <th>Leads Source</th>
					                  </tr>
				              		</thead>
						             <tbody class="opp">
						                  @include('admin.reports.details-reports-pagination')
						            </tbody>                  
					              </table>
                                  <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>  
</div>
</div>
@endsection 
@section('scripts')
<script>	   
    function submitSearchForm() {
        $('.fullLoader').show();
        $('#search_form').submit();
    }

    // function fetch_data(page) {
    //     $('#error_search_text').hide();
    //     $('.fullLoader').show();
    // 	var startDate = $('#date_range').val();         
    // 	$.ajax({
    // 		url: '{{URL("admin/get-details-reports-ajax")}}',
    //        type: "POST",
    //        //async: false,		                   
    //        data:{'page':page,'from_date':startDate, 'products':productsID, 'lead_source':lead_source},
    // 		success:function(data) {
    // 			$('tbody.opp').html('');
    // 			$('tbody.opp').html(data.data);
    // 			$('.pagination-result').html(data.pagination_val);
    //             setTimeout(function(){
    //             	$('.fullLoader').hide();
    //             }, 300)
    // 		}
    // 	});
    // }

    $(function () { 
        // Products
        $("#leads_products").select2({
            closeOnSelect: false,
            placeholder: 'Products',
        }).on("select2:select", function (e) {
            var selected_element = $(e.currentTarget);
            var select_val = selected_element.val();            
            var select_status = $('#r_status').val();
            $('#hidden_page').val('1')
            //fetchReminderData(page = '', select_val = select_val, statusID = select_status);   
            submitSearchForm();
        }).on('select2:unselect', function (e) {
            var selected_element = $(e.currentTarget);
            var select_val = selected_element.val();
            var select_status = $('#r_status').val();
            $('#hidden_page').val('1')
            //fetchReminderData(page = '', select_val = select_val, statusID = select_status);
            submitSearchForm();
        });

        // Lead source
        $("#lead_source").select2({
            closeOnSelect: false,
            placeholder: 'Lead source',
        }).on("select2:select", function (e) {
            var selected_element = $(e.currentTarget);
            var select_val = selected_element.val();            
            var select_status = $('#r_status').val();
            $('#hidden_page').val('1')
            //fetchReminderData(page = '', select_val = select_val, statusID = select_status);
            submitSearchForm();
        }).on('select2:unselect', function (e) {
            var selected_element = $(e.currentTarget);
            var select_val = selected_element.val();
            var select_status = $('#r_status').val();
            $('#hidden_page').val('1')
            //fetchReminderData(page = '', select_val = select_val, statusID = select_status);
            submitSearchForm();
        });
    });

	$( function() {
		$('#from_date').daterangepicker({
			opens: 'left',
            locale: { cancelLabel: 'Clear' },
            //autoUpdateInput: false,
            //startDate: moment().subtract('days', 29),
            startDate: moment().subtract(1, 'month').startOf('month'),
            endDate: moment(),     
            ranges: {
                 'Today': [moment(), moment()], 
                 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                 'This Month': [moment().startOf('month'), moment().endOf('month')],
                 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
		}, 
		function(start, end, label) {	
			console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
		});
		$('#from_date').on('apply.daterangepicker', function(ev, picker) {
			//console.log(picker.startDate.format('YYYY-MM-DD'));
			//console.log(picker.endDate.format('YYYY-MM-DD'));
			var startDate = picker.startDate.format('YYYY-MM-DD')+'/'+picker.endDate.format('YYYY-MM-DD');
			$('#date_range').val(startDate);
			//console.log(startDate);
			//return false;
			var page = '';
			//fetch_data(page);                        
            submitSearchForm();
		});
		$('#from_date').on('apply.daterangepicker', function(ev, picker) {
			$(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
		});
        $('#from_date').on('cancel.daterangepicker', function(ev, picker) {
            //do something, like clearing an input
            $('#date_range').val('');
            $('#from_date').val('');
            var page = '';
            //fetch_data(page);            
            submitSearchForm();
        });
	});
</script>
<script>
// $(document).ready(function(){
//     $(document).on('click', '.pagination a', function(event){    
//         event.preventDefault();
//         var page = $(this).attr('href').split('page=')[1];
//         //console.log(page);
//         $('#hidden_page').val(page);
//         $('li').removeClass('active');
//         $(this).parent().addClass('active');
//         fetch_data(page);
//     });
// });
</script>
@endsection