@extends('stat.visits.layout')

@section('title')
	@parent
	Каналы :: Статистика по посещениям
@stop

@section('breadcrumbs')
	{{ Breadcrumbs::render('stat.visits.utm_campaigns') }}
@stop

@section('css')
	<link rel="stylesheet" href="{{ asset('css/bootstrap-validator.min.css') }}">
@stop

@section('js')
	<script src="{{ asset('js/plugin/x-editable/x-editable.min.js') }}"></script>
	<script src="{{ asset('js/plugin/bootstrapvalidator/bootstrapValidator.min.js') }}"></script>
	<script>
		function initEditable() {
			$('.editable-name, .editable-params').editable({
				url: '/stat/visits/utm_campaigns/update',
				emptytext: 'Нет'
			});
			$('.editable-utm-source').editable({
				url: '/stat/visits/utm_campaigns/update',
				source: [
					@foreach($utmSources as $key=>$value)
					{ value: {{ $key }}, text: "{{ str_replace('"', '\"', $value) }}" },
					@endforeach
				]
			});
			$('.editable').on('save', function(e, params) {
				if (params.response.status == 'success') {
					if (params.response.operation) {
						$('#visitCampaign'+params.response.id).replaceWith(params.response.cost);
						initEditable();
						initDeleteRestore();
					}
				}
			});
		}

		//удаление/восстановление операции
		function initDeleteRestore() {
			$('.visit-cost-restore, .visit-cost-delete').unbind('click').on('click', function(){
				var l = Ladda.create(this);
				l.start();
				var btn = this;
						$.post(
								$(this).data('action'),
								{
									'id': $(this).data('id')
								},
								function(data) {
									if (data.status === 'success') {
										$('#visitUtmCampaign'+data.id).replaceWith(data.utmCampaign);
										initEditable();
										initDeleteRestore();
									}
								},
								'json'
								).always(function() { l.stop(); });
				return false;
			});

			$('#visitCostsContainer tr')
				.mouseover(function(){
					$(this).find('button.visit-cost-restore, button.visit-cost-delete, .visit-cost-debt').stop().fadeIn('normal');
				})
				.mouseout(function(){
					$(this).find('button.visit-cost-restore, button.visit-cost-delete, .visit-cost-debt').stop().fadeOut('fast');
				})
		}

		$(document).ready(function() {
			initEditable();
			initDeleteRestore();

			$('#utmCampaignNewSbmtBtn').click(function(e) {
				$('#utmCampaignNewForm')
								.data('bootstrapValidator')
								.updateStatus('utmCampaignNewParams', 'NOT_VALIDATED', null)
								.validateField('utmCampaignNewParams')
				var l = Ladda.create($('#utmCampaignNewSbmtBtn').get()[0]);
				l.start();
				$.post(
								$('#utmCampaignNewForm').attr('action'),
								$('#utmCampaignNewForm').serialize(),
								function(data) {
									if (data.status === 'success') {
										if (data.utmCampaign) {
											$('#visitCostsContainer').append(data.utmCampaign);
											initEditable();
											initDeleteRestore();
										}
									}
									else {
									}
								},
								'json'
								).always(function() {l.stop();});
				return false;
			});

			//Валидация формы добавления операции
			$('#utmCampaignNewForm').bootstrapValidator({
				feedbackIcons: {
					valid: 'glyphicon glyphicon-ok',
					invalid: 'glyphicon glyphicon-remove',
					validating: 'glyphicon glyphicon-refresh'
				},
				submitButtons: 'button[type="submit"]',
				fields: {
					utmCampaignNewParams: {
						validators: {
							notEmpty: {
								message: 'Необходимо указать параметры'
							}
						}
					}
				}
			});
		});
	</script>
@stop

@section('visits_content')
	<table class="table table-condensed table-hover">
		<thead>
			<tr>
				<th>Название</th>
				<th>Канал</th>
				<th>Параметры</th>
				<th width="50"></th>
			</tr>
		</thead>
		<tbody id="visitCostsContainer">
			@foreach ($utmCampaigns as $visitUtmCampaign)
				@include('stat/utm/utm_campaign')
			@endforeach
		</tbody>
	</table>

	<div class="well well-sm">
		{{ Form::open(array('action' => array('UtmController@createUtmCampaign'), 'id' => 'utmCampaignNewForm', 'class' => 'form-horizontal')) }}
		<div class="form-group">
			<label class="col-sm-2 control-label"></label>
			<div class="col-sm-4">
				<h4>Добавить кампанию</h4>
			</div>
		</div>
		<div class="form-group">
			<label for="utmCampaignNewName" class="col-sm-2 control-label">Название</label>
			<div class="col-sm-4">
				{{ Form::text('utmCampaignNewName', null, array('class' => 'form-control', 'id' => 'utmCampaignNewName')) }}
				<p class="help-block">Например: Ретаргетинг яндекс</p>
			</div>
		</div>
		<div class="form-group">
			<label for="utmCampaignNewParams" class="col-sm-2 control-label">Параметры</label>
			<div class="col-sm-4">
				{{ Form::text('utmCampaignNewParams', null, array('class' => 'form-control', 'id' => 'utmCampaignNewParams')) }}
				<p class="help-block">Например: utm_campaign=camp5999</p>
			</div>
		</div>
		<div class="form-group">
			<label for="utmCampaignNewUtmSource" class="col-sm-2 control-label">Канал</label>
			<div class="col-sm-4">
				{{ Form::select('utmCampaignNewUtmSource', $utmSources, null, array('class' => 'form-control', 'id' => 'utmCampaignNewUtmSource')) }}
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-4 col-sm-offset-2">
				<button id="utmCampaignNewSbmtBtn" type="submit" class="btn btn-primary ladda-button" data-style="zoom-out"><span class="ladda-label">Сохранить канал</span></button>
			</div>
		</div>
		{{ Form::close() }}
	</div>
@stop