@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.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>Campaign</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <form id="form" class="form-horizontal">
                <div class="row">
                    <div class="col-xs-12">
                        <ol class="breadcrumb">
                            <li><a href="{{ url('/dashboard') }}">Home</a></li>
                            <li><a href="{{ url('/campaign') }}">Sponsor & Campaign</a></li>
                            <li><a href="{{ url('/campaign') }}">Voucher Nominal</a></li>
                            <li class="active">New</li>
                        </ol>
                    </div>

                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Campaign Baru</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Nama Campaign</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <input name="name" type="text" class="form-control input-name" placeholder="Nama Campaign">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Sponsor</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <select class="select2 input-sponsor" name="sponsor" style="width:100%;">
                                            <option value="">Pilih Sponsor</option>
                                            @foreach($sponsor as $item_sponsor) 
                                                <option value="{{ $item_sponsor->id }}">{{ $item_sponsor->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Berlaku Sampai</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <input name="berlaku_sampai" type="text" class="form-control input-berlaku" placeholder="Berlaku Sampai">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-2"></div>
                                    <div class="col-xs-12 col-sm-5 text-left">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="input-disable-enable-multiredemp" name="disable-enable-multiredemp">
                                            <label class="control-label" for="disable-enable-multiredemp">Disable Multiple Redemption</label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Voucher Baru</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Nominal</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <div class="input-group">
                                            <div class="input-group-addon">Rp.</div>
                                            <input type="text" class="form-control input-nominal" placeholder="Nominal (Contoh : 50,000)">
                                            <div class="input-group-addon">,-</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Qty</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <input type="number" class="form-control input-qty" placeholder="Quantity">   
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                        <div class="submit">
                                            <button type="button" class="btn btn-primary btn-add-voucher"><i class="fa fa-floppy-o" aria-hidden="true"></i> Tambah Voucher</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>List Voucher</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="form-group">
                                    <table width="100%" id="table-voucher" class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Nominal</th>
                                                <th class="text-center">Qty</th>                                                
                                                <th class="text-center">Subtotal</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Harga</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Total</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <div class="input-group">
                                            <div class="input-group-addon">Rp.</div>
                                            <input type="text" class="form-control input-total" value="0" readonly>   
                                            <div class="input-group-addon">,-</div>
                                        </div>
                                    </div>
                                </div> 

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Diskon / Premium</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <div class="input-group">
                                            <div class="input-group-addon">Rp.</div>
                                            <input name="diskon" type="text" class="form-control input-diskon" placeholder="Diskon Contoh 5.000.000" value="0">
                                            <div class="input-group-addon">,-</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Grand Total</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <div class="input-group">
                                            <div class="input-group-addon">Rp.</div>
                                            <input type="text" class="form-control input-grandtotal" readonly value="0">   
                                            <div class="input-group-addon">,-</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                        <div class="alert_placeholder"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                        <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></span></div>
                                        <div class="submit">
                                            <button type="button" class="btn btn-primary btn-save"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ url('/js/numberformat.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.0.7/cleave.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="{{ url('/js/sponsor_campaign/voucher_nominal/new.min.js') }}"></script>
@endsection