@extends('layouts.app')

@section('title', 'Task')
@section('breadcrumb', 'Task')
@section('sub-breadcrumb')
    <a href="{{route('task.list')}}" class="kt-subheader__breadcrumbs-link">
        Task
    </a>
    <span class="kt-subheader__breadcrumbs-separator"></span>
    <a class="kt-subheader__breadcrumbs-link">
        Create Task
    </a>
@endsection
@section('task', 'kt-menu__item--open kt-menu__item--here')
@section('create-task', 'kt-menu__item--active')
@section('custom-style')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
@endsection
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
            <div class="container">
	            <form id="createMasterStock" action="{{ route('task.store') }}" method="POST" enctype="multipart/form-data">
	                @csrf
	                <div class="row">
	                    <div class="col-md-6">
	                        <div class="form-group">
	                            <label>Title <span style="color:red">*</span></label>
	                            <input name="title" id="title" type="text" class="form-control" placeholder="E.g: Pasang Banner . ." required>
	                        </div>
	                        <div class="form-group">
	                            <label>Description</label>
	                            <textarea name="description" id="description" class="form-control"></textarea>
	                        </div>
	                        <div class="form-group">
	                            <label>Photo Status <span style="color:red">*</span></label>
	                            <select name="photo" id="photo" class="form-control">
	                                <option value="Required">Required</option>
	                                <option value="Not Required">Not Required</option>
	                            </select>
	                        </div>
	                        <div class="form-group">
                                <div id="repeater_list">
                                    <label>Task Checklist</label>
                                    <button type="button" class="btn pull-right mb-2 repeater-add-btn" style="color: #fff; background-color: #1dc9b7;">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                    <div class="items"  data-group="list">
                                        <div class="item-content mb-2">
                                            <div class="input-group control-group">
                                                <input data-name="list" type="text" class="form-control" placeholder="E.g: Membersihkan meja">
                                                <button type="button repeater-remove-btn" class="btn btn-danger remove-btn" style="color: #fff; background-color: #fd397a;">
                                                    <i class="fa fa-trash text-white"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

	                        </div>
	                    </div>
	                    <div class="col-md-6">
	                        <div class="form-group">
	                            <label>Start Date</label>
	                            <input name="date_start" id="date_start" type="date" class="form-control" placeholder="E.g: 15000">
	                        </div>
	                        <div class="form-group">
	                            <label>End Date</label>
	                            <input name="date_end" id="date_end" type="date" class="form-control" placeholder="E.g: 1">
                            </div>
                            <div class="form-group">
	                            <label>Answer Status <span style="color:red">*</span></label>
	                            <select name="status_answer" id="status_answer" class="form-control">
	                                <option value="0">Not Required</option>
	                                <option value="1" selected>Required</option>
	                            </select>
	                        </div>
	                        <div class="form-group">
	                            <label>Task Time Type</label>
                                <select name="type" id="type" class="form-control">
                                    <option value="">All Days</option>
                                    <option value="weekly">Weekly</option>
                                    <option value="monthly">Monthly</option>
                                </select>
                            </div>
                            <div class="form-group" id="display_weekly" style="display:none;">
                                <label> Choose Spesific Days </label><br>
                                @php
                                    $daftar_hari = array(
                                        '1' => 'Senin',
                                        '2' => 'Selasa',
                                        '3' => 'Rabu',
                                        '4' => 'Kamis',
                                        '5' => 'Jumat',
                                        '6' => 'Sabtu',
                                        '7' => 'Minggu'
                                    );
                                @endphp
                                @for ($i = 1; $i <= 7; $i++)
                                <label class="kt-checkbox">
                                    <input type="checkbox" class="outlet-assign-all" name="weekly_days[]" value="{{$i}}"> {{$daftar_hari[$i] ?? '-'}}
                                    <span></span>
                                </label> &nbsp;
                                @endfor
                            </div>
                            <div class="form-group" id="display_monthly" style="display:none;">
                                <div id="repeater_monthly" style="width:200px;">
                                    <label>Add Spesific Date</label>
                                    <button type="button" class="btn pull-right mb-2 repeater-add-btn" style="color: #fff; background-color: #1dc9b7;">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                    <div class="items" data-group="monthly_days">
                                        <div class="item-content mb-2">
                                            <div class="input-group control-group">
                                                <select name="date" data-name="date" class="form-control select-date">
                                                    <option value="">-</option>
                                                    @for($i = 1; $i <= 28; $i++)
                                                    <option value="{{$i}}">{{$i}}</option>
                                                    @endfor
                                                    <option value="98">H-1 end of month</option>
                                                    <option value="99">End of month</option>
                                                </select>

                                                <button type="button repeater-remove-btn" class="btn btn-danger remove-btn" style="color: #fff; background-color: #fd397a;">
                                                    <i class="fa fa-trash text-white"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

	                	<div class="image-add">
	                	</div>
	            	</div>

                    <div>
                        <div class="pull-right">
                            <button type="reset" class="btn btn-secondary mr-2"><i class="fa fa-undo"></i> Reset</button>
                            <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Save</button>
                        </div>
                    </div>
	            </form>

                <div style="clear: both;">
    	            <input type="hidden" name="_token" value="{{ csrf_token() }}">

                    <label class="mt-3">Photo Example</label>
                    <form method="post" action="{{ route('task.store.image') }}" enctype="multipart/form-data" class="dropzone" id="dropzone">
                      	@csrf
                    </form>
                </div>
    		</div>
    	</div>
	</div>
