@extends('admin.layout')
@section('content')
<style>	
	#watermarked::before {
		position: fixed;
		top: -75%;
		left: -75%;
	
		display: block;
		width: 300%;
		height: 300%;
	
		transform: rotate(-45deg);
		content: attr(data-watermark);
	
		font-size: 30px;
		opacity: 0.15;
		line-height: 4em;
		letter-spacing: 2px;
		color: #ff0523;
		z-index:0;
	}
	.content-wrapper, .right-side{
		background: #FFF;
	}
	.box {
		background: transparent;
		z-index: 1; 
	}
	.bootstrap-select.btn-group .dropdown-menu li {
	    border-bottom: 1px solid #6c6c6cde;
	}
	.box-body br {
		display: block !important;
	}

	.mask-types-table  br {
		display: none !important;
	}
	table th,td{
		text-align: center;
	}
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list"> 	
	<section class="content-header">
    <h1> {{ trans('Unsubscribe Number List') }}
    <small class="pagination-result">
    @if ($result->count() > 0)
        Showing {{ ($result->currentPage() - 1) * $result->perPage() + 1 }}
        to
        {{ ($result->currentPage() - 1) * $result->perPage() + $result->count() }}
        of {{ $result->total() }} Results
        @endif
    </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('Unsubscribe') }}</li>
		</ol>
	</section>

	@php
		$getUserRoleData = userRoleData();
		$CountryModel		= explode(",",$getUserRoleData->CountryModel);
	@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
							</div>
						</div>
						<div class="row">
														<form action="" method="GET" id="search_form">
                                <div class="col-sm-2 col-md-2">
                                    <strong style="color: #00c0ef;">Search By: Mobile</strong>
                                </div>
								<div class="col-sm-2 col-md-2">
                                    <strong style="color: #00c0ef;">Search By: Product</strong>
                                </div>
								<div class="col-sm-2 col-md-2">
                                    <strong style="color: #00c0ef;">Search By: Date</strong>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <a href="{{ URL('admin/unsubscribe') }}" class="btn-primary-apply pull-right">Clear Filter</a>
                                </div>
                                <div class="col-md-12">
                                    <div class="row myFlexDiv">
									<div class="row">
										<div class="col-sm-2 col-md-2 _subject">
											<div class="form-group">                    
												<input type="text" name="filter" id="search_text" class="form-control typeahead" value="{{ $filter }}" placeholder="Search Mobile" autocomplete="off">
												<span class="error_search_text" id="error_search_text"></span>
											</div>
										</div>
										<div class="col-sm-2 col-md-2">
											<div class="form-group">
												<!-- <label for="dropdown">Select Option</label> -->
												<select id="dropdown" name="options" class="form-control">
    <option value="">Select Product</option>
    <option value="16479432566" {{ request('options') == '16479432566' ? 'selected' : '' }}>Guru</option>
    <option value="16479430707" {{ request('options') == '16479430707' ? 'selected' : '' }}>Tashan</option>
    <option value="17783722112" {{ request('options') == '17783722112' ? 'selected' : '' }}>Boss</option>
    <option value="14037752000" {{ request('options') == '14037752000' ? 'selected' : '' }}>Vois</option>
    <option value="16479432000" {{ request('options') == '16479432000' ? 'selected' : '' }}>Brampton</option>
    <option value="14318045074" {{ request('options') == '14318045074' ? 'selected' : '' }}>Indian TV</option>

</select>

											</div>
										</div>
										<div class="col-sm-3 col-md-3">
											<div class="form-group">
												{!! Form::text('daterange', app('request')->input('daterange'), ['class' => 'form-control daterange', 'id' => 'daterange', 'placeholder' => 'Select Date', 'autocomplete' => 'off']) !!}
											</div>
										</div>

										<div class="col-sm-3 col-md-3"><button type="submit" class="btn btn-success" id="searchButton">Search</button></div>  
										<!-- <div class="col-sm-2 col-md-" ></div>   -->

                                        <div class="col-sm-2 col-md-2">
                                                <div class="box-tools pull-right">
                                                    <a href="{{ route('unsubscribe.create') }}" type="button" class="btn btn-block btn-primary">{{ trans('Add Unsubscribe Number') }}</a>
                                                </div>
                                        </div>
									</div>

                                       
                                     </div>
                                </div>
                            </form>
						</div>
						<div class="row">
							<div class="col-xs-12">	
				                <table id="example1" class="table table-bordered table-striped signatures-table">
                                <form action="" method="GET" id="tickets_filter">
                                <input type="hidden" name="order_by" id="order_by">
                                <input type="hidden" name="order_type" id="order_type">
									<thead>
										<tr>                      
                                        <th width="13%" onclick="updateSort('id', 'desc')">
    {{ trans('Id') }}
    @if(request('sort_by') == 'id')
        @if(request('sort_type') == 'desc')
            <a id="sort_data" href="{{ route('unsubscribe.index', array_merge(request()->input(), ['sort_by' => 'id', 'sort_type' => 'asc'])) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
        @else
            <a id="sort_data" href="{{ route('unsubscribe.index', array_merge(request()->input(), ['sort_by' => 'id', 'sort_type' => 'desc'])) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
        @endif
    @else
        <a id="sort_data" href="{{ route('unsubscribe.index', array_merge(request()->input(), ['sort_by' => 'id', 'sort_type' => 'desc'])) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
    @endif
