@extends('admin.layout')
@section('content')
 
<style>
    .box {
        background: transparent;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .bootstrap-select.btn-group .dropdown-menu li {
        border-bottom: 1px solid #6c6c6cde;
    }   
    ._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;
    }
    .hidess{
       display: none;
    }
    #example1.table-striped>tbody>tr:nth-of-type(odd) {
        background-color: rgba(0,0,0,0.03);
    }
    #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;
    }
</style>
<div class="search-list">
    <div class="content-wrapper search-result-list">
    <section class="content-header">
        <h1> {{ trans('Accounts List') }} <small class="pagination-result"> Showing {{($result['accountsData']->currentPage()-1)* $result['accountsData']->perPage()+($result['accountsData']->total() ? 1:0)}} to {{($result['accountsData']->currentPage()-1)*$result['accountsData']->perPage()+count($result['accountsData'])}}  of  {{$result['accountsData']->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('Accounts List') }}</li>
        </ol>
    </section>
    @include('admin.loader')
    @php
        $getUserRoleData = userRoleData();
        $Accounts       = explode(",",$getUserRoleData->Accounts);
        $accountButton       = explode(",",$getUserRoleData->accountButton);
 
    @endphp 
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-info" style="z-index: 1;">
                    <div class="box-body">
                        @if(in_array("Add",$Accounts ))
                            <div class="col-xs-12">
                                <div class="row">
                                    <div class="box-tools pull-left">
                                        <a href="create-accounts" type="button" class="btn btn-block btn-primary">{{ trans('Create Accounts') }}</a>
                                    </div>
                                </div>
                                <br>
                            </div>
                        @endif
 
                        <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="account_filter_form">
                                <input type="hidden" name="date_range" id="date_range" value="{{ $date_range }}">
                                <div class="clearfix"></div>
                                <div class="col-md-12"> 
                                    <strong style="color: #00c0ef;">Search By: Accounts Number or ID/Customer/Assigned to/Status</strong>
                                    @if(in_array("Send",$accountButton ))
                                    <a href="{{route('generateAccountNumber')}}" style= "margin-left: 489px;"class="ml-2 btn btn-primary" >Create Account</button>
                                    @endif
                                    <a href="{{ URL('admin/accounts') }}" class="btn-primary-apply pull-right">Clear Filter</a>
                                </div>
                                <div class="col-md-12">
                                <div class="row myFlexDiv">
                                <div class="col-sm-2 col-md-2 _subject">
                                    <div class="form-group">                    
                                        <input type="text" name="search"  id="search_text" value="{{ $search }}" class="form-control typeahead" placeholder="Search" autocomplete="off">
                                        <span class="error_search_text" id="error_search_text"></span>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3">
                                    <div class="multi-upper-cmn-bx form-control">
                                        {!! Form::select('leads_products[]', $result['services'], $leads_products, array('class'=>'form-control', 'id'=>'leads_products', 'multiple'=>'')) !!}
                                        <div class="cmn-change-value-multi">
                                            <span class="selected-count"></span>
                                            <button type="button" class="reset-btn">x</button>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="col-sm-3 col-md-3">
                                    <div class="multi-upper-cmn-bx form-control">
                                        {!! Form::select('assignedto[]', $result['assigned_to'], $assignedto, array('class'=>'form-control', 'id'=>'assignedto', 'multiple'=>'')) !!}
                                        <div class="cmn-change-value-multi">
                                            <span class="selected-count"></span>
                                            <button type="button" class="reset-btn">x</button>
                                        </div>
                                    </div>
                                </div>

                                 <div class="col-sm-3 col-md-3">
                                    <div class="multi-upper-cmn-bx form-control">
                                        {!! Form::select('country[]', $result['country'], $country, array('class'=>'form-control', 'id'=>'country', 'multiple'=>'')) !!}
                                        <div class="cmn-change-value-multi">
                                            <span class="selected-count"></span>
                                            <button type="button" class="reset-btn">x</button>
                                        </div>
                                    </div>
                                </div>
          
                                <div class="col-sm-3 col-md-3">
                                <div class="multi-upper-cmn-bx form-control">
                                    <select name="cities[]" class="form-control" id="p_city" multiple>
                                        @foreach($result['cities'] as $city)
                                            <option value="{{ $city }}" @if(in_array($city, (array) old('cities', $cities))) selected @endif>
                                                {{ $city }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="cmn-change-value-multi">
                                        <span class="selected-count"></span>
                                        <button type="button" class="reset-btn">x</button>
                                    </div>
                                </div>
                                    
                                </div>

                                <div class="col-sm-3 col-md-3">
                                <div class="multi-upper-cmn-bx form-control">
                                    <select name="states[]" class="form-control" id="states" multiple> 
                                        @foreach ($result['states'] as $zone_id => $zone_name)
                                            <option value="{{ $zone_id }}" @if(in_array($zone_id, (array) old('states', $states))) selected @endif>
                                                {{ $zone_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="cmn-change-value-multi">
                                        <span class="selected-count"></span>
                                        <button type="button" class="reset-btn">x</button>
                                    </div>
                                </div>
                                
                                </div>
 
                                     
                                <div class="col-sm-2 col-md-2">
                                    <div class="multi-upper-cmn-bx form-control">
                                        {!! Form::select('accountsStatus[]', $result['accountsStatus'], $accountsStatus, array('class'=>'form-control', 'id'=>'accountsStatus', 'multiple'=>'')) !!}
                                        <div class="cmn-change-value-multi">
                                            <span class="selected-count"></span>
                                            <button type="button" class="reset-btn">x</button>
                                        </div>
                                    </div>
                                </div> 
                                                     
                                <div class="col-sm-2 col-md-2">
                                  <div class="form-group">
                                     <input type="text" name="from_date" id="from_date" value="{{ $from_date }}" class="form-control" placeholder="Date range" readonly="" autocomplete="off">
                                 </div>
                                </div>
                                    </div>
                                </div>

                            <button class="ml-2 btn btn-primary"  style="border: 0;margin-left: 3px; width: 175px; margin-top: 6px; padding: 9px 0;" type="submit" onclick="submitSearchForm()">Apply</button>

                            </form>
                        </div><br>
                        <div class="clearfix"></div>
                        <div class="col-xs-12 result-list">     
                                @if(in_array("View",$Accounts ))            
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>                      
                                            <th width="10%">{{ trans('Accounts Number') }}</th>
                                            <th>{{ trans('Customer Name') }}</th>
                                            <th width="15%">{{ trans('Phone') }}</th>
                                            <th width="15%">{{ trans('Status') }}</th>
                                            <th width="15%">{{ trans('Assigned to') }}</th>
                                            <th width="15%">{{ trans('Created Date') }}</th>
                                            @if(in_array("Edit",$Accounts ) || in_array("Delete",$Accounts ))
                                                <th width="10%">{{ trans('Action') }}</th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody class="accounts-data">
                                        @include('admin.accounts_pagination_data')
                                    </tbody>
                                </table>                                                    
                                <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
                                @else
                                    <p> <strong>Please contact with SuperAdmin</strong></p>
                                @endif
                            </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>
    $( 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>
 
    function submitSearchForm() {
        $('.fullLoader').show();
        $('#account_filter_form').submit();
    }
 
    $('#search_text').donetyping(function(){
        // submitSearchForm();
    });
 
    $(function () { 
        // Products
        $("#leads_products").select2({
            closeOnSelect: false,
            placeholder: 'Products',
        }).on("select2:select", function (e) {
            // submitSearchForm();
        }).on('select2:unselect', function (e) {
            // submitSearchForm();
        });
 
        // Status
        $("#accountsStatus").select2({
            closeOnSelect: false,
            placeholder: 'Status',
        }).on("select2:select", function (e) {
            // submitSearchForm();
 
        }).on('select2:unselect', function (e) {
            // submitSearchForm();
        });
 
        // Assigned to
        $("#assignedto").select2({
            closeOnSelect: false,
            placeholder: 'Assigned to',
        }).on("select2:select", function (e) {
            // submitSearchForm();
        }).on('select2:unselect', function (e) {
            // submitSearchForm();
        });

        $("#p_city").select2({
                closeOnSelect: false,
                placeholder: 'Select City',
            }).on("select2:select", function (e) {
                var selected_element = $(e.currentTarget);
                var selected_city_ids = selected_element.val();
                var city_names = [];
                selected_city_ids.forEach(function (city_id) {
                    var city_name = $("#p_city option[value='" + city_id + "']").text(); 
                    city_names.push(city_name);
                });
                $('#selected_city_names').val(city_names.join(','));

                $('#hidden_page').val('1');
            }).on('select2:unselect', function (e) {
                var selected_element = $(e.currentTarget);
                var selected_city_ids = selected_element.val(); // This will get the selected city IDs after unselecting

                // If you need to perform any action when a city is unselected, do it here
                $('#hidden_page').val('1'); // Reset page if needed
            });

            $("#states").select2({
                closeOnSelect: false,
                placeholder: 'Select State',
            }).on("select2:select", function (e) {
                var selected_element = $(e.currentTarget);
                var selected_state = selected_element.val(); // Get the selected state

                // You can use selected_state for any further processing (like form submission, etc.)
                // If you want to reset the page when selecting a state, you can do so here:
                $('#hidden_page').val('1'); // Reset page if needed
                
                // Optional: Trigger form submission if needed
                // submitSearchForm();
            }).on('select2:unselect', function (e) {
                var selected_element = $(e.currentTarget);
                var selected_state = selected_element.val(); // Get the selected state (null when unselected)

                // If you need to perform any action when a state is unselected, do it here
                $('#hidden_page').val('1'); // Reset page if needed
            });

            $("#country").select2({
                closeOnSelect: false,
                placeholder: 'Select Country',
            }).on("select2:select", function (e) {
                var selected_element = $(e.currentTarget);
                var selected_state = selected_element.val(); // Get the selected state

                // You can use selected_state for any further processing (like form submission, etc.)
                // If you want to reset the page when selecting a state, you can do so here:
                $('#hidden_page').val('1'); // Reset page if needed
                
                // Optional: Trigger form submission if needed
                // submitSearchForm();
            }).on('select2:unselect', function (e) {
                var selected_element = $(e.currentTarget);
                var selected_state = selected_element.val(); // Get the selected state (null when unselected)

                // If you need to perform any action when a state is unselected, do it here
                $('#hidden_page').val('1'); // Reset page if needed
            });
    });
</script>
<script>
    function getmob(id){ //alert(id);
     $('#' + id).show();
    $('.hidess').not('#' + id).hide();
}
document.querySelectorAll('#watermarked').forEach(function(el) {
        el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
    });
    </script>
<script>
    function addedLogs(id, name, action) {
        let hasError = false;
        if (!hasError) {
            $.ajax({
                url: "{{ url('admin/added-leads-logs') }}",
                type: 'post',
                data: {
                    id: id,
                    name: name,
                    action: action
                },
                success: function(res) {
                },
            });
        } else {
            console.error('An error occurred before AJAX request. Error code: 500');
        }
    }



    function isValid(val){
        if(val==undefined || val==null || val==''){
            return false
        }
        return true;
    }
    const selected_leads_products = JSON.parse('""')
    const selected_cities  = JSON.parse('""')
    const selected_states  = JSON.parse('""')
    const selected_assigned_to  = JSON.parse('""')
    const selected_country  = JSON.parse('""')
    const selected_status  = JSON.parse('""')

    
    $(document).ready(function(){
        $.ajax({
            url: "{{ route('accounts-listing-filters') }}",
            type:'GET',
            dataType:'json',
            success: function (response) {                          
console.log(response.results, 'response');
                $('#leads_products').val(null).trigger('change');
                if(isValid(response.results) && isValid(response.results.services)){
                    $.each(Object.entries(response.results.services), function (i, item) {
                        let selected = false
                        $('#leads_products').append($('<option>', { 
                            value: item[0],
                            text : item[1],
                        }));
                    });
                    $('#leads_products').val(selected_leads_products);
                    $('#leads_products').trigger('change'); // Notify any JS components that the value changed
                } 
                $('#assignedto').val(null).trigger('change');
                if(isValid(response.results) && isValid(response.results.assigned_to)){
                    $.each(Object.entries(response.results.assigned_to), function (i, item) {
                        let selected = false
                        $('#assignedto').append($('<option>', { 
                            value: item[0],
                            text : item[1],
                        }));
                    });
                    $('#assignedto').val(selected_assigned_to);
                    $('#assignedto').trigger('change'); // Notify any JS components that the value changed
                }     
                $('#p_city').val(null).trigger('change');
                if(isValid(response.results) && isValid(response.results.cities)){
                    $.each(Object.entries(response.results.cities), function (i, item) {
                        let selected = false
                        $('#p_city').append($('<option>', { 
                            value: item[0],
                            text : item[1],
                        }));
                    });
                    $('#p_city').val(selected_cities);
                    $('#p_city').trigger('change'); // Notify any JS components that the value changed
                }    
                $('#states').val(null).trigger('change');
                if(isValid(response.results) && isValid(response.results.states)){
                    $.each(Object.entries(response.results.states), function (i, item) {
                        let selected = false
                        $('#states').append($('<option>', { 
                            value: item[0],
                            text : item[1],
                        }));
                    });
                    $('#states').val(selected_states);
                    $('#states').trigger('change'); // Notify any JS components that the value changed
                } 

                $('#accountsStatus').val(null).trigger('change');
                if(isValid(response.results) && isValid(response.results.accountsStatus)){
                    $.each(Object.entries(response.results.accountsStatus), function (i, item) {
                        let selected = false
                        $('#accountsStatus').append($('<option>', { 
                            value: item[0],
                            text : item[1],
                        }));
                    });
                    $('#accountsStatus').val(selected_status);
                    $('#accountsStatus').trigger('change'); // Notify any JS components that the value changed
                }    

                $('#country').val(null).trigger('change');
                if(isValid(response.results) && isValid(response.results.country)){
                    $.each(Object.entries(response.results.country), function (i, item) {
                        let selected = false
                        $('#country').append($('<option>', { 
                            value: item[0],
                            text : item[1],
                        }));
                    });
                    $('#country').val(selected_country);
                    $('#country').trigger('change'); // Notify any JS components that the value changed
                }    
            }
        });    
    });       
</script>
@endsection