@extends(decide_template())
@section('title',  $pageTitle)
@section('page_styles')
<link href="{{ asset('css/campaign-create-v2.css') }}?v={{$local_version}}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/add-blank.css') }}?v={{$local_version}}" rel="stylesheet" type="text/css">
@endsection

@section('page_scripts')
<script>
var selectedBuilder = null;
var templatesLoaded = false;
var allTemplates = [];
var allCategories = [];
var submitting = false;

var automationId = @json(request()->query('automation_id', ''));
var actionId = @json(request()->query('action_id', ''));

function selectBuilder(type) {
	if (selectedBuilder === type) return;
	selectedBuilder = type;

	// Highlight selected card
	$('.mc-builder-option').removeClass('mc-builder-option--selected');
	$('.mc-builder-option[data-builder="' + type + '"]').addClass('mc-builder-option--selected');

	// Show template gallery
	var $step = $('#step-templates');
	if (!templatesLoaded) {
		$step.show();
		$('#tpl-loading').show();
		$('#tpl-content').hide();
		$.ajax({
			type: "GET",
			url: "{{ route('broadcasts.templates.json') }}",
			success: function(data) {
				templatesLoaded = true;
				allTemplates = data.templates || [];
				allCategories = data.categories || [];
				renderTemplateGallery();
				$('#tpl-loading').hide();
				$('#tpl-content').show();
			},
			error: function() {
				$('#tpl-loading').html('<p style="color:var(--mc-danger);">Failed to load templates. Please try again.</p>');
			}
		});
	} else {
		$step.slideDown(300);
	}

	// Scroll to templates
	setTimeout(function(){
		$('html, body').animate({ scrollTop: $step.offset().top - 100 }, 400);
	}, 200);
}

function renderTemplateGallery() {
	// Build category dropdown
	var catHtml = '<option value="All">@lang("broadcasts.choose_template.filter.option.all_categories")</option>';
	for (var i = 0; i < allCategories.length; i++) {
		catHtml += '<option value="' + escapeHtml(allCategories[i]) + '">' + escapeHtml(allCategories[i]) + '</option>';
	}
	$('#tpl-filter').html(catHtml);

	renderTemplateCards(allTemplates);
}

function renderTemplateCards(templates) {
	var html = '';

	// Start Blank card — prominent CTA style
	html += '<div class="tpl-col tpl-card" data-name="blank" data-category="" data-tags="" data-keywords="" data-desc="" data-short-desc="">';
	html += '<div class="tpl-card-inner tpl-card--blank" onclick="useTemplateAndGo(\'blank\')">';
	html += '<div class="tpl-blank-icon"><i class="la la-plus"></i></div>';
	html += '<div class="tpl-blank-label">@lang("broadcasts.choose_template.label.blank_template")</div>';
	html += '<div class="tpl-blank-hint">Start from scratch</div>';
	html += '</div></div>';

	if (templates.length === 0) {
		html += '<div class="tpl-col tpl-col--full tpl-no-results"><div class="tpl-empty">';
		html += '<i class="la la-inbox"></i>';
		html += '<span>@lang("broadcasts.choose_template.label.no_template_added")</span>';
		html += '</div></div>';
	}

	for (var i = 0; i < templates.length; i++) {
		var t = templates[i];
		var assignedBadge = t.assigned ? '<span class="tpl-badge tpl-badge--muted">Assigned</span>' : '';
		html += '<div class="tpl-col tpl-card custom-templates" data-name="' + escapeAttr(t.name) + '" data-category="' + escapeAttr(t.category) + '" data-tags="' + escapeAttr(t.tags) + '" data-keywords="' + escapeAttr(t.keywords) + '" data-desc="' + escapeAttr(t.description) + '" data-short-desc="' + escapeAttr(t.short_description) + '">';
		html += '<div class="tpl-card-inner">';
		html += '<div class="tpl-thumb">';
		html += '<img src="' + escapeAttr(t.thumbnail) + '" alt="' + escapeAttr(t.name) + '">';
		html += '<div class="tpl-thumb-overlay">';
		html += '<button class="tpl-use-btn" onclick="useTemplateAndGo(\'' + escapeAttr(t.id) + '\')"><i class="la la-check"></i> Use This</button>';
		html += '<button class="tpl-preview-btn viewImage" data-image="' + escapeAttr(t.thumbnail) + '"><i class="la la-eye"></i></button>';
		html += '</div></div>';
		html += '<div class="tpl-info">';
		html += '<div class="tpl-name">' + escapeHtml(t.name) + '</div>';
		html += '<div class="tpl-meta"><span class="tpl-badge">' + escapeHtml(t.category) + '</span>' + assignedBadge + '</div>';
		html += '</div></div></div>';
	}

	$('#tpl-grid').html(html);
}

