@extends('adminlte::page')

@section('title', 'Edit Contact')

@section('content_header')
    <h1>Edit Contact</h1>
@stop

@section('content')
    <div class="callout callout-info">
        <h4>Reminder!</h4>
        You can upload image with .JPG, .PNG, to avoid images pixels or distortion please make the size of the
        image 600*390.
    </div>

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Edit Contact</h3>
        </div>

        @if(Session::has('sliderSuccess'))
            <div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4><i class="icon fa fa-check"></i> Success!</h4>
                {{ Session::get('sliderSuccess') }}
            </div>
        @endif
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {!! Form::model($contact, [
        'method' => 'PATCH',
        'route' => ['contacts.admin.contacts.update', $contact->id]
        ]) !!}
        <div class="box-body">

            <p class="lead text-light-blue"><i class="fa fa-info-circle text-red" aria-hidden="true"></i> Contact
                Information
            </p>

            <div class="form-group">
                {!! Form::label('address', 'Address') !!}
                {!! Form::textarea('address', null, array('placeholder'=>'Address', 'class'=>'form-control', 'rows'=>2)) !!}
            </div>

            <div class="form-group">
                {!! Form::label('phone', 'Phone') !!}
                {!! Form::tel('phone', null, array('placeholder'=>'phone', 'class'=>'form-control')) !!}
            </div>

            <div class="form-group">
                {!! Form::label('email', 'Email') !!}
                {!! Form::email('email', null, array('placeholder'=>'Email', 'class'=>'form-control')) !!}
            </div>

            <div class="form-group">
                {!! Form::label('website', 'Website') !!}
                {!! Form::url('website', null, array('placeholder'=>'Website', 'class'=>'form-control')) !!}

                <div class="form-group">
                    {!! Form::label('details', 'Details') !!}
                    {!! Form::textarea('details', null, array('placeholder'=>'Details', 'class'=>'form-control')) !!}

                    <script>
                        CKEDITOR.replace('details', {
                            uiColor: '#9AB8F3',
                            stylesSet: 'my_custom_style'
                        });
                    </script>
                </div>
            </div>
            <p class="lead text-light-blue"><i class="fa fa-info-circle text-red" aria-hidden="true"></i> Social Media
            </p>
            <div class="form-group">
                {!! Form::label('twitterLink', 'Twitter') !!}
                {!! Form::url('twitterLink', null, array('placeholder'=>'Twitter', 'class'=>'form-control')) !!}
            </div>

            <div class="form-group">
                {!! Form::label('faceLink', 'Facebook') !!}
                {!! Form::url('faceLink', null, array('placeholder'=>'Facebook', 'class'=>'form-control')) !!}
            </div>

            <div class="form-group">
                {!! Form::label('Google+', 'googleLink') !!}
                {!! Form::url('googleLink', null, array('placeholder'=>'Google+', 'class'=>'form-control')) !!}
            </div>

            <div class="form-group">
                {!! Form::label('Instagram', 'Instagram') !!}
                {!! Form::url('instagram', null, array('placeholder'=>'Instagram', 'class'=>'form-control')) !!}
            </div>

            <div class="form-group">
                {!! Form::label('linkedIn', 'LinkedIn') !!}
                {!! Form::url('linkedIn', null, array('placeholder'=>'LinkedIn', 'class'=>'form-control')) !!}
            </div>

            <div class="form-group">
                {!! Form::label('youtube', 'YouTube') !!}
                {!! Form::url('youtube', null, array('placeholder'=>'YouTube', 'class'=>'form-control')) !!}
            </div>

            <p class="lead text-light-blue"><i class="fa fa-info-circle text-red" aria-hidden="true"></i> Project
                Location
            </p>
            <div class="form-group">
                {{ Form::label('map', 'Map') }}
                {{ Form::text('searchmap', '', array('class'=>'form-control', 'id'=>'searchmap')) }}
                <div id="map" style="height: 400px"></div>
            </div>

            <div class="form-group">
                {{ Form::label('lat', 'Lat') }}
                {{ Form::text('lat', null, array('class'=>'form-control', 'placeholder'=>'Lat', 'id'=>'lat')) }}
            </div>

            <div class="form-group">
                {{ Form::label('lng', 'Lng') }}
                {{ Form::text('lng', null, array('class'=>'form-control', 'placeholder'=>'Lng', 'id'=>'lng')) }}
            </div>

        </div>

        <div class="box-footer">
            {!! Form::submit('Add', ['class'=>'btn btn-primary']) !!}
        </div>
        {!! Form::close() !!}
    </div>

@stop

@section('js')
    <script>
        var map;

        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: {!! $contact->lat !!},
                    lng: {!! $contact->lng !!}
                },
                zoom: 15
            });

            var marker = new google.maps.Marker({
                position: {
                    lat: {!! $contact->lat !!},
                    lng: {!! $contact->lng !!}
                },
                map: map,
                draggable: true
            });

            var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));
            google.maps.event.addListener(searchBox, 'places_changed', function () {
                var places = searchBox.getPlaces();
                var bounds = new google.maps.LatLngBounds();
                var i, place;

                for (i = 0; place = places[i]; i++) {
                    bounds.extend(place.geometry.location);
                    marker.setPosition(place.geometry.location);
                }
                map.fitBounds(bounds);
                map.setZoom(15);
            });
            google.maps.event.addListener(marker, 'position_changed', function () {
                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();

                $('#lat').val(lat);
                $('#lng').val(lng);
            });
        }
    </script>
    {{ Html::script('https://maps.googleapis.com/maps/api/js?key=AIzaSyDDmW4TvEDf8aQNS8JZ_1VntGa6ON-en4Q&callback=initMap&libraries=places') }}
@stop