@extends('layouts.app', ['pageSlug' => 'customerlist'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Payments</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Extentions
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">
                <form id="payment_form">        
                    <table id="custom_table" class="table table-striped table-bordered">
                        <thead>
                            <th>User Name</th>
                            <th>Expiration</th>
                            <th style="width:10%">Extension</th>
                            @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
                            <th style="width:5%">If Free</th>
                            @endif
                            <th>New Expired Date</th>
                            <th>action</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="customers[0]" class="select2" id="customers__0" required>
                                        <option value=""></option>
                                        @foreach($customers as $cu)
                                        <option value="{{$cu->username}}" data-exp-date="{{date('Y-m-d', strtotime($cu->expiration))}}">{{$cu->username}}</option>
                                        @endforeach
                                    </select>
                                </td> 
                                <td>
                                    <input type="text" class="form-control" name="expiration[0]" id="expiration__0" readonly>
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="extension[0]" id="extension__0" required min=1 max="{{\Auth::user()->role && \Auth::user()->role->roleName->role != 'admin' ? '30' : '9999'}}">
                                </td>
                                @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
                                <td><input type="checkbox" class="custom-checkbox" name="is_free[0]" id="free__0" ></td>
                                @endif
                                <td>
                                    <input type="text" class="form-control" name="new_expired_date[0]" id="new_expired_date__0" readonly>
                                </td>
                                <td>
                                    <a class="deleteRow"></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-lg btn-block" id="addrow" ><i class="fa fa-fw fa-plus"></i>Add new</button>
                    <button type="button" class="btn btn-success save-btn">Done</button>
                </form>    
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    var admin = 0;
    @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
    admin = 1;
    @endif
   $(document).ready(function(){
        var counter = 0;

       $('.select2').select2();

        $("#addrow").on("click", function () {
            counter++;
            var newRow = $("<tr>");
            var cols = "";

            cols += '<td><select name="customers['+counter+']" id="customers__'+counter+'" class="select2" required><option value=""></option>';
                @foreach($customers as $cu)
                    cols += '<option value="{{$cu->username}}" data-exp-date="{{date('Y-m-d', strtotime($cu->expiration))}}">{{$cu->username}}</option>'
                @endforeach
                cols +='</select></td>';
            cols += '<td><input type="text" class="form-control" name="expiration['+counter+']" id="expiration__'+counter+'" readonly></td>';
            cols += '<td><input type="text" class="form-control" name="extension['+counter+']" id="extension__'+counter+'" required min=1 max=30></td>';
            if(admin == 1){
            cols += '<td><input type="checkbox" class="custom-checkbox" name="is_free['+counter+']" id="free__'+counter+'"></td>';
            }
            cols +='<td><input type="text" class="form-control" name="new_expired_date['+counter+']" id="new_expired_date__'+counter+'" readonly></td>'

            cols += '<td><a class="ibtnDel a-red btn"><i class="fa fa-fw fa-trash-alt"></i></a></td>';
            newRow.append(cols);

            $("table#custom_table").append(newRow);
            
            $('.select2').select2();
        });



        $("table#custom_table").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();
            counter -= 1
        });

        $('.save-btn').click(()=>{

            if ($('#payment_form').valid()) {
                $.confirm({
                    title: "Please confirm!",
                    content: 'Are you sure all values are OK?',
                    buttons: {
                        OK: {
                            text: 'OK',
                            action: function() {
                                $('.save-btn').attr('disabled', true);
                                    var data = $('#payment_form').serialize();
                                    axios.post('{{route('customer.apply.extension')}}', data).then((res)=>{
                                        toastr.success('success');
                                        setTimeout(()=>{
                                            location.reload();
                                        }, 1000)
                                        
                                    });
                            },
                        },
                        close: {
                            text: 'Cancel',
                            // action: function(){
                            //     form_validator.settings.ignore = "";
                            // },
                        },
                    }
                });
            } 

           
        })

        jQuery(document.body).on('change', 'input[name^=extension]', function(){
            
            var id = $(this).attr('id');
            var rowId = id.split('__')[1];

            var extension = $(this).val();
            var amount = $('input#amount__' + rowId).val();
            if (amount == '')  amount = 0;
            var total_price = amount * extension;
            $('input#total_price__' + rowId).val(total_price);

            updateNewExpiredDate(rowId);

        });

        jQuery(document.body).on('change', 'select[name^=customers]', function(){
            var id = $(this).attr('id');
            var rowId = id.split('__')[1];
            var expiredDate = $('select#customers__' + rowId).find('option:checked').data('exp-date');
            $('input#expiration__' + rowId).val(expiredDate);
            updateNewExpiredDate(rowId);
        });

        function getYMD(_firstDate, duration){

            var firstDate = new Date(_firstDate);
            
            var today = new Date(new Date().toLocaleString("en-US", {timeZone: "Africa/Gaborone"}));
            if (firstDate.getTime() < today.getTime()) {
                firstDate = today;
            }
            var _newdate = firstDate.getTime() + duration * 24 * 60 * 60 * 1000;
            /** 9/22/2020, 2:00:00 AM */
            var newDate = new Date(new Date(_newdate).toLocaleString("en-US", {timeZone: "Africa/Gaborone"}));
            var day =newDate.getDate();
            var month=newDate.getMonth()+1;
            var year=newDate.getFullYear();
            var ymd = year + '-' + month + '-' + day;

            return ymd;
        };

        function updateNewExpiredDate(rowId){
            var type = $('select#type__' + rowId).val();
            var expiredDate = $('select#customers__' + rowId).find('option:checked').data('exp-date');
            var days = $('input#extension__' + rowId).val();
            var ymd = getYMD(expiredDate, days);
            $('input#new_expired_date__' + rowId).val(ymd);
        }
   });

</script>
    
@endpush