@extends('layouts.member-app')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-8 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }} </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-8 col-md-8 col-xs-12 text-right">
        <a href="{{ route('member.news.index') }}" class="btn btn-outline btn-success btn-sm">@lang('modules.news.all')
            <i class="fa fa-plus" aria-hidden="true"></i></a>
        <ol class="breadcrumb">
            <li><a href="{{ route('member.dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">{{ __($pageTitle) }}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection
@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/summernote/dist/summernote.css') }}">
<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.0.0/css/bootstrap-datetimepicker.min.css" />
@endpush

@section('content')
<div class="row">
    <div class="col-xs-12">
        <div class="white-box">
            {!! Form::open(['route'
            =>'member.news.create','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" required="" name="title" placeholder="" />
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group">
                        <label>Package Sponsor</label>
                        <select class="form-control clear_after_save" name="package_sponsor_id" id="package_sponsor_id">
                            <option value="">No Sponsor</option>
                                                    </select>
                    </div>
                </div>
                <div class="col-lg-4 form_only_sponsor" style="display:none">
                    <div class="form-group">
                        <label>Release Date</label>
                        <input type="text" class="form-control" name="release_date" id="release_date">
                    </div>
                </div>
                <div class="col-lg-4 form_only_sponsor" style="display:none">
                    <div class="form-group">
                        <label>Expired After Day</label>
                        <input type="text" class="form-control" id="expired_after_day" disabled>
                    </div>
                </div>
                <div class="col-lg-4 form_only_sponsor" style="display:none">
                    <div class="form-group">
                        <label>Price</label>
                        <input type="text" class="form-control" id="price_sponsor" disabled>
                    </div>
                </div>
            </div>



            <div class="form-group">
                <label>News Content</label>
                <textarea name="content" rows="10" required="" cols="100" class="form-control summernote"></textarea>
            </div>
            <div class="form-group">
                <label class="control-label">@lang('app.attachment')</label>
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput"> <i
                            class="glyphicon glyphicon-file fileinput-exists"></i> <span
                            class="fileinput-filename"></span></div>
                    <span class="input-group-addon btn btn-default btn-file"> <span
                            class="fileinput-new">@lang('app.selectFile')</span> <span
                            class="fileinput-exists">@lang('app.change')</span>
                        <input type="file" name="file" id="image">
                    </span> <a href="#" class="input-group-addon btn btn-default fileinput-exists"
                        data-dismiss="fileinput">@lang('app.remove')</a>
                </div>
                <small id="message_upload_attachment">Select Type Of Image Only (PNG,JPG,JPEG) Maximum Size 2mb</small>
            </div>
            <div class="form-group">
                <input type="hidden" name="sponsor_name" id="input_sponsor_name">
                <input type="hidden" name="expired_after_day" id="input_expired_day">
                <input type="hidden" name="price_sponsor" id="input_price_sponsor">
                <button class="btn btn-primary" id="btn_submit_news">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection
<!-- .row -->

@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/multiselect/js/jquery.multi-select.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="{{ asset('js/moment.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/summernote/dist/summernote.min.js') }}"></script>
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.0.0/js/bootstrap-datetimepicker.min.js">
</script>
<script>
    $('.summernote').summernote({
    height: 400, // set editor height
            minHeight: null, // set minimum height of editor
            maxHeight: null, // set maximum height of editor
            focus: false,
            toolbar: [
                    // [groupName, [list of button]]
                    ['style', ['bold', 'italic', 'underline', 'clear']],
            ['insert', ['link', 'picture', 'video', 'file']],
            ['font', ['strikethrough']],
            ['fontsize', ['fontsize']],
            ['para', ['ul', 'ol', 'paragraph']],
            ["view", ["fullscreen"]]
            ]
    });
    $(".select2").select2({
    formatNoMatches: function () {
    return "{{ __('messages.noRecordFound') }}";
    }
    });
    var table;
    $(function() {
    loadTable();
    $('body').on('click', '.sa-params', function(){
    var id = $(this).data('user-id');
    swal({
    title: "@lang('messages.sweetAlertTitle')",
            text: "@lang('messages.confirmation.recoverDeleteUser')",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "@lang('messages.deleteConfirmation')",
            cancelButtonText: "@lang('messages.confirmNoArchive')",
            closeOnConfirm: true,
            closeOnCancel: true
    }, function(isConfirm){
    if (isConfirm) {

    var url = "{{ route('member.employees.destroy',':id') }}";
    url = url.replace(':id', id);
    var token = "{{ csrf_token() }}";
    $.easyAjax({
    type: 'POST',
            url: url,
            data: {'_token': token, '_method': 'DELETE'},
            success: function (response) {
            if (response.status == "success") {
            $.easyBlockUI('#employees-table');
            loadTable();
            $.easyUnblockUI('#employees-table');
            }
            }
    });
    }
    });
    });
    $('body').on('click', '.assign_role', function(){
    var id = $(this).data('user-id');
    var role = $(this).data('role-id');
    var token = "{{ csrf_token() }}";
    $.easyAjax({
    url: '{{route('member.employees.assignRole')}}',
            type: "POST",
            data: {role: role, userId: id, _token : token},
            success: function (response) {
            if (response.status == "success"){
            $.easyBlockUI('#employees-table');
            loadTable();
            $.easyUnblockUI('#employees-table');
            }
            }
    })

    });
    });
    function loadTable(){
    window.LaravelDataTables["employees-table"].draw();
    }

    $('.toggle-filter').click(function () {
    $('#ticket-filters').toggle('slide');
    })

            $('#apply-filters').click(function () {
    $('#employees-table').on('preXhr.dt', function (e, settings, data) {
    var employee = $('#employee').val();
    var status = $('#status').val();
    var role = $('#role').val();
    var skill = $('#skill').val();
    var designation = $('#designation').val();
    var department = $('#department').val();
    data['employee'] = employee;
    data['status'] = status;
    data['role'] = role;
    data['skill'] = skill;
    data['designation'] = designation;
    data['department'] = department;
    });
    loadTable();
    });
    $('#reset-filters').click(function () {
    $('#filter-form')[0].reset();
    $('#status').val('all');
    $('.select2').val('all');
    $('#filter-form').find('select').select2();
    loadTable();
    })

            function exportData(){

            var employee = $('#employee').val();
            var status = $('#status').val();
            var role = $('#role').val();
            var url = '{{ route('member.employees.export', [':status' ,':employee', ':role']) }}';
            url = url.replace(':role', role);
            url = url.replace(':status', status);
            url = url.replace(':employee', employee);
            window.location.href = url;
            }

    $('#image').on('change', function(){
    var cek_size = this.files[0].size;
    var cek_type = this.files[0].type;
    var type = cek_type.replace('image/', '');
    if (type == 'jpeg' || type == 'png' || type == 'jpg' || type == 'gif') {
    if (cek_size >= 2048000) {
    $('#message_upload_attachment').css('color', 'red')
            $('#message_upload_attachment').text('Maximum Size 2MB')
            $('#btn_submit_news').attr('disabled', true)
    } else{
    $('#message_upload_attachment').css('color', 'green')
            $('#message_upload_attachment').text('Image Accept')
            $('#btn_submit_news').attr('disabled', false)
    }
    } else{
    $('#message_upload_attachment').css('color', 'red')
            $('#message_upload_attachment').text('Only Image Accept')
            $('#btn_submit_news').attr('disabled', true)
    }
    })
    $('#release_date').datetimepicker({
         format: 'YYYY-MM-DD HH:mm',
    });
    
    $('#package_sponsor_id').on('change', function(){
        var x = $(this).val(); 
        var amount = $(this).find(':selected').data('amount');
        var expired = $(this).find(':selected').data('expired');
        var sponsor = $(this).find(':selected').data('name')
        if (x != '') {
            $('.form_only_sponsor').show();
            $('#expired_after_day').val(expired);
            $('#price_sponsor').val('Rp.' + (new Intl.NumberFormat().format(amount)));
            $('#input_expired_day').val(expired);
            $('#input_price_sponsor').val(amount);
            $('#input_sponsor_name').val(sponsor);
        }else{
            $('.form_only_sponsor').hide();
            $('#expired_after_day').val('');
            $('#price_sponsor').val('');
            $('#input_expired_day').val('');
            $('#input_price_sponsor').val('');
            $('#input_sponsor_name').val('');
        }
    })

</script>
@endpush