@extends('templates.structure') 
@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<style>
    .ck-content { min-height:500px; max-height:auto; }
    input[type="file"] {
    display: block;
    }
    .imageThumb {
    max-height: 75px;
    border: 1px solid #6c757d;
    padding: 1px;
    cursor: pointer;
    }
    .pip {
    display: inline-block;
    margin: 10px 10px 0 0;
    }
    .remove {
    display: block;
    background: #444;
    border: 1px solid #6c757d;
    color: white;
    text-align: center;
    cursor: pointer;
    }
    .remove:hover {
    background: white;
    color: black;
    }

</style>
@endsection
@section('content')

<div class="row">
    <div class="col-md-12">        
        <div class="card">          
            <form role="form" id="form">
                <div class="card-body">                    
                    <div class="row">                        
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control">
                            </div>                                
                        </div>                            
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" rows="5" class="form-control"></textarea>
                            </div>                                
                        </div>                                                      
                        <div class="col-md-6">                                
                            <div class="form-group">
                                <label>Location</label>
                                <select name="location_id" class="form-control">                                    
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">                                
                            <div class="form-group">
                                <label>Type</label>
                                <select name="type" class="form-control">
                                    <option value=""></option>
                                    @foreach ($unity_facilities_category_list as $item)
                                    <option value="{{$item->id}}">{{$item->category_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>                                                                                  
                        <div class="col-md-6">                                
                            <div class="form-group">
                                <label>Min Pax</label>
                                <input type="number" name="min_pax" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">                                
                            <div class="form-group">
                                <label>Max Pax</label>
                                <input type="number" name="max_pax" class="form-control">
                            </div>
                        </div>                                          
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Real Time Booking</label>
                                <div class="input-group">
                                    <div class="radio">
                                        <span>
                                            <input type="radio" name="real_time_booking" id="optionsRadios1" value="1" >
                                            Yes
                                        </span>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <div class="radio">
                                        <span>
                                            <input type="radio" name="real_time_booking" id="optionsRadios2" value="0" >
                                            No
                                        </span>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                            
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">                                
                            <div class="form-group">
                                <label>Deductions Rates</label>
                                <div class="input-group">
                                    <input type="number" min="1" max="24" name="rates" style="" class="form-control">
                                    <div class="input-group-append">
                                        <span class="input-group-text">Hour(s)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Upload images</label>
                                <div class="field" align="left">                                        
                                    <input type="file" id="files" name="files[]" multiple />
                                </div>
                            </div>                                
                        </div>                        
                    </div>
                </div>
                                                                            
                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>        
    </div>
</div>
@endsection

@section('custom_js')
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script> --}}
<script>
    // $(function () {
        //Initialize Select2 Elements
        // $('[name="user_group"]').select2()
        $('select').select2()
        $('[name="location_id"]').select2({
            placeholder: '',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("locations.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.location_name',
                            orderable: true,
                            searchable: true
                            }
                        },
                        search: {value: params.term},
                        order: {0:{dir:'asc'}}
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;                
                    var newData = []
                    $.each(data.data, function(key, val){
                        newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                    })

                    data.results = newData;
                
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 25) < data.recordsFiltered
                        }
                    }

                },
                cache: true
            }
        });

        function readURL(input) {
			if (input.files && input.files[0]) {
				var reader = new FileReader();
				reader.onload = function (e) {
                    if(e.target.result != undefined){
                        $('#falseinput').closest('div').css('display', 'block')
                    }
					$('#falseinput').attr('src', e.target.result);
					$('#base').val(e.target.result);
				};
				reader.readAsDataURL(input.files[0]);
			}
        }
        
        if (window.File && window.FileList && window.FileReader) {
            $("#files").on("change", function(e) {
            var files = e.target.files,
                filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e) {
                var file = e.target;
                $("<span class=\"pip\">" +
                    "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                    "<br/><br/><span class=\"remove\">Remove image</span>" +
                    "<textarea name=\"media[]\" style=\"display:none\">" + e.target.result + "</textarea>" +
                    "</span>").insertAfter("#files");
                $(".remove").click(function(){
                    $(this).parent(".pip").remove();
                });
                
                // Old code here
                /*$("<img></img>", {
                    class: "imageThumb",
                    src: e.target.result,
                    title: file.name + " | Click to remove"
                }).insertAfter("#files").click(function(){$(this).remove();});*/
                
                });
                fileReader.readAsDataURL(f);
            }
            });
        } else {
            alert("Your browser doesn't support to File API")
        }



        $( "#form" ).submit(function( e ) {
            e.preventDefault()

            var bodyFormData = new FormData();
            bodyFormData.append('name', $('[name="name"]').val())
            bodyFormData.append('description', $('[name="description"]').val())
            bodyFormData.append('location_id', $('[name="location_id"]').val() != null ? $('[name="location_id"]').val() : '')
            bodyFormData.append('type', $('[name="type"]').val())
            bodyFormData.append('real_time_booking', $('[name="real_time_booking"]:checked').val() != undefined ? $('[name="real_time_booking"]:checked').val() : "")
            bodyFormData.append('min_pax', $('[name="min_pax"]').val())            
            bodyFormData.append('max_pax', $('[name="max_pax"]').val())
            bodyFormData.append('rates', $('[name="rates"]').val())
            
            $("[name='media[]']")
            .map(function(){                
                bodyFormData.append('media[]', $(this).val())            
            }).get();

            // console.log(config)
            axios.post('{{route("facilities.store")}}', bodyFormData, config) .then(function (response) {
                        console.log(response);
                        window.location = response.data.additional.redirect;

                    })
                    .catch(function (error) { console.log(error);
                        $('.newerror').remove()
                        var msgs = error.response.data.data.message
                        $.each(msgs, function (index, value) {
                                $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0].replace(" id", "")+'</label>')
                                // console.log(value[0])
                            });

                        if(error.response.data.data.message.media){
                            $('#files').closest( ".form-group" ).after('<label id="media-error" class="newerror" for="media">'+error.response.data.data.message.media[0]+'</label>')
                        }

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