function useTemplateAndGo(templateId) {
	if (submitting) return;
	submitting = true;
	$(".blockUI").show();
	$.ajax({
		type: "POST",
		data: {
			type: selectedBuilder,
			template_id: templateId,
			automation_id: automationId,
			action_id: actionId
		},
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		},
		url: "{{ route('broadcasts.useTemplate') }}",
		success: function(data) {
			$(".blockUI").hide();
			if (data.success == 1) {
				window.location.href = data.url;
			} else {
				submitting = false;
				toastr.error(data.message);
			}
		},
		error: function() {
			$(".blockUI").hide();
			submitting = false;
			toastr.error('An error occurred. Please try again.');
		}
	});
}

function filterTemplates() {
	var val = $('#tpl-filter').val().toLowerCase();
	var q = $('#tpl-search').val().toLowerCase();

	$('#tpl-grid').find('.custom-templates').each(function() {
		var name = ($(this).data('name') || '').toString().toLowerCase();
		var tags = ($(this).data('tags') || '').toString().toLowerCase();
		var desc = ($(this).data('desc') || '').toString().toLowerCase();
		var keywords = ($(this).data('keywords') || '').toString().toLowerCase();
		var shortDesc = ($(this).data('short-desc') || '').toString().toLowerCase();
		var category = ($(this).data('category') || '').toString().toLowerCase();

		var matchesCategory = (val === 'all' || category.indexOf(val) > -1);
		var matchesSearch = (!q || name.indexOf(q) > -1 || tags.indexOf(q) > -1 || desc.indexOf(q) > -1 || keywords.indexOf(q) > -1 || shortDesc.indexOf(q) > -1);

		$(this).css('display', (matchesCategory && matchesSearch) ? 'flex' : 'none');
	});
}

function escapeHtml(str) {
	if (!str) return '';
	return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function escapeAttr(str) {
	if (!str) return '';
	return String(str).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/'/g,'&#39;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

$(document).ready(function() {
	// Image preview popup
	$("body").click(function(e) {
		if (!$(e.target).closest('.viewImage, .popupImgBlk .pic').length) {
			$(".popupImgBlk").fadeOut().removeClass("show");
		}
	});
	$(document).on('click', '.viewImage', function(e) {
		e.stopPropagation();
		var image = $(this).attr("data-image");
		$("#tempImg").attr("src", image);
		$(".blockUI").show();
		setTimeout(function() {
			$(".popupImgBlk").removeClass("hide").addClass("show");
			$(".blockUI").hide();
		}, 500);
	});
	$("#close-popup").click(function() {
		$(".popupImgBlk").removeClass("show").addClass("hide");
	});

	// Filter events
	$(document).on('change keyup', '#tpl-filter, #tpl-search', filterTemplates);
});
</script>

@if (hook_exist('AutomationAddBlankJS'))
	<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function request() in /home/rehanjt/public_html/subdomains/test.rehan.jt.mumara.dev/resources/views/themes/default/campaign/addblank.blade.php:198
Stack trace:
#0 {main}
  thrown in <b>/home/rehanjt/public_html/subdomains/test.rehan.jt.mumara.dev/resources/views/themes/default/campaign/addblank.blade.php</b> on line <b>198</b><br />