@extends(isset($eventLooks) ? (is_null($eventLooks['is_draft']) ? 'index' : ($eventLooks['is_draft'] == 0 ? 'index-left-sidebar' : 'index')) : 'index')

@section('content')

@if(isset($eventLooks))
    @if($eventLooks['is_draft'] == 0)
        <div class="container-fluid">
    @endif
@endif

<div class="row" id="event_create_look_and_feel">
    <div class="col-md-12">
        <h3>@if(isset($eventLooks)) @if($eventLooks['name']) {{ $eventLooks['name'] }} @endif @else Create Event @endif</h3>
        <div id="progress-wizard">
            <div class="panel panel-tab rounded shadow">
                <!-- Start tabs heading -->
                <div class="panel-heading no-padding krik-heading-nav">
                    <ul class="nav nav-tabs nav-pills nav-justified">
                        <li class="active">
                            <a href="#">
                                <div class="pull-left krik-item-logo-tabs">
                                    <i class="fa fa-adjust text-lilac"></i>
                                </div>
                                <div class="pull-left krik-item-logo-text">
                                    <span class="text-strong">Step 1</span>
                                    <span>Look &amp; Feel</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pull-left krik-item-logo-tabs">
                                    <i class="fa fa-file-text"></i>
                                </div>
                                <div class="pull-left krik-item-logo-text">
                                    <span class="text-strong">Step 2</span>
                                    <span>Event Info</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pull-left krik-item-logo-tabs">
                                    <i class="fa fa-check-square-o"></i>
                                </div>
                                <div class="pull-left krik-item-logo-text">
                                    <span class="text-strong">Step 3</span>
                                    <span>Registration</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div><!-- /.panel-heading -->
                <!--/ End tabs heading -->

                <div class="panel-sub-heading">
                    <div class="inner-all">
                        <div class="progress active no-margin progress-xs">
                            <div class="progress-bar progress-bar-lilac" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div>
                        </div>
                    </div>
                </div><!-- /.panel-sub-heading -->

                <!-- Start tabs content -->
                <div class="panel-body">
                    @if(!empty($event_code))
                        {{ Form::open(array('url' => getenv('APP_URL') . '/events/' . $event_code . '/create/event-info', 'class' => 'tab-content form-horizontal form-bordered', 'files' => true)) }}
                    @else
                        {{ Form::open(array('url' => getenv('APP_URL') . '/events/create/event-info', 'class' => 'tab-content form-horizontal form-bordered', 'files' => true)) }}
                    @endif
                      <div class="row krik-panel">
                      <div class="col-md-8 part-1">
                        <div class="row krik-title-row">
                          <div class="col-md-12">
                            <h4>1. Select a preset color scheme or create Your own</h4>
                          </div>
                        </div>
                        <div class="row krik-presets">
                          <div class="col-md-6">
                            <h6>Presets</h6>
                            @foreach ($colors as $key=>$color)
                                <div class="rdio rdio-lilac circle">
                                    @if(isset($eventColors))
                                        @if($eventColors['template'])
                                            @if($color->id == $eventColors['id'])
                                                {{ Form::radio('colors', $color->id, true, array('id'=>'color'.$color->id)) }}
                                            @else
                                                {{ Form::radio('colors', $color->id, false, array('id'=>'color'.$color->id)) }}
                                            @endif
                                        @else
                                            {{ Form::radio('colors', $color->id, false, array('id'=>'color'.$color->id)) }}
                                        @endif
                                    @else
                                        @if($key == 0)
                                            {{ Form::radio('colors', $color->id, true, array('id'=>'color'.$color->id)) }}
                                        @else
                                            {{ Form::radio('colors', $color->id, false, array('id'=>'color'.$color->id)) }}
                                        @endif
                                    @endif
                                    <label for="color{{ $color->id }}">
                                        <div class="eventColor" style="background-color:{{ $color->background_color }}"></div>
                                        <div class="eventColor" style="background-color:{{ $color->titles_color }}"></div>
                                    </label>
                                </div>
                            @endforeach

                            @if(isset($eventColors))
                                @if($eventColors['template'])
                                    {{ Form::hidden('testColors', 0, array('id'=>'testColors')) }}
                                @else
                                    {{ Form::hidden('testColors', 2, array('id'=>'testColors')) }}
                                @endif
                            @else
                                {{ Form::hidden('testColors', 0, array('id'=>'testColors')) }}
                            @endif
                          </div>
                          <div class="col-md-6">
                            <h6>Your Own</h6>
                            <div class="input-group color-picker colorpicker-element form-group input-group">
                                @if(isset($eventColors))
                                    @if($eventColors['template'])
                                        <span class="input-group-addon">
                                            <i style="background-color: #4a4a4a"></i>
                                        </span>
                                        {{ Form::text('bgColor', null, array('class'=>'form-control bg-color', 'placeholder'=>'Header Background Color')) }}
                                    @else
                                        <span class="input-group-addon">
                                            <i style="background-color: {{ $eventColors['background'] }}"></i>
                                        </span>
                                        {{ Form::text('bgColor', $eventColors['background'], array('class'=>'form-control bg-color', 'placeholder'=>'Header Background Color')) }}
                                    @endif
                                @else
                                    <span class="input-group-addon">
                                        <i style="background-color: #4a4a4a"></i>
                                    </span>
                                    {{ Form::text('bgColor', null, array('class'=>'form-control bg-color', 'placeholder'=>'Header Background Color')) }}
                                @endif
                            </div>
                            <div class="input-group color-picker colorpicker-element form-group input-group">
                                @if(isset($eventColors))
                                    @if($eventColors['template'])
                                        <span class="input-group-addon">
                                            <i style="background-color: #4a4a4a"></i>
                                        </span>

                                        {{ Form::text('titleColor', null, array('class'=>'form-control title-color', 'placeholder'=>'Event Title Color')) }}
                                    @else
                                        <span class="input-group-addon">
                                            <i style="background-color: {{ $eventColors['title'] }}"></i>
                                        </span>
                                        {{ Form::text('titleColor', $eventColors['title'], array('class'=>'form-control title-color', 'placeholder'=>'Event Title Color')) }}
                                    @endif
                                @else
                                    <span class="input-group-addon">
                                        <i style="background-color: #4a4a4a"></i>
                                    </span>
                                    {{ Form::text('titleColor', null, array('class'=>'form-control title-color', 'placeholder'=>'Event Title Color')) }}
                                @endif
                            </div>
                            <div>
                                <div class="row">
                                    @if(isset($eventColors))
                                        @if($eventColors['template'])
                                            <div class="col-md-6 col-sm-6 col-xs-6">{{ Form::Button('Save to Presets', array('class' => 'btn btn-default save_presets disabled btn-block')) }}</div>
                                            <div class="col-md-6 col-sm-6 col-xs-6">{{ Form::Button('Use for this event', array('class' => 'btn btn-success use_event disabled btn-block')) }}</div>
                                        @else
                                            <div class="col-md-6 col-sm-6 col-xs-6">{{ Form::Button('Save to Presets', array('class' => 'btn btn-default save_presets btn-block')) }}</div>
                                            <div class="col-md-6 col-sm-6 col-xs-6">{{ Form::Button('Use for this event', array('class' => 'btn btn-success use_event btn-block')) }}</div>
                                        @endif
                                    @else
                                        <div class="col-md-6 col-sm-6 col-xs-6">{{ Form::Button('Save to Presets', array('class' => 'btn btn-default save_presets disabled btn-block')) }}</div>
                                        <div class="col-md-6 col-sm-6 col-xs-6">{{ Form::Button('Use for this event', array('class' => 'btn btn-success use_event disabled btn-block')) }}</div>
                                    @endif
                                </div>
                            </div>
                            @if(isset($eventColors))
                                 {{ Form::hidden('colorID', $eventColors['id'], array('id'=>'colorID')) }}
                             @else
                                 {{ Form::hidden('colorID', '', array('id'=>'colorID')) }}
                            @endif
                          </div>
                        </div>
                        <div class="row krik-title-row">
                          <div class="col-md-12">
                            <h4>2. Select Custom Font</h4>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6 part-2 scrollTable">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Titles Font</th>
                                    </tr>
                                </thead>
                            </table>
                            <div>
                                <table>
                                    @foreach($titleFonts as $key=>$font)
                                        <tr>
                                            <td>
                                                <div class="rdio rdio-lilac circle krik-title-font">
                                                    @if(isset($eventLooks))
                                                        @if($font == $eventLooks['title'] )
                                                            {{ Form::radio('titleFont', $font, true, array('id'=>'titleFont'.$key)) }}
                                                        @else
                                                            {{ Form::radio('titleFont', $font, false, array('id'=>'titleFont'.$key)) }}
                                                        @endif
                                                    @else
                                                        @if($key == 1)
                                                            {{ Form::radio('titleFont', $font, true, array('id'=>'titleFont'.$key)) }}
                                                        @else
                                                            {{ Form::radio('titleFont', $font, false, array('id'=>'titleFont'.$key)) }}
                                                        @endif
                                                    @endif
                                                    {{ Form::label('titleFont'.$key, $font, array('style' => 'font-family:'.$font)) }}
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </table>
                            </div>
                          </div>
                          <div class="col-md-6 part-2 scrollTable">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Body Font</th>
                                    </tr>
                                </thead>
                            </table>
                            <div>
                                <table>
                                    @foreach($bodyFonts as $key=>$font)
                                        <tr>
                                            <td>
                                                <div class="rdio rdio-lilac circle krik-body-font">
                                                    @if(isset($eventLooks))
                                                        @if($font == $eventLooks['body'])
                                                            {{ Form::radio('bodyFont', $font, true, array('id'=>'bodyFont'.$key)) }}
                                                        @else
                                                            {{ Form::radio('bodyFont', $font, false, array('id'=>'bodyFont'.$key)) }}
                                                        @endif
                                                    @else
                                                        @if($key == 0)
                                                            {{ Form::radio('bodyFont', $font, true, array('id'=>'bodyFont'.$key)) }}
                                                        @else
                                                            {{ Form::radio('bodyFont', $font, false, array('id'=>'bodyFont'.$key)) }}
                                                        @endif
                                                    @endif
                                                    {{ Form::label('bodyFont'.$key, $font, array('style' => 'font-family:'.$font)) }}
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </table>
                            </div>
                          </div>
                        </div>
                        <div class="row krik-title-row">
                          <div class="col-md-12">
                            <h4>3. Add your Company or Event Logo</h4>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12 part-3">
                            @if(isset($eventLooks))
                                <div class="rdio rdio-lilac circle">
                                    @if($eventLooks['logo_option'] == 0)
										{{ Form::radio('logo', 'predifined_logo', true, ['id' => 'predifined_logo', 'data-url' => $logo]) }}
                                    @else
                                        {{ Form::radio('logo', 'predifined_logo', false, ['id' => 'predifined_logo', 'data-url' => $logo]) }}
                                    @endif
                                    {{ Form::label('predifined_logo', 'Predefined') }}
                                </div>
                                <div class="rdio rdio-lilac circle">
                                    @if($eventLooks['logo_option'] == 1)
                                        {{ Form::radio('logo', 'no_logo', true, ['id' => 'no_logo']) }}
                                    @else
                                        {{ Form::radio('logo', 'no_logo', false, ['id' => 'no_logo']) }}
                                    @endif
                                    {{ Form::label('no_logo', 'No Logo') }}
                                </div>
                                <div class="rdio rdio-lilac circle">
                                    @if($eventLooks['logo_option'] == 2)
                                        {{ Form::radio('logo', 'upload_logo_cb', true, ['id' => 'upload_logo_cb']) }}
                                    @else
                                        {{ Form::radio('logo', 'upload_logo_cb', false, ['id' => 'upload_logo_cb']) }}
                                    @endif
                                    <label for="upload_logo_cb"></label>
                                    {{ Form::hidden('logoNotRequired', 1, array('id'=>'testColors')) }}
                                    <div class="fileinput fileinput-new form-group" data-provides="fileinput">
                                        <span class="btn btn-default btn-file krik-btn-gray">
                                          <span class="fileinput-new">Upload New Logo</span>
                                          <span class="fileinput-exists">Change</span>
                                          {{ Form::file('upload_logo_update', $attributes = array('id' => 'upload_logo')) }}
                                          <span class="fileinput-filename"></span>
                                        <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
                                    </div>
                                </div>
                            @else
                                <div class="rdio rdio-lilac circle">
                                    {{ Form::radio('logo', 'predifined_logo', true, ['id' => 'predifined_logo', 'data-url' => $logo]) }}
                                    {{ Form::label('predifined_logo', 'Predefined') }}
                                </div>
                                <div class="rdio rdio-lilac circle">
                                    {{ Form::radio('logo', 'no_logo', false, ['id' => 'no_logo']) }}
                                    {{ Form::label('no_logo', 'No Logo') }}
                                </div>
                                <div class="rdio rdio-lilac circle">
                                  {{ Form::radio('logo', 'upload_logo_cb', false, ['id' => 'upload_logo_cb']) }}
                                  <label for="upload_logo_cb"></label>
                                    <div class="fileinput fileinput-new form-group" data-provides="fileinput">
                                        <span class="btn btn-default btn-file krik-btn-gray">
                                          <span class="fileinput-new">Upload New Logo</span>
                                          <span class="fileinput-exists">Change</span>
                                          {{ Form::file('upload_logo', $attributes = array('id' => 'upload_logo')) }}
                                          <span class="fileinput-filename"></span>
                                        <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
                                    </div>
                                </div>
                            @endif
                            <div class="form-group">
                                {{ Form::text('upload_validation', 1) }}
                            </div>
                          </div>

                        </div>
                      </div>

                      <div class="col-md-4 ui-preview">
                        <div class="row krik-title-row">
                          <div class="col-md-12">
                            <h4>Preview</h4>

                          </div>
                        </div>
                        <div class="row krik-preview">
                            <div class="container-fluid">
                                <div class="row krik-email-template">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="row">
                                            <div class="col-md-12 col-sm-12 col-xs-12 ui-header" @if(isset($eventColors)) style="background-color: {{ $eventColors['background'] }};" @else style="background-color:#4a4a4a;" @endif>
                                              <div class="krik-event-container">
                                                            <div class="krik-event-logo"
                                                            @if(isset($eventLooks))
                                                                  @if($eventLooks['logo_option'] == 2)
                                                                      style="background-image: url('{{ $eventLooks['logo'] }}')"
                                                                  @elseif($eventLooks['logo_option'] == 0)
                                                                      style="background-image: url('{{ $logo }}')"
                                                                  @endif
                                                              @else
                                                                  style="background-image: url('{{ $logo }}')"
                                                              @endif>
                                                            </div>
                                                          </div>

                                                <p class="ui-event-name" @if(isset($eventColors)) style="color: {{ $eventColors['title'] }}; font-family: {{ $eventLooks['title'] }};" @else style="color: #fff"; @endif>Your Event Name</p>
                                            </div>
                                            <div class="col-md-12 col-sm-12 col-xs-12 ui-body">
                                                <div class="ui-text-preview" @if(isset($eventLooks)) style="font-family: {{ $eventLooks['title'] }};" @else style="font-family: Arial;" @endif >Wake up your design skills! Choose colors and fonts that are aligned with your company brand or this specific event’s style guide. No style guide? No worries, you can create your own styling. We have some colors prepared and preset for you, but if it doesn’t suit your needs, you can create your own as well. Everything you pick here is going to be applied on site header, event title, text paragraphs, buttons, input fields and other elements of the layout. This is just a general look and feel of your registration site, when you finish with creation of event, preview will be available on the dashboard.</div>

                                            </div>
                                            <div class="col-md-12 col-sm-12 col-xs-12 ui-footer">
                                                <div class="pull-right">
                                                    <div class="btn buttton-default"></div>
                                                    <div class="btn ui-button" @if(isset($eventColors)) style="background-color: {{ $eventColors['background'] }};" @else style="background-color:#4a4a4a;" @endif></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                      </div>


                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          {{ Form::submit('Go to Step 2', array('class' => 'btn btn-success btn-block')) }}

                        </div>

                      </div>

                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
</div>
@if(isset($eventLooks))
	<script>
		var isPredefined = "{{ $eventLooks['logo_option'] }}"; // logo option
	</script>
@else 
	<script>
		var isPredefined = null; // logo option
	</script>
@endif
@if(isset($eventLooks))
    @if($eventLooks['is_draft'] == 0)
        </div>
    @endif
@endif
{!! JsValidator::formRequest('App\Http\Requests\Events\Create\LookAndFeel') !!}
@endsection