@extends('masters.layout.default_layout')

@section('content')
<script>
    function myFunction(url) {
        // var copyText = url;
        // alert(copyText);
        // copyText.select();
        // copyText.setSelectionRange(0, 99999)
        // document.execCommand("copy");
        // alert("Link has been copied successfully.");
        var myCode = url;
        var fullLink = document.createElement('input');
        document.body.appendChild(fullLink);
        fullLink.value = myCode;
        fullLink.select();
        document.execCommand("copy", false);
        fullLink.remove();
        alert("Link has been copied successfully");
}

</script>

<style type="text/css">
    
.counter {
    background-color:#f5f5f5;
    padding: 20px 0;
    border-radius: 5px;
}

.count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
}

</style>
<main class="app-content">

    <div class="app-title">

        <div>

            <h1><i class="fa fa-id-card-o"></i> Cards List</h1>

        </div>

        <ul class="app-breadcrumb breadcrumb">

            <a class="btn btn-primary icon-btn" href="{{route('addCard')}}"><i class="fa fa-plus"></i> Add Card</a>

        </ul>

    </div>

    <div class="row bg-white py-3">

        <div class="col-md-12">

            @if (count($errors) > 0)

            <div class="alert alert-danger">

                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

                <ul>

                    @foreach ($errors->all() as $error)

                    <li>{{ $error }}</li>

                    @endforeach

                </ul>

            </div>

            @endif

            <div class="flash-message">

                @foreach (['danger', 'warning', 'success', 'info'] as $msg)

                @if(Session::has('alert-' . $msg))



                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}

                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

                </p>

                @endif

                @endforeach

            </div>

            <div class="card-box">
                <div class="d-flex justify-content-end">

                <label>Select Date Range </label>
                @if(!empty($from_date))
                <input type="text" name="daterange" value="{{$from_date}} - {{$to_date}}" style="width: 200px;height: 38px;" />
                @else
                <input type="text" name="daterange" value="" />
                @endif
                @if(isset($franchisee_list))
                    <div class="col-md-3 form-group">
                        <select class="form-control" id="franchisee_list">
                            <option value="all">Select Franchisee</option>
                            @foreach($franchisee_list as $data)
                          
                            <option value="{{$data->id}}" 
                             >{{$data->name}}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                </div>


                    <div class="row text-center" style="margin-bottom: 15px">
                        <div class="col">
                            <div class="counter">
                              <i class="fa fa-address-card-o fa-2x"></i>
                              <h2> <span class="timer count-title count-number" data-to="{{$total_cards}}" data-speed="1500">0</span></h2>
                               <p class="count-text ">Total Cards</p>
                            </div>
                        </div>

                        <div class="col">
                            <div class="counter">
                              <i class="fa fa-child fa-2x"></i>
                              <h2>₹ <span class="timer count-title count-number" data-to="{{$total_amount_paid}}" data-speed="1500"></span></h2>
                               <p class="count-text ">Total Paid Amount</p>
                            </div>
                        </div>

                        <div class="col">
                            <div class="counter">
                              <i class="fa fa-undo fa-2x"></i>
                              <h2>₹ <span class="timer count-title count-number" data-to="{{$total_amount_pending}}" data-speed="1500"></span></h2>
                               <p class="count-text ">Total Pending Amount ( ₹{{$per_card_amount->amount}} per card)</p>
                            </div>
                        </div>

                    </div>


                
                <div class="table-rep-plugin">

                    <div class="table-responsive" data-pattern="priority-columns">

                        <table id="example" class="table  table-striped table-bordered" cellspacing="0" style="width:100%;">

                            <thead>

                                <tr>

                                    <th>Card Id</th>

                                    <!-- <th>Name</th>

                                    <th>Email</th> -->

                                    <th>Contact</th>
                                    <th>Created Date</th>
                                    @if($user_role == 'ADMIN')
                                    <th>Card Made By</th>
                                    @endif
                                    <th> Amount </th>
                                    <!-- <th> Coupon Discount </th>
                                    <th> Coupon Code </th> -->
                                    <th> Payment Status </th>
                                    <th> Validity </th>
                                    <th>Card Active </th>
                                    
                                    

                                    <th>Action</th>

                                    <!-- <th>Subject</th> -->

                                    <!-- <th>Action</th> -->

                                </tr>

                            </thead>

                            <tbody>

                                @php $i = 1 @endphp

                                @foreach($user_data as $data)

                                <tr>

                                    <td>{{$data->visitor_id}} <br>
                                         @if($data->payment_status == "TXN_SUCCESS" && $data->valid_till_date != '' && $data->valid_till_date > $current_date && $data->is_active == 'ACTIVE')
                                        ( <a style="cursor: pointer" onclick="myFunction('{{url('/')}}/{{$data->visitor_id}}')"><i class="fa fa-link"></i></a> )
                                        @endif

                                    </td>

                                    <td>{{$data->contact}}</td>

                                    <td>{{ date("d M,Y", strtotime($data->created_at)) }}</td>
                                    @if($user_role == 'ADMIN')
                                    <td>
                                    @if($data->created_by == 'ADMIN' || $data->created_by == 'FRANCHISEE'){{$data->created_by}}
                                    @else
                                    Customer
                                    @endif 
                                    </td>
                                    @endif

                                    <td>{{$data->payment_amount}}</td>

                                    <td>
                                        @if($data->payment_status == "TXN_SUCCESS" && $data->valid_till_date != '' && $data->valid_till_date > $current_date)
                                        Paid
                                        @else
                                        Unpaid <br/>
                            
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap" onclick="send_user_id({{$data->user_id}})">Make Payment</button>

                                        @endif
                                    </td>
                                    <td>
                                        @if($data->payment_date == "")
                                        No Record Found                                        @else
                                        @if($data->payment_status == "TXN_SUCCESS" && $data->valid_till_date != '' && $data->valid_till_date > $current_date)
                                        <b>From:</b> {{date('d-m-Y',strtotime($data->payment_date))}}  <br><b>To:</b>  {{date('d-m-Y',strtotime($data->valid_till_date))}}
                                        @else
                                        Exprired
                                        @endif

                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <b>{{$data->is_active}}</b> <br>
                                        <form class="mt-4" action="{{route('registerUserUpdate')}}" method="post">
                                            @csrf
                                            <input type="hidden" name="user_id" value="{{$data->user_id}}">
                                            <select class="form-control" required name="is_active">
                                                <option value="">--Select--</option>
                                                <option value="ACTIVE">Active</option>
                                                <option value="INACTIVE">Inactive</option>
                                            </select>
                                            <input type="submit" value="Update" class="form-control mt-2 btn-info">
                                        </form>

                                    </td>
                                    

                                    <td>
                                        <a title="Edit" href="{{url('themeSelect',$data->id)}}"><span class="basic_table_icon" style="font-size: 20px;color: green;"><i class="fa fa-pencil" aria-hidden="true"></i></span></a>
                                        <a title="View" href="{{url('preViewCard',$data->visitor_id)}}" target="_blank"><span class="basic_table_icon" style="font-size: 20px;color: blue;margin-left: 10px;"><i class="fa fa-eye" aria-hidden="true"></i></span></a>
                                        <a title="Delete" href="{{route('cardDelete',$data->user_id)}}" onClick="return confirm('Are you sure?');"><span class="basic_table_icon" style="font-size: 20px;color: red;margin-left: 10px;"><i class="fa fa-trash-o" aria-hidden="true"></i></span></a>
                                        <a title="Clone" href="javascript:;" onclick="send_clone_user_id({{$data->user_id}})" data-toggle="modal" data-target="#cloneModal" data-whatever="@getbootstrap"><span class="basic_table_icon" style="font-size: 20px;color: #FECA26;margin-left: 10px;"><i class="fa fa-clone" aria-hidden="true"></i></span></a>
                                        
                                    </td>

                            

                                </tr>

                                @php $i++ @endphp

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</main>

