@extends('layouts.master')

@section('title')
Teams
@endsection

@section('extra-css')
<style>
    .image-preview-input {
        position: relative;
        overflow: hidden;
        margin: 0px;    
        color: #333;
        background-color: #fff;
        border-color: #ccc;    
    }
    .image-preview-input input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }
    .image-preview-input-title {
        margin-left:2px;
    }
</style>
@endsection

@section('index')
<div class="content">
    <div class="col-md-12">
        <div class="card card-user">
            <div class="card-header">
                <h5 class="card-title">Teams</h5>
            </div>
            <div class="card-body">
                <form id="form_validation" method="POST" action="{{ route('teams.store') }}" file="true" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Name <span class="error">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{old('name')}}" required>
                            @error('name')
                            <label id="name-error" class="error" for="name">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Position <span class="error">*</span></label>
                            <select class="form-control" name="position_id" required>
                                <option>-- Select Position --</option>
                                @foreach($positions as $position)
                                <option value="{{$position->id}}">{{ $position->name }}</option>
                                @endforeach
                            </select>
                            @error('position_id')
                            <label id="position_id-error" class="error" for="position_id">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Credentials</label>
                            <input type="text" class="form-control @error('credentials') is-invalid @enderror" name="credentials" value="{{old('credentials')}}">
                            @error('credentials')
                            <label id="credentials-error" class="error" for="credentials">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Is Testimonial</label><br>
                            <input type="radio" name="is_testimonial" value="1" >
                            <label>Yes</label>
                            <input type="radio" name="is_testimonial" value="0" checked>
                            <label>No</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">LinkIn Url</label>
                            <input type="text" class="form-control @error('linkIn_url') is-invalid @enderror" name="linkIn_url" value="{{old('linkIn_url')}}">
                            @error('linkIn_url')
                            <label id="linkIn_url-error" class="error" for="linkIn_url">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Facebook Url</label>
                            <input type="text" class="form-control @error('facebook_url') is-invalid @enderror" name="facebook_url" value="{{old('facebook_url')}}">
                            @error('facebook_url')
                            <label id="facebook_url-error" class="error" for="facebook_url">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Twitter Url</label>
                            <input type="text" class="form-control @error('twitter_url') is-invalid @enderror" name="twitter_url" value="{{old('twitter_url')}}">
                            @error('twitter_url')
                            <label id="twitter_url-error" class="error" for="twitter_url">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Instagram Url</label>
                            <input type="text" class="form-control @error('instagram_url') is-invalid @enderror" name="instagram_url" value="{{old('instagram_url')}}">
                            @error('instagram_url')
                            <label id="instagram_url-error" class="error" for="instagram_url">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Image  <span class="error">* (Width 600px - Height 600px)</span></label>
                            <div class="input-group image-preview">
                                <input type="text" class="form-control image-preview-filename" disabled="disabled">
                                <span class="input-group-btn">
                                    <!-- image-preview-clear button -->
                                    <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
                                        <span class="glyphicon glyphicon-remove"></span> Clear
                                    </button>
                                    <!-- image-preview-input -->
                                    <div class="btn btn-default image-preview-input">
                                        <span class="glyphicon glyphicon-folder-open"></span>
                                        <span class="image-preview-input-title">Browse</span>
                                        <input type="file" accept="image/png, image/jpeg, image/gif" name="image" required /> <!-- rename it -->
                                    </div>
                                </span>
                            </div><!-- /input-group image-preview [TO HERE]--> 
                            @error('image')
                            <label id="image-error" class="error" for="image_url">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Quotes</label>
                            <textarea name="remark" class="form-control" cols="50" rows="5"></textarea>
                        </div>
                    </div>
                    
                    <button class="btn btn-primary waves-effect" type="submit">SUBMIT</button>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
@endsection
@section('extra-script')
<script>    
    $(document).on('click', '#close-preview', function(){ 
        $('.image-preview').popover('hide');
        // Hover befor close the preview
        $('.image-preview').hover(
        function () {
            $('.image-preview').popover('show');
        }, 
        function () {
            $('.image-preview').popover('hide');
        }
        );    
    });
    
    $(function() {
        // Create the close button
        var closebtn = $('<button/>', {
            type:"button",
            text: 'x',
            id: 'close-preview',
            style: 'font-size: initial;',
        });
        closebtn.attr("class","close pull-right");
        // Set the popover default content
        $('.image-preview').popover({
            trigger:'manual',
            html:true,
            title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
            content: "There's no image",
            placement:'bottom'
        });
        // Clear event
        $('.image-preview-clear').click(function(){
            $('.image-preview').attr("data-content","").popover('hide');
            $('.image-preview-filename').val("");
            $('.image-preview-clear').hide();
            $('.image-preview-input input:file').val("");
            $(".image-preview-input-title").text("Browse"); 
        }); 
        // Create the preview image
        $(".image-preview-input input:file").change(function (){     
            var img = $('<img/>', {
                id: 'dynamic',
                width:250,
                height:200
            });      
            var file = this.files[0];
            var reader = new FileReader();
            // Set preview image into the popover data-content
            reader.onload = function (e) {
                $(".image-preview-input-title").text("Change");
                $(".image-preview-clear").show();
                $(".image-preview-filename").val(file.name);            
                img.attr('src', e.target.result);
                $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
            }        
            reader.readAsDataURL(file);
        });  
    });
</script>
@endsection