@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>Upload Partner Email Voucher Transaction</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            @if(count($errors) > 0)
                <div class="alert alert-danger">
                    Upload Validation Error<br><br>
                    <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                     @endforeach
                    </ul>
                </div>
            @endif

            @if($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>
            @endif
            
            <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-3 control-label">PO Number (unique):</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" name="po_number" class="form-control" placeholder="Po Number.." value="">
                            </div>
                        </div>      
                        
                        <div class="form-group" >
                            <label class="col-xs-12 col-sm-3 control-label">Campaign name (unique) :</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" name="campaign_name" class="form-control" placeholder="Campaign name..." value="">
                            </div>
                        </div>    
                        
                        <div class="form-group" >
                            <label class="col-xs-12 col-sm-3 control-label">Voucher Valid To :</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="date" name="valid_date" class="form-control" placeholder="Valid untill.." value="">
                            </div>
                        </div>  
                        
                        <div class="form-group" >
                            <label for="due_date" class="col-xs-12 col-sm-3 control-label">Due Date Invoice (days) :</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="number" name="due_date" class="form-control" placeholder="Due Date..." value="">
                            </div>
                        </div>     
                        
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">Merchant (ID) :</label>
                            <div class="col-xs-12 col-sm-9">
                                <input list="merchant_id" name="merchant_id" id="input_merchant_id" class="form-control" >
                                <datalist id="merchant_id" searchable="Search here" >
                                    @foreach($merchants as $merchant)
                                        <option value="{{ $merchant->id }}">{{ $merchant->id }} - {{ $merchant->name }}</option>
                                    @endforeach
                                </datalist>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">Select Voucher Type :</label>
                            <div class="col-xs-12 col-sm-9">
                            <select name="sku_type"  class="form-control">
                                <option value="1" selected>Nominal</option>
                                {{-- <option value="2">Gramasi</option> --}}
                                </select>
                            </div>
                        </div>

                        <div class="form-group" >
                            <label class="col-xs-12 col-sm-3 control-label">Select File (email, name, nominal):</label>
                            <div class="col-xs-12 col-sm-9">
                                <input id="file_upload" type="file" class="form-control" name="select_file" />
                                .csv
                            </div>
                        </div>     
                        
                        <div class="form-group">
                            <div class="col-xs-12 col-sm-9 col-sm-offset-3">
                                <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                <div class="submit">        
                                    <button type="submit" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i>Save</button>
                               </div>
                            </div>
                        </div>                       
                    </form>  
                </div>
            </div>            
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    $("#form").on("submit", function() {
        $("#form").find('.loading').removeClass('hidden');
        $("#form").find('.submit').addClass('hidden');
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: '/partner_voucher_blast/import_transaction',
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: formData,
            enctype: 'multipart/form-data',
            processData: false, 
            contentType: false, 
            success: function(response) {                
                alert(response.message);
                $("#form").find('.loading').addClass('hidden');
                $("#form").find('.submit').removeClass('hidden');
            },
            error: function(response) {
                var data = response.responseJSON;  
                if(data.error_row != undefined) {
                    alert(data.error + ' In row = ' + data.error_row + '!'); 
                } else  {
                    alert(data.error);
                }                
                $("#form").find('.loading').addClass('hidden');
                $("#form").find('.submit').removeClass('hidden');
            }
        });
        return false;
    })
</script>
@endsection