@endsection

@section('custom-script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
    <script src="{{asset('assets/js/repeater.js')}}"></script>
    <script>
        repeater_monthly
        $("#repeater_monthly").createRepeater({
            showFirstItemToDefault: true,
        });
        $("#repeater_list").createRepeater({
            showFirstItemToDefault: true,
        });
    </script>
    <script>
		$(document).ready(function() {
            // render select2 for last child
            $("#repeater_monthly .repeater-add-btn").on('click', function(){
                $('#repeater_monthly .items:last-child .select-date').select2()
            })

            $('#type').change(function(){
                $('#display_weekly').hide()
                $('#display_monthly').hide()


                if ($(this).val() == "weekly") {
                    $('#display_weekly').show()
                }
                if ($(this).val() == "monthly") {
                    $('#display_monthly').show()
                    // render select2 when month selected
                    $('#repeater_monthly .select-date').select2()
                }
            });
        });
    </script>

	<script type="text/javascript">
        Dropzone.options.dropzone = {
            maxFilesize: 12,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();

               	var minNumber = 973234; // le minimum
		        var maxNumber = 9798345; // le maximum
		        var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
               	return time+randomnumber;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 5000,
            removedfile: function(file) {
                var name = file.upload.filename;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    },
                    type: 'POST',
                    url: '{{ route('task.delete.image') }}',
                    data: {filename: name},
                    success: function (data) {
                        console.log("File telah dihapus");
                        console.log(data);
                    },
                    error: function(e) {
                        console.log(e);
                }});

                var fileRef;
                return (fileRef = file.previewElement) != null ?
                fileRef.parentNode.removeChild(file.previewElement) : void 0;
            },
            success: function(file, response) {
            	var html_image = '<input type="hidden" class="'+ response.result.name +'" name="image_upload[]" value="'+ response.result.url +'">';
            	var html_name = '<input type="hidden" class="'+ response.result.name +'" name="image_name[]" value="'+ response.result.name +'">';
            	$('.image-add').append(html_image);
            	$('.image-add').append(html_name);
                // console.log('sukses',response);
            },
            error: function(file, response) {
               return false;
            }
		};
	</script>
    <script type="text/javascript">
        $('#create').click(function (event) {
            event.preventDefault();
            $('#loading').show();
            var form = $('#createMasterStock'),
                url = form.attr('action'),
                method = 'POST';

            form.find('.help-block').remove();
            form.find('.form-group input').removeClass('is-invalid');
            $.ajax({
                url : url,
                method: method,
                data : form.serialize(),
                success: function (response) {
                    $('#loading').hide();
                    // console.log(response);
                    if (response.status == "fail") {
                        $('.form-group input').removeClass('is-invalid');
                        $.each(response.messages, function (key, value) {
                            $('#' + key)
                                .closest('.form-group input')
                                .addClass('is-invalid')
                                .append('<span class="help-block"><strong>' + value + '</strong></span>');
                            $('#' + key)
                                .closest('.form-group')
                                .append('<span class="help-block"><strong>' + value + '</strong></span>');
                        });
                    }
                    if (response.status == "success") {
                        swal.fire({
                            type : 'success',
                            title : 'Success!',
                            timer: 5000,
                            text : 'Data telah disimpan'
                        }).then((result) => {
                            if (result.value) {
                                $(location).attr('href', "{{route('stock.data.stock')}}");
                            }
                                $(location).attr('href', "{{route('stock.data.stock')}}");
                        });
                    }
                },
                error : function (xhr) {
                    $('#loading').hide();
                    swal.fire({
                        type : 'error',
                        title : 'Failed!',
                        text : 'An error Occured!'
                    });

                }
            })
        });
    </script>
@endsection