@extends('layouts.master')

@section('title')
Contact Us
@endsection

@section('extra-css')
@endsection

@section('index')
<div class="content">
    <div class="col-md-12">
        <div class="card card-user">
            <div class="card-header">
                <h5 class="card-title">Contact Us</h5>
            </div>
            <div class="card-body">
                <form id="form_validation" method="POST" action="{{ route('contact_us.store') }}" file="true" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Phone</label>
                            <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{old('phone')}}" required>
                            @error('phone')
                            <label id="phone-error" class="error" for="phone">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Email</label>
                            <input type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{old('email')}}">
                            @error('email')
                            <label id="email-error" class="error" for="email">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Working Hours</label>
                            <input type="text" class="form-control @error('working_hours') is-invalid @enderror" name="working_hours" value="{{old('working_hours')}}">
                            @error('working_hours')
                            <label id="working_hours-error" class="error" for="working_hours">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Map (Iframe)</label>
                            <input type="text" class="form-control @error('map') is-invalid @enderror" name="map" value="{{old('map')}}">
                            @error('map')
                            <label id="map-error" class="error" for="map">{{ $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">LinkedIn Url</label>
                            <input type="text" class="form-control @error('linkedIn_url') is-invalid @enderror" name="linkedIn_url" value="{{old('linkedIn_url')}}">
                            @error('linkedIn_url')
                            <label id="linkedIn_url-error" class="error" for="linkedIn_url">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Core Value</label>
                            <textarea name="core_value" class="form-control" cols="50" rows="5"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Address</label>
                            <textarea name="address" id="summernote" class="form-control" cols="50" rows="5"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Remark</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).ready(function() {
        $('#summernote').summernote({
            placeholder: 'Description',
            tabsize: 2,
            height: 200
        });
    });
    
    $(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