form

@extends('layouts.backend')

@section('title', 'Upload Royalti')

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

<style type="text/css">
input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
</style>
<style>
        .ui-datepicker-calendar {
        display: none;
    }
    </style>

@section('content')

{{ Breadcrumbs::render('royalty.create') }}

<div class="container-fluid">
    <!-- File Upload | Drag & Drop OR With Click & Choose -->
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <h2>
                        Upload Daftar Royalti
                    </h2>
                </div>
                <div class="body clearfix">
                    <div class="col-md-12">
                        <form action="" id="download-template">
                            <input type="hidden" name="period_start_date" value="">
                            <input type="hidden" name="period_end_date" value="">
                            <input type="hidden" name="memberTypes" value="">
                        </form>
                        <form  autocomplete="off" action="{{route('royalty.upload-process')}}" method="post" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            <div class="col-md-5 col-md-offset-4" style="margin-top: 40px;">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <div class="btn btn-default browse-button">
                                            <span class="browse-button-text">
                                                <i class="fa fa-folder-open">
                                                </i>
                                                Browse
                                            </span>
                                            <input accept=".xlsx" name="attachment" type="file"/>
                                        </div>
                                        <button class="btn btn-default clear-button" style="display:none;" type="button">
                                            <span class="fa fa-times"></span>
                                            Clear
                                        </button>
                                    </span>
                                    <input class="form-control filename" disabled="disabled" placeholder="Please click on browse button and select a pdf file" type="text" style="padding-left: 10px;">
                                    </input>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <a href="javascript:;" class="btn btn-success waves-effect" onclick="downloadTemplate()">
                                    <i class="material-icons">drafts</i>
                                    <span>Download Template</span>
                                </a>
                                <hr>
                                <div class="col-md-4">
                                    <b>
                                        Tipe Anggota
                                    </b>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">
                                                store
                                            </i>
                                        </span>
                                        <select class="form-control show-tick" name="memberTypes">
                                            @foreach($memberTypes as $value)
                                            <option value="{{$value->id}}">
                                                {{$value->name}}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <b>
                                        Period Start Date
                                    </b> ( * harus di isi )
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">
                                                store
                                            </i>
                                        </span>
                                        <input class="yearmonth" type="text" id="start" name="period_start_date">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <b>
                                        Period End Date
                                    </b> ( * harus di isi )
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">
                                                store
                                            </i>
                                        </span>
                                        <input class="yearmonth" type="text" id="end" name="period_end_date" >
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <a class="btn btn-danger waves-effect" href="{{url()->previous()}}" style="float: left;" type="submit">
                                    BATAL SIMPAN
                                </a>
                                <button class="btn btn-primary waves-effect" style="float: right;" type="submit">
                                    SIMPAN ROYALTI
                                </button>
                            </div>
                        </form>
                </div>
            </div>
        </div>
    </div>
    <!-- #END# File Upload | Drag & Drop OR With Click & Choose -->
</div>

@endsection

@push('scripts')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<script type="text/javascript">
	// Show filename, show clear button and change browse
	// Button text when a valid extension file is selected
	$(".browse-button input:file").change(function (){
        $("input[name='attachment']").each(function() {
            var fileName = $(this).val().split('/').pop().split('\\').pop();
                $(".filename").val(fileName);
                $(".browse-button-text").html('<i class="fa fa-refresh"></i> Change');
                $(".clear-button").show();
        });
	});
    $('.clear-button').click(function(){
	    $('.filename').val("");
	    $('.clear-button').hide();
	    $('.browse-button input:filenamele').val("");
	    $(".browse-button-text").html('<i class="fa fa-folder-open"></i> Browse');
	});





$('.yearmonth').datepicker({
	yearRange: '-0:+1',
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'yy-mm',
  onClose: function(dateText, inst) {
    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year, month, 1));
  }

});
    // function download template excel
    function downloadTemplate() {
        var form = $('#download-template'),
            periodStartDate = form.find('input[name="period_start_date"]'),
            memberTypes = form.find('input[name="memberTypes"]'),
            periodEndDate = form.find('input[name="period_end_date"]'),
            $periodStartDate = $('input#start').val(),
            $memberTypes = $('select[name="memberTypes"] option:selected').val();
            $periodEndDate = $('input#end').val(),

        window.open("{{ url('/admin/royalty/downloadTemplateRoyaltyExcel') }}/" + $periodStartDate + "/" + $memberTypes + "/" + $periodEndDate)
        periodStartDate.val($periodStartDate);
        memberTypes.val($memberTypes);
        periodEndDate.val($periodEndDate);
    }
    // end function download template excel
</script>

@endpush