@extends('layouts.app')

@section('title', 'Edit Task')
@section('breadcrumb', 'Edit Task')
@section('sub-breadcrumb')
    <a href="{{route('task.list')}}" class="kt-subheader__breadcrumbs-link">
        List
    </a>
    <span class="kt-subheader__breadcrumbs-separator"></span>
    <a class="kt-subheader__breadcrumbs-link">
        Edit Task
    </a>
@endsection
@section('task', 'kt-menu__item--open kt-menu__item--here')
@section('list-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">

	<style type="text/css">
		.remove {
            cursor: pointer;
        }
        .select2-container{
            flex: 1;
        }
	</style>
@endsection
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
            <div class="container">
	            <form id="createMasterStock" action="{{route('task.update')}}" 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 value="{{ $result['title'] }}">
	                            <input name="id_task" id="id_task" type="hidden" class="form-control" placeholder="E.g: Pasang Banner . ." required value="{{ $result['id'] }}">
	                        </div>
	                        <div class="form-group">
	                            <label>Description</label>
	                            <textarea name="description" id="description" class="form-control">{{ $result['description'] }}</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" {{($result['photo'] == 'Required') ? 'selected' : ''}}>Required</option>
	                                <option value="Not Required" {{($result['photo'] == 'Not Required') ? 'selected' : ''}}>Not Required</option>
	                            </select>
	                        </div>
	                        <div class="form-group">
	                        	<label>Task Checklist</label>
	                            <div class="input-group control-group mb-2">
	                            	<input name="list[]" type="text" class="form-control" disabled>
						          	<div class="input-group-btn">
						            	<button class="btn btn-sm btn-success btn-t-checklist" style="line-height: 2.1;" type="button"><i class="fa fa-plus text-white"></i></button>
						          	</div>
                                </div>
                                @if (!empty($result['brand_task_checklists']))
                                    @foreach ($result['brand_task_checklists'] as $key => $value)
                                        <div class="control-group input-group mb-2">
                                            <input type="hidden" name="id_list[]" value="{{ $value['id'] }}">
                                              <input name="list[]" type="text" class="form-control" placeholder="E.g: Tepat disamping pintu . ." value="{{ $value['item'] }}">
                                              <div class="input-group-btn">
                                                  <button class="btn btn-sm btn-danger" style="line-height: 2.1;" type="button"><i class="fa fa-trash text-white"></i></button>
                                            </div>
                                          </div>
                                    @endforeach
                                @endif
                                <div class="increment"></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" value="{{ $result['date_start'] }}">
	                        </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" value="{{ $result['date_end'] }}">
                            </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" {{($result['status_answer'] == '0') ? 'selected' : ''}}>Not Required</option>
	                                <option value="1" {{($result['status_answer'] == '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="" {{($result['type'] == '') ? 'selected' : ''}}>All Days</option>
                                    <option value="weekly" {{($result['type'] == 'weekly') ? 'selected' : ''}}>Weekly</option>
                                    <option value="monthly" {{($result['type'] == 'monthly') ? 'selected' : ''}}>Monthly</option>
                                </select>
                            </div>
                            @php
                                $daftar_hari = array(
                                    '1' => 'Senin',
                                    '2' => 'Selasa',
                                    '3' => 'Rabu',
                                    '4' => 'Kamis',
                                    '5' => 'Jumat',
                                    '6' => 'Sabtu',
                                    '7' => 'Minggu'
                                );
                            @endphp
                            @if ($result['type'] == "weekly")
                                <div class="form-group" id="display_weekly">
                                    <label> Choose Spesific Days </label><br>
                                    @for ($i = 1; $i <= 7; $i++)
                                    <label class="kt-checkbox">
                                        <input type="checkbox" class="outlet-assign-all" name="weekly_days[]" value="{{$i}}"
                                        @foreach ($result['brand_task_customs']  as  $key => $value)
                                            {{($value['value'] == $i) ? 'checked' : ''}}
                                        @endforeach
                                        > {{$daftar_hari[$i] ?? '-'}}
                                        <span></span>
                                    </label> &nbsp;
                                    @endfor
                                </div>
                            @endif

                            @if ($result['type'] == "monthly")
                                <div class="form-group" id="display_monthly">
                                    <label>Add Spesific Date</label>
                                    <div class="input-group control-group mb-2"  style="width:200px;">
                                        <input name="monthly_days[]" type="text" class="form-control" disabled>
                                        <div class="input-group-btn">
                                            <button class="btn btn-sm btn-success add_days" type="button" style="line-height: 2.1;"><i class="fa fa-plus text-white"></i></button>
                                        </div>
                                    </div>
                                    @if (!empty($result['brand_task_customs']))
                                        @foreach ($result['brand_task_customs'] as $key => $value)
                                            <div class="control-group input-group mb-2"  style="width:200px;">
                                                <select name="monthly_days[]" class="select-date">
                                                    <option value="">-</option>
                                                    @for($i = 1; $i <= 28; $i++)
                                                    <option value="{{$i}}" {{$value['value']==$i ? "selected" : ""}}>{{$i}}</option>
                                                    @endfor
                                                    <option value="98" {{$value['value']=="98" ? "selected" : ""}}>H-1 end of month</option>
                                                    <option value="99" {{$value['value']=="99" ? "selected" : ""}}>End of month</option>
                                                </select>
                                                <div class="input-group-btn">
                                                    <button class="btn btn-sm btn-danger" style="line-height: 2.1;" type="button"><i class="fa fa-trash text-white"></i></button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif

                                    {{-- place for repeater --}}
                                    <div class="increment_days">
                                    </div>
                                </div>
                            @endif

                            <div class="form-group" id="display_weekly" style="display:none;">
                                <label> Choose Spesific Days </label><br>
                                @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;">
	                        	<label>Add Spesific Date</label>
                                <div class="input-group control-group mb-2"  style="width:200px;">
                                    <input name="monthly_days[]" type="text" class="form-control" disabled>
                                    <div class="input-group-btn">
                                        <button class="btn btn-sm btn-success add_days" type="button" style="line-height: 2.1;"><i class="fa fa-plus text-white"></i></button>
                                    </div>
                                </div>
	                            <div class="input-group control-group increment_days_x mb-2"  style="width:200px;">
                                    <select name="monthly_days[]" class="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>
						          	<div class="input-group-btn">
						            	<button class="btn btn-sm btn-danger" style="line-height: 2.1;" type="button"><i class="fa fa-trash text-white"></i></button>
						          	</div>
						        </div>

                                {{-- place for repeater --}}
                                <div class="increment_days">
                                </div>
                            </div>
	                    </div>
	                    <div class="image-add">
	                	</div>
	                </div>

                    <div>
                        <div class="pull-right">
                            <button class="btn btn-secondary btn-back" type="button">Back</button>
                            <button type="reset" class="btn btn-warning 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>
                	@if (!empty($result['brand_task_images']))
            			<div class="row">
                    		@foreach ($result['brand_task_images'] as $key => $value)
                				<div class="col-md-2 text-center kelas{{ $value['id'] }}">
    					    		<img src="{{ $value['image_url'] }}" height="100">
    					    		<p class="remove" data-id="{{ $value['id'] }}">Remove file</p>
                				</div>
                    		@endforeach
            			</div>
                	@endif
                    <form method="post" action="{{ route('task.store.image') }}" enctype="multipart/form-data" class="dropzone" id="dropzone">
                      	@csrf
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="clone hide" style="display: none">
		<div class="control-group input-group mb-2">
			<input type="hidden" name="id_list[]" value="">
	      	<input name="list[]" type="text" class="form-control" placeholder="E.g: Tepat disamping pintu . .">
	      	<div class="input-group-btn">
              	<button class="btn btn-sm btn-danger" style="line-height: 2.1;" type="button"><i class="fa fa-trash text-white"></i></button>
            </div>
      	</div>
    </div>
    <div class="clone_days hide" style="display: none">
		<div class="control-group input-group mb-2" style="width:200px;">
            <select name="monthly_days[]" class="select-date-i">
                <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>
            <div class="input-group-btn">
              	<button class="btn btn-sm delete_days" type="button" style="color: #fff; background-color: #fd397a; line-height: 2.1;"><i class="fa fa-trash text-white"></i></button>
            </div>
      	</div>
    </div>
@endsection

@section('custom-script')
    <script>
        $(document).ready(function() {
            $('.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()
                }
            });
        });

        $(".btn-back").on("click", function(){
            window.history.back();
        });
    </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
	<script type="text/javascript">
        $(document).ready(function() {
            $(".btn-t-checklist").click(function(){
                var html = $(".clone").html();
                $(".increment").before(html);
            });

            $("body").on("click",".btn-danger",function(){
                $(this).parents(".control-group").remove();
            });

            $(".add_days").click(function(){
                var html = $(".clone_days").html();
                $(".increment_days").append(html);
                // render select2 for last child
                $(".increment_days .control-group:last-child .select-date-i").select2()
            });

            $("body").on("click",".delete_days",function(){
                $(this).parents(".control-group").remove();
            });
        });
    </script>

	<script type="text/javascript">
		$(document).on('click', '.remove', function() {
			var id = $(this).data('id');
			$.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                type: 'POST',
                url: '{{ route('task.delete.data.image') }}',
                data: {id: id},
                success: function (data) {
                    if (data.status == 'success') {
                        console.log("File telah dihapus");
                        console.log(data);

                        $('.kelas'+id).remove();
                	} else {
                        console.log(data);
                		alert('Remove file failed');
                	}
                },
                error: function(e) {
                    console.log(e);
            }});
		})
	</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(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 has been saved!'
                        }).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