@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
<style>
    ul {margin:0;}
</style>
@endsection
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3>Point System - Create Reward</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">Point System</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Create Reward</li>
                </ol>
            </nav>

            <hr>        
            
            <div class="col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Create reward</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="row">  
                            <div class="col-xs-12">           
                                <form id="form" class="form-horizontal" method="post" }}"> 
                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Nama Reward</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="text" name="reward_name" class="form-control" placeholder="Please fill.." value="">
                                        </div>
                                    </div>  

                                    <div class="form-group" >
                                        <label  class="col-xs-12 col-sm-2 control-label" for="sponsor" style="text-align:left;">Sponsor</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <select name="id_sponsor" class="form-control" id="sponsor">
                                                <option value="">--- Choose a sponsor ---</option>
                                                @if(!empty($sponsors))
                                                    @foreach($sponsors as $list)
                                                        <option value="{{ $list->id }}">{{ $list->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>                            
                                    </div>
                                    
                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Point yang dibutuhkan</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="number" name="point_usage" class="form-control" placeholder="Please fill.." value="">
                                        </div>
                                    </div> 

                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Jumlah Reward</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="number" name="quantity" class="form-control" placeholder="Please fill.." value="">
                                        </div>
                                    </div> 

                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Maksimal penggunaan reward</label>
                                        <!-- sekali/berkali -->
                                        <div class="col-xs-12 col-sm-3">
                                            <select name="max_usage" class="form-control" id="sponsor">
                                                <option value="">--- Choose maximum used ---</option>
                                                <option value="1">Sekali</option>
                                                <option value="0">Berkali kali</option>                                    
                                            </select>
                                        </div>
                                    </div> 

                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Start Date</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="date" name="start_date" class="form-control" placeholder="Please fill.." value="">
                                        </div>
                                    </div> 

                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">End Date</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="date" name="end_date" class="form-control" placeholder="Please fill.." value="">
                                        </div>
                                    </div> 

                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Jenis Reward</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <select name="id_reward_type" class="form-control" id="sponsor">
                                                <option value="">--- Choose reward type ---</option>
                                                @if(!empty($reward_type))
                                                    @foreach($reward_type as $list)
                                                        <option value="{{ $list->id }}">{{ $list->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div> 
                                
                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Besar Potongan(rupiah)</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="number" name="nominal" class="form-control" placeholder="Please fill.." value="">
                                        </div>
                                    </div> 

                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Masa Berlaku Voucher (hari/setelah end date reward)</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="number" name="voucher_expiration" class="form-control" placeholder="Please fill.." value="">
                                        </div>
                                    </div> 

                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Deskripsi</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <textarea name="deskripsi" class="form-control" value="" rows="4" ></textarea>
                                        </div>
                                    </div>
                            
                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Syarat dan Ketentuan</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <textarea name="sk" class="form-control" value="" rows="4" ></textarea>
                                        </div>
                                    </div> 

                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Cara Penggunaan</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <textarea name="cara_penggunaan" class="form-control" value="" rows="4" ></textarea>
                                        </div>
                                    </div> 
                                    
                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Image(1280x720)</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="file" name="image" class="form-control" placeholder="Please fill.." value="">
                                        </div>
                                    </div> 
                                    
                                    <div class="form-group">                            
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;"></label>
                                        <div class="col-xs-12 col-sm-3">        
                                            <button class="btn btn-primary btn-submit" style="width:100%;"> Save</button>
                                        </div>                            
                                    </div>                       
                                </form>  
                            </div>
                        </div>  
                    </div>
                </div>
            </div> 
            
            <div class="col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>List</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="text-center">ID</th>                                    
                                    <th class="text-center">Nominal</th>
                                    <th class="text-center">Quantity</th>
                                    <th class="text-center">Subtotal</th>
                                    <th class="text-center">Action</th>                                   
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $total = 0;
                                @endphp
                                @if(!empty($search_lists) && (is_array($search_lists) || is_object($search_lists)))
                                    @forelse($search_lists as $list)
                                        <tr>                                                
                                            <td class="text-center">{{ $list->id }}</td>                                            
                                            <td class="text-center">{{ $list->nominal }}</td>
                                            <td class="text-center">{{ $list->reward_quantity }}</td>
                                            <td class="text-center">Rp. {{ number_format($list->nominal * $list->reward_quantity, 2) }}</td>
                                            @php    
                                                $total += $list->nominal * $list->reward_quantity                  
                                            @endphp                                                      
                                            <td class="text-center"><button class="btn btn-danger btn-delete-reward-temp" value="{{ $list->id }}"><i class="fa fa-trash" aria-hidden="true"></i></a></td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td class="text-center" colspan="6">No Data</td>
                                        </tr>
                                    @endforelse
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Total Nilai Reward</h2>
                        <div class="clearfix"></div>
                    </div>                    
                    <div class="x_content">
                        <h2><strong>Rp. {{ number_format($total, 2) }}</strong></h2>
                        <br>
                        <button class="btn btn-primary btn-create-rewards">Create Rewards</button>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    $(".btn-submit").on("click", function() {    
        var fdata = new FormData($("#form")[0]);       
        $.ajax({
            url: '/point_system/back_office_point_system_reward/save_reward_temp_process',
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: fdata,
            processData: false,
            contentType: false,
            enctype:"multipart/form-data",
            success: function(response) {
                alert(response.success);  
                setTimeout(function(){
                    window.location.reload(); 
                }, 1000);                                     
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);               
            }
        });
        return false;
    });

    $(".btn-delete-reward-temp").on("click", function() {       
        var id = $('.btn-delete-reward-temp').val();
        $.ajax({            
            url: '/point_system/back_office_point_system_reward/delete_reward_temp',
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: { id : id},            
            success: function(response) {
                alert(response.success);  
                setTimeout(function(){
                    window.location.reload(); 
                }, 1000);                                     
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);   
                setTimeout(function(){
                    window.location.reload(); 
                }, 1000);                
            }
        });
        return false;
    });

    $(".btn-create-rewards").on("click", function() {       
        $.ajax({            
            url: '/point_system/back_office_point_system_reward/save_reward_process',
            method: "GET",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: { },            
            success: function(response) {
                alert(response.success);  
                setTimeout(function(){
                    window.location.reload(); 
                }, 1000);                                     
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);   
                setTimeout(function(){
                    window.location.reload(); 
                }, 1000);                
            }
        });
        return false;
    });
</script>
@endsection