@extends('backend.includes.panel')

@section('page_css')
<link href="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.css' }}" rel="stylesheet">
<link href="{{ BE_URL.'plugins/sweetalert/sweetalert.css' }}" rel="stylesheet" type="text/css">
@stop

@section('page_title','Package List')

@section('inner_page_link')
    <li class="breadcrumb-item active">Package List</li>
@stop

@section('main_content') 
	<div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Package List</h4>
                    <div class="m-t-10">
                        <table id="list-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Years</th>
                                    <th>Amount ({{ Config::get('custom.currency') }})</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($packages) && $packages->count() > 0)
                                    @foreach($packages as $key => $package)
                                        <tr data-id="{{ $package->id }}">
                                            <td>{{ ($key+1) }}</td>
                                            <td>{{ $package->name }}</td>
                                            <td>{{ $package->number_of_years }}</td>
                                            <td class="amount-column">{{ $package->amount }}</td>
                                            <td class="action-column"><a class="edit_amount" href="javascript:;"><i class="fas fa-pencil-alt text-inverse m-r-10"></i></a></td>
                                        </tr>                                        
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_script')
    <script type="text/javascript">
            
        var packageActualPrice = 0;
        var packageId = 0;
        var curRow = null;
        var editColumnHtml = '<a class="edit_amount" href="javascript:;"><i class="fas fa-pencil-alt text-inverse m-r-10"></i></a>';
        var resetSaveColumn = '<a class="update_amount" href="javascript:;"><i class="fas fa-save text-inverse m-r-10"></i></a><a class="cancel_amount_update" href="javascript:;"><i class="fas fa-times text-inverse m-r-10"></i></a>';
        var setPriceBox = '<input type="number" class="price_box form-control" style="width:150px;" step="0.10" value="OLD_PRICE" />';

        var resetPriceBox = function(){
            if(curRow){
                curRow.find('.amount-column').html(packageActualPrice);
                curRow.find('.action-column').html(editColumnHtml);
                curRow = null;
            }
        }

        // Script to edit amount of package
        $(document).on('click','.edit_amount',function(){

            // If any row currently editing
            if(curRow){
                resetPriceBox();
            }

            curRow = $(this).closest('tr');
            packageActualPrice = parseFloat(curRow.find('.amount-column').html());
            packageId = parseInt(curRow.attr('data-id'));
            curRow.find('.amount-column').html(setPriceBox.replace('OLD_PRICE',packageActualPrice));
            curRow.find('.action-column').html(resetSaveColumn);

        });

        $(document).on('click','.cancel_amount_update',function(){
            resetPriceBox();
        });

        $(document).on('click','.update_amount',function(){
            if(curRow.find('.price_box').val() && packageId){
                $.ajax({
                    url:'{{ route("update-package-price") }}',
                    type:'POST',
                    data:{packageId:packageId,price:curRow.find('.price_box').val()},
                    dataType:'JSON',
                    success:function(res){
                        if(res.result){
                            packageActualPrice = curRow.find('.price_box').val();
                            resetPriceBox();
                            flash(res.message,'success');
                        }else{                            
                            if(response.errors && response.message){
                                var errorMessage = '';
                                $.each(response.errors,function(i,val){ 
                                    if(!errorMessage){                      
                                        errorMessage = val[0];
                                    }
                                });
                                flash(response.message,'error',errorMessage);
                            }else{
                                flash('Package price not updated. Try again!','error');
                            }
                        }
                    },
                    error:function(){
                        flash('Package price not updated. Try again!');
                    }
                })
            }
        });


    </script>
@stop