</th>
											<th>{{ trans('Mobile') }}</th>
											<th>{{ trans('Product') }}</th>
                                            <th width="13%" onclick="updateSort('created_at', 'desc')">
    {{ trans('Created At') }}
    @if(request('sort_by') == 'created_at')
        @if(request('sort_type') == 'desc')
            <a id="sort_data" href="{{ route('unsubscribe.index', array_merge(request()->input(), ['sort_by' => 'created_at', 'sort_type' => 'asc'])) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
        @else
            <a id="sort_data" href="{{ route('unsubscribe.index', array_merge(request()->input(), ['sort_by' => 'created_at', 'sort_type' => 'desc'])) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
        @endif
    @else
        <a id="sort_data" href="{{ route('unsubscribe.index', array_merge(request()->input(), ['sort_by' => 'created_at', 'sort_type' => 'desc'])) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
    @endif
</th>
                                            <th>{{ trans('Updated At') }}</th>
											<th>{{ trans('Action') }}</th>
										</tr>
									</thead>
                            </form>
									<tbody class="result-data">
    @if($result->count() > 0)
        @foreach ($result as $key)
            <tr>
                <td>{{ $key->id }}</td>
                <td>{{ $key->mobile }}</td>
                <td>
                    @if($key->product == '16479432566')
                        Guru
                    @elseif($key->product == '16479430707')
                        Tashan
                    @elseif($key->product == '16479432000')
                        Brampton
                    @elseif($key->product == '14318045074')
                        Indian TV
                    @elseif($key->product == '14037752000')
                        Vois
                    @else
                        Boss
                    @endif
                </td>
                <td>{{ date('d-m-Y H:i:s', strtotime($key->created_at)) }}</td>
                <td>{{ date('d-m-Y H:i:s', strtotime($key->updated_at)) }}</td>
                <td>
                    <a href="{{ route('unsubscribe.edit', [$key->id]) }}" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="bottom" title="Edit">
                        <i class="fa fa-pencil"></i>
                    </a>
                    <a href="javascript:$('#destroy_{{ $key->id }}').submit();" class="btn btn-danger btn-xs" data-toggle="tooltip" data-placement="bottom" title="Delete" onclick="return getDeleteConfirmation('{{ $key->name }}', {{ $key->id }}, 'Unsubscribe Model');">
                        <i class="fa fa-trash"></i>
                    </a>
                    <form action="{{ route('unsubscribe.destroy', [$key->id]) }}" method="POST" id="destroy_{{ $key->id }}">
                        @csrf
                        @method('DELETE')
                    </form>
                </td>
            </tr>
        @endforeach
        <tr>
            <td colspan="6">
                <div class="col-xs-12 text-right">
                    {!! $result->appends(request()->input())->links() !!}
                </div>
            </td>
        </tr>
    @else
        <tr>
            <td colspan="6">No record found</td>
        </tr>
    @endif
</tbody>

				                </table>
                                <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
							</div>
						</div>
					</div>
				</div>

				<div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
				</div>

			</div>
		</div>
	</section>  
</div>
</div>
@endsection 
@section('scripts')
<!-- <script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript"> 
    function sortFilter(order_by, order_type) {
    $("#order_by").val(order_by);
    $("#order_type").val(order_type);
    $("#tickets_filter").submit();
}
</script>
<script type="text/javascript">
	function submitSearchForm() {
        $('.fullLoader').show();
        $('#search_form').submit();
    }
    // $('#search_text').donetyping(function(){
    //     submitSearchForm();
    // });	 

    $(function () { 
        // Status
        $("#status").select2({
            closeOnSelect: false,
            placeholder: 'Status',
        }).on("select2:select", function (e) {     
            submitSearchForm();
        }).on('select2:unselect', function (e) {
            submitSearchForm();
        });
    });
</script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
</script>



<script>
   $( function() {
        $('#daterange').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'));
     });
        $('#daterange').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);
            $('#date_day_filter').submit();
        });
        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
        });
        $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
            //do something, like clearing an input
            $('#date_range').val('');
            $('#daterange').val('');
            var page = '';
            //fetch_data(page);
            $('#date_day_filter').submit();
        });
    });

	
	

</script>


<script>
    // Function to submit the form with updated status_filter value
    function submitSearchForm() {
        document.getElementById('search_form').submit();
    }

    // Function to update form action URL when sorting
    function updateSort(column, defaultSortType) {
    var currentUrl = new URL(window.location.href);
    var params = new URLSearchParams(currentUrl.search);
    var sortType = defaultSortType === 'desc' ? 'asc' : 'desc';

    params.set('sort_by', column);
    params.set('sort_type', sortType);

    // Update the URL without reloading the page
    window.location.href = currentUrl.pathname + '?' + params.toString();
}

    // var newUrl = currentUrl + '?sort_by=' + column + '&sort_type=' + sortType + '&status_filter=2';
</script>
@endsection