@extends('layouts.app')

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" /> -->


@section('content')
    @if (session()->has('message'))
        <div class="alert alert-success">{{ session()->get('message') }}</div>
    @endif
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif

    <div class="card forms-card">
        <div class="card-body">
            <div class="basic-form">
                <div class="outer-div">
                    <div class="srchBox_wraper justify-content-end mt-3 mb-3">
                        <div class="right-panel-btn text-left">
                            <h4>Custom Report</h4>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="checkagree-with-label">
                                <div class="checkagree">
                                    <input id="gender" name="gender" type="checkbox" value="true"><label>&nbsp; Gender & Age Group</label>
                                </div>                                
                            </div>                            
                        </div> 

                        <div class="row">
                            <div class="col-md-12">
                                <div class="" id="divAgeGroup" style="display: none;">
                                    <ul>
                                    @foreach($age_groups as $key => $age_group)
                                        <li class="shw_pickup ml-4">                            
                                            <input type="radio" class="custom-radio-s2 ageGroup" id="age_group_{{ $key }}" name="age_group" value="{{ $key }}">
                                            {{ $age_group }}
                                        </li>
                                    @endforeach
                                    </ul>
                                </div>                           
                            </div> 
                        </div>
                        <span class="error" id="error_age_group"></span>                        
                    </div>

                    <div class="clearfix"><br></div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="checkagree-with-label">
                                <div class="checkagree">
                                    <input id="pickup" name="pickup" type="checkbox" value="true"><label>&nbsp;Pickup Date</label>
                                </div>                                
                            </div>                            
                        </div> 
                        <div class="row">
                            <div class="col-md-12">
                                <div class="" id="divPickupDate" style="display: none;">
                                    <ul>
                                    @foreach($pickup_dates as $key => $pickup_date)
                                        <li class="shw_pickup ml-4">                            
                                            <input type="radio" class="custom-radio-s2 pickup_d" id="pickup_date_{{ $key }}" name="pickup_date" value="{{ $pickup_date }}">
                                            {{ \Carbon\Carbon::parse($pickup_date)->format('F d, Y') }}
                                        </li>
                                    @endforeach
                                    </ul>
                                </div>                           
                            </div> 
                        </div>
                        <span class="error" id="error_pickup"></span>                       
                    </div>

                    <div class="clearfix"><br></div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="checkagree-with-label">
                                <div class="checkagree">
                                    <input id="delivery" name="delivery" type="checkbox" value="true"><label>&nbsp;Delivery Date</label>                                    
                                </div>                                
                            </div>                            
                        </div> 
                        <div class="row">
                            <div class="col-md-12">
                                <div class="" id="divDeliveryDate" style="display: none;">
                                    <ul>                                    
                                        <li class="shw_pickup ml-4">                            
                                            <input type="hidden" name="delivery_date" id="delivery_date" value="">
                                            {{ \Carbon\Carbon::parse($delivery_date)->format('F d, Y') }}
                                        </li>                                   
                                    </ul>
                                </div>                           
                            </div> 
                        </div> 
                        <span class="error" id="error_zipcode"></span>                        
                    </div>

                    <div class="clearfix"><br></div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="checkagree-with-label">
                                <div class="checkagree">
                                    <input id="household" name="household" type="checkbox" value="true"><label>&nbsp;Member in Household</label>                                    
                                </div>                                
                            </div>                            
                        </div> 
                        
                        <div class="row" id="divHousehold" style="display: none;">
                            <div class="col-sm-6">
                                <div class="form-group">

                                <select class="ampm-input form-control" name="household_type" id="household_type">
                                    <option value="lt"><</option>
                                    <option value="eq">=</option>
                                    <option value="gt">></option>
                                </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">                                    
                                    <input type="text" name="household_value" id="household_value" class="form-control" placeholder="Enter household value">
                                </div>
                                <span class="error" id="error_household"></span>
                            </div>
                        </div>                                              
                    </div>

                    <div class="clearfix"><br></div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="checkagree-with-label">
                                <div class="checkagree">
                                    <input id="zipcode" name="zipcode" type="checkbox" value="true"><label>&nbsp;Number of Families by Zipcode</label>                                    
                                </div>                                
                            </div>                            
                        </div> 
                        <div class="clearfix"></div>
                        <div class="row" id="divZipcode" style="display: none;">
                            <div class="col-md-6">                                
                                <input type="text" name="zipcode_value" id="zipcode_value" value="" class="form-control" placeholder="Enter Zipcode">
                            </div>                            
                        </div>  
                        <span class="error" id="error_zipcode"></span>                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="custom-table-s1-pagination">
        <div class="left-info">
            <div class="text-sm"></div>
        </div>
        <div class="form-group">
            <button class="btn btn-info" type="button" onclick="export_list('csv')">Download Report</button>
            <a href="{{ request()->url()}}" class="btn btn-default">Clear</a>
        </div>
    </div>


