@extends('layouts.layout')

@section('body_class', 'nav-md')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
@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</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ url('/dashboard') }}">Home</a></li>
                        <li><a href="{{ url('/point_system/program_list') }}">Program List</a></li>
                        <li class="active">Create Program</li>
                    </ol>
                </div>

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Create Program</h2>
                            <div class="clearfix"></div>
                        </div>
                        <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 Program :</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="text" name="name" class="form-control" >
                                        </div>
                                    </div>
                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Pilih Feature :</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <select class="form-control input-type" name="type">
                                                <option value="">Pilih Feature</option>
                                                <option value="purchase">Purchase</option>
                                                <option value="lakusimpan">Laku Simpan</option>
                                                <option value="referral">Referral</option>
                                            </select>
                                        </div>
                                    </div> 
                                    <div class="form-group" >
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Pilih Tipe Skema :</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <select class="form-control input-schema" name="schema">
                                                <option value="">Pilih Skema</option>
                                            </select>
                                        </div>
                                    </div>           
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Tanggal Mulai :</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="date" name="start_date" class="form-control bs-input-datepicker" placeholder="Date Start" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label" style="text-align:left;">Tanggal Selesai :</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <input type="date" name="end_date" class="form-control bs-input-datepicker" placeholder="Date End" required>
                                        </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>
        @include('includes.footer')
    </div>
</div>
@endsection


@section("scripts")
<script type="text/javascript">
    var purchase_schema = {!! json_encode($purchase_schema) !!};
    var lakusimpan_schema = {!! json_encode($lakusimpan_schema) !!};
    var referral_schema = {!! json_encode($referral_schema) !!};

    $(".input-type").on("change", function() {
        var html = "<option>- Pilih Skema -</option>";
        var type = $(this).val();
     
        if(type=='purchase'){
            $.each(purchase_schema, function(index, schema) {
                html += "<option value='"+ schema.id +"' >"+schema.name+"</option>";
            });
        }
        if(type=='lakusimpan'){
            $.each(lakusimpan_schema, function(index, schema) {
                html += "<option value='"+ schema.id +"' >"+schema.name+"</option>";
            });
        }
        if(type=='referral'){
            $.each(referral_schema, function(index, schema) {
                html += "<option value='"+ schema.id +"' >"+schema.name+"</option>";
            });
        }
       
        $(".input-schema").html(html);
     })


    $(".btn-submit").click(function(e) {      
        e.preventDefault();
        var type = $(".input-type").val();
        var schema = $(".input-schema").val();
        var name = $("input[name=name]").val();
        var start_date = $("input[name=start_date]").val();
        var end_date = $("input[name=end_date]").val();

        $.ajax({
            url: "/point_system/program_list/create/save",
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: { 
                type: type,
                schema: schema,
                name: name,
                start_date: start_date,
                end_date: end_date,
            },
            success: function(response) {                
                alert(response.message);                
                location.href = '/point_system/program_list';
            },
            error: function(response) {
                var data = response.responseJSON;  
                alert(data.error);                        
            }
        });
        return false;
    })

    $("document").ready(function(){
        setTimeout(function(){
            $("#message").remove();
        }, 3000 ); 

});
</script>
@endsection