<!-- Essential javascripts for application to work-->


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Make Card Payment</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('makePayment')}}" method="post" id="ManualAmountForm">
            @csrf
            <input type="hidden" name="user_id" id="user_id">
          <div class="form-group div_height">
            <label for="recipient-name" class="col-form-label">Amount:</label>
            <input type="number" class="form-control required digits" name="payment_amount" id="payment_amount" value="">
          </div>
          <div class="form-group div_height">
            <label for="recipient-name" class="col-form-label">Duration:</label>
            <select class="form-control required" id="duration" name="duration">
                <option value="">Select Duration</option>
                
                                          <option value="1" >{{$i}}</option>
                                            <option value="2" >{{$i}}</option>
                                            <option value="3" >{{$i}}</option>
                                            <option value="4" >{{$i}}</option>
                                            <option value="5" >{{$i}}</option>
                                            <option value="6" >{{$i}}</option>
                                            <option value="7" >{{$i}}</option>
                                            <option value="8" >{{$i}}</option>
                                            <option value="9" >{{$i}}</option>
                                            <option value="10" >{{$i}}</option>
                                            <option value="11" >{{$i}}</option>
                                            <option value="12" >{{$i}}</option>
                                            <option value="13" >{{$i}}</option>
                                            <option value="14" >{{$i}}</option>
                                            <option value="15" >{{$i}}</option>
                                            <option value="16" >{{$i}}</option>
                                            <option value="17" >{{$i}}</option>
                                            <option value="18" >{{$i}}</option>
                                            <option value="19" >{{$i}}</option>
                                            <option value="20" >{{$i}}</option>
                                            <option value="21" >{{$i}}</option>
                                            <option value="22" >{{$i}}</option>
                                            <option value="23" >{{$i}}</option>
                                            <option value="24" >{{$i}}</option>
                                            <option value="25" >{{$i}}</option>
                                            <option value="26" >{{$i}}</option>
                                            <option value="27" >{{$i}}</option>
                                            <option value="28" >{{$i}}</option>
                                            <option value="29" >{{$i}}</option>
                                            <option value="30" >{{$i}}</option>
                     
    
            </select>
            
          </div>
          <div class="form-group div_height">
            <label for="recipient-name" class="col-form-label">Duration Type:</label>
            
            <select class="form-control required" id="" name="duration_type">
            <option value="">Select Duration Type</option>
            <option value="day">Day</option>
            <option value="month">Month</option>
            <option value="year">Year</option>
        </select>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Do Payment</button>
      </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="cloneModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Clone</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('cloneCard')}}" method="post" id="cloneData">
            @csrf
            <input type="hidden" name="clone_user_id" id="clone_user_id">
          <div class="form-group div_height">
            <label for="recipient-name" class="col-form-label">Email:</label>
            <input type="text" class="form-control required"  required name="email" id="email" value="">
          </div>
           
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Clone</button>
      </div>
      </form>
    </div>
  </div>