<script type="text/javascript"> 
    function export_list(export_type) {
        var age_group = $('input[name="age_group"]:checked').val();
        var pickup_date = $('input[name="pickup_date"]:checked').val();
        var household = $("#household_value").val();
        var zipcode = $("#zipcode_value").val(); 
        var household_type = $("#household_type").val();
        var delivery_date = $("#delivery_date").val();         
               
        
        if($("#gender").prop('checked') == true){            
            if ($('input[name="age_group"]:checked').length == 0) {           
                $('#error_age_group').show();   
                $("#error_age_group").html("Please select any age group")
                setTimeout(function(){ 
                    $('#error_age_group').hide();          
                }, 5000); 
                return false
            }
        }

        if($("#pickup").prop('checked') == true){            
            if ($('input[name="pickup_date"]:checked').length == 0) {           
                $('#error_pickup').show();   
                $("#error_pickup").html("Please select any pickup date")
                setTimeout(function(){ 
                    $('#error_pickup').hide();          
                }, 5000); 
                return false
            }
        }

        if($("#household").prop('checked') == true){            
            if (household == '') {           
                $('#error_household').show();   
                $("#error_household").html("Please enter household value")
                $('#household_value').focus();
                setTimeout(function(){ 
                    $('#error_household').hide();          
                }, 5000); 
                return false
            }
        }

        if($("#zipcode").prop('checked') == true){            
            if (zipcode == '') {           
                $('#error_zipcode').show();   
                $("#error_zipcode").html("Please enter zipcode value")
                $('#zipcode_value').focus();
                setTimeout(function(){ 
                    $('#error_zipcode').hide();          
                }, 5000); 
                return false
            }
        }
        

        /*$.ajax({
            url: "{{ route('backend.downloadCustomReport')}}",
            type: "get",
            data: {
                "_token": "{{ csrf_token() }}",
                age_group: age_group,
                pickup_date: pickup_date,
                household: household,
                zipcode: zipcode,
                household_type: household_type
            },
            success: function(res) {
                console.log(res);
                if(res.status == 'success'){
                    location.reload();    
                }  
            }
        });*/
        
        var url = "{{ route('backend.downloadCustomReport')}}";
        location.href = url + '?age_group=' + age_group + '&pickup_date=' + pickup_date + '&household=' + household + '&zipcode=' + zipcode + '&household_type=' + household_type + '&delivery_date=' + delivery_date;
    }
</script>
<script>
$(document).ready(function() {
    
    $('input[id^="gender"]').click(function () {

        if ($(this).prop('checked')) {
           $("#divAgeGroup").show(); 
        }
        else {
           $("#divAgeGroup").hide();
           $('.ageGroup').prop('checked', false);    
        }
    });

    $('input[id^="pickup"]').click(function () {

        if ($(this).prop('checked')) {
           $("#divPickupDate").show(); 
        }
        else {
           $("#divPickupDate").hide();
           $('.pickup_d').prop('checked', false);     
        }
    }); 

    $('input[id^="delivery"]').click(function () {

        if ($(this).prop('checked')) {
           $("#divDeliveryDate").show(); 
           $('#delivery_date').val('{{ $delivery_date }}'); 
        }
        else {
           $("#divDeliveryDate").hide();
           $('#delivery_date').val('');     
        }
    });    

    $('input[id^="household"]').click(function () {

        if($("#household").prop('checked') == true){  
           $("#divHousehold").show(); 
        }
        else {
           $("#divHousehold").hide(); 
           $('#household_value').val('');   
        }
    });

    $('input[id^="zipcode"]').click(function () {

        if($("#zipcode").prop('checked') == true){   
           $("#divZipcode").show(); 
        }
        else {
           $("#divZipcode").hide(); 
           $('#zipcode_value').val('');   
        }
    });

    $('input[name="household_value"]').keyup(function(e)
                                {
        if (/\D/g.test(this.value))
        {
            this.value = this.value.replace(/\D/g, '');
        }
    });
});
</script>
<style type="text/css">
    .error{
        color: red;
    }
</style>
@endsection