</div>


<script>

$( document ).ready(function() {

     var ajax_url = "{{ url('/') }}";

    var form = $("#cloneData");

    form.validate({

        rules: {

           

            email: {

                required:true,

                remote: {

                            url: "{{url("masterAdmin/email_check")}}",

                            type: "get",

                            data: {

                            email: function() {

                                    return $("#email").val(); //your email field

                                }

                            }

                  }

            },
        },

        messages:{

            email:{

                remote: "Email is already registered.",    

            },

        }

    });

});    

</script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


<script>

$(function() {

// $('input[name="daterange"]').daterangepicker({
//       //autoUpdateInput: false,
//       locale: {
//           cancelLabel: 'Clear'
//       }
//   });




 $('input[name="daterange"]').daterangepicker({
    opens: 'left',
    startDate: {{$start_date}},
    endDate:   }, function(start, end, label) {

  });


  $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
    var url = "{{url('masterAdmin/cards/')}}"; 
    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
    window.location = url + '/' + $("#franchisee_list").val()+'/'+picker.startDate.format('DD-MM-YYYY')+'/'+picker.endDate.format('DD-MM-YYYY');
  });

  $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });



  $("#franchisee_list").change(function() {
        var value = $(this).val();
        var url = '{{url('masterAdmin/cards/')}}'; 
        window.location = url + '/' + value;
    });

});

</script>

<script type="text/javascript">
    function send_user_id(user_id) {
       $("#user_id").val(user_id);
    }
    function send_clone_user_id(user_id) {
       $("#clone_user_id").val(user_id);
    }
    $( document ).ready(function() {
        
    });



    (function ($) {
        $.fn.countTo = function (options) {
            options = options || {};
            
            return $(this).each(function () {
                // set options for current element
                var settings = $.extend({}, $.fn.countTo.defaults, {
                    from:            $(this).data('from'),
                    to:              $(this).data('to'),
                    speed:           $(this).data('speed'),
                    refreshInterval: $(this).data('refresh-interval'),
                    decimals:        $(this).data('decimals')
                }, options);
                
                // how many times to update the value, and how much to increment the value on each update
                var loops = Math.ceil(settings.speed / settings.refreshInterval),
                    increment = (settings.to - settings.from) / loops;
                
                // references & variables that will change with each update
                var self = this,
                    $self = $(this),
                    loopCount = 0,
                    value = settings.from,
                    data = $self.data('countTo') || {};
                
                $self.data('countTo', data);
                
                // if an existing interval can be found, clear it first
                if (data.interval) {
                    clearInterval(data.interval);
                }
                data.interval = setInterval(updateTimer, settings.refreshInterval);
                
                // initialize the element with the starting value
                render(value);
                
                function updateTimer() {
                    value += increment;
                    loopCount++;
                    
                    render(value);
                    
                    if (typeof(settings.onUpdate) == 'function') {
                        settings.onUpdate.call(self, value);
                    }
                    
                    if (loopCount >= loops) {
                        // remove the interval
                        $self.removeData('countTo');
                        clearInterval(data.interval);
                        value = settings.to;
                        
                        if (typeof(settings.onComplete) == 'function') {
                            settings.onComplete.call(self, value);
                        }
                    }
                }
                
                function render(value) {
                    var formattedValue = settings.formatter.call(self, value, settings);
                    $self.html(formattedValue);
                }
            });
        };
        
        $.fn.countTo.defaults = {
            from: 0,               // the number the element should start at
            to: 0,                 // the number the element should end at
            speed: 1000,           // how long it should take to count between the target numbers
            refreshInterval: 100,  // how often the element should be updated
            decimals: 0,           // the number of decimal places to show
            formatter: formatter,  // handler for formatting the value before rendering
            onUpdate: null,        // callback method for every time the element is updated
            onComplete: null       // callback method for when the element finishes updating
        };
        
        function formatter(value, settings) {
            return value.toFixed(settings.decimals);
        }
    }(jQuery));

    jQuery(function ($) {
      // custom formatting example
      $('.count-number').data('countToOptions', {
        formatter: function (value, options) {
          return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
        }
      });
      
      // start all the timers
      $('.timer').each(count);  
      
      function count(options) {
        var $this = $(this);
        options = $.extend({}, options || {}, $this.data('countToOptions') || {});
        $this.countTo(options);
      }
    });

</script>
<script type="text/javascript">
    $("#ManualAmountForm").validate();
</script>




@stop