@extends('admin.master')

@section('title', __('Edit Story'))

@section('content')

<form class="ui large form" id="story" method="post" action="{{ route('stories.update', $story->id) }}" enctype="multipart/form-data">
	@csrf
	@method('PUT')
	
	<div class="field">
		<button class="ui icon labeled large circular button" type="submit">
		  <i class="save outline icon"></i>
		  {{ __('Update') }}
		</button>
		<a class="ui icon labeled large circular button" href="{{ route('stories') }}">
			<i class="times icon"></i>
			{{ __('Cancel') }}
		</a>
	</div>

	@if($errors->any())
      @foreach ($errors->all() as $error)
         <div class="ui negative bold circular-corner fluid message">
         	<i class="times icon close"></i>
         	{{ $error }}
         </div>
      @endforeach
	@endif

	{{-- AJAX Error Messages Container --}}
	<div id="ajax-errors" class="ui negative bold circular-corner fluid message" style="display: none;">
		<i class="times icon close"></i>
		<span id="ajax-error-text"></span>
	</div>

	{{-- AJAX Success Messages Container --}}
	<div id="ajax-success" class="ui positive bold circular-corner fluid message" style="display: none;">
		<i class="checkmark icon close"></i>
		<span id="ajax-success-text"></span>
	</div>

	<div class="ui fluid divider"></div>

	<div class="field">
		<label>{{ __('Title') }}</label>
		<input type="text" name="title" required autofocus value="{{ old('title', $story->title) }}" placeholder="{{ __('Enter story title') }}">
	</div>
	
	<div class="field">
		<label>{{ __('Slug') }}</label>
		<input type="text" name="slug" value="{{ old('slug', $story->slug) }}" placeholder="{{ __('Auto-generated from title if left empty') }}">
	</div>

	<div class="field">
		<label>{{ __('Category') }}</label>
		<div class="ui selection floating dropdown">
			<input type="hidden" name="category_id" value="{{ old('category_id', $story->category_id) }}">
			<div class="text">{{ __('Select category') }}</div>
			<div class="menu">
				@foreach($categories as $category)
				<a class="item" data-value="{{ $category->value }}">{{ $category->name }}</a>
				@endforeach
			</div>
		</div>
	</div>

	<div class="field">
		<label>{{ __('Description') }}</label>
		<textarea name="description" class="html-editor" cols="30" rows="6" required placeholder="{{ __('Story description') }}">{{ old('description', $story->description) }}</textarea>
	</div>

	<div class="field">
		<label>{{ __('Content') }} <span class="text-gray-500">({{ __('Optional - Full story content') }})</span></label>
		<textarea name="content" class="html-editor" cols="30" rows="10" placeholder="{{ __('Full story content (optional)') }}">{{ old('content', $story->content) }}</textarea>
	</div>

	<div class="field">
		<label>{{ __('Cover Image') }}</label>
		@if($story->cover_image)
		<div class="ui small image mb-1">
			<img src="{{ asset('storage/' . $story->cover_image) }}" alt="Current cover">
		</div>
		@endif
		<div class="ui left action input">
		  <a class="ui teal labeled icon button" onclick="$('#cover-image-file').click()">
		    <i class="upload icon"></i>
		    {{ __('Browse') }}
		  </a>
		  <input type="file" name="cover_image" id="cover-image-file" class="d-none" accept="image/*">
		  <input type="text" placeholder="{{ __('Select new cover image') }}" readonly>
		</div>
	</div>

	<div class="field">
		<label>{{ __('Audio File') }}</label>
		@if($story->audio_file)
		<div class="ui label mb-1">
			<i class="file audio icon"></i>
			{{ basename($story->audio_file) }}
		</div>
		@endif
		<div class="ui left action input">
		  <a class="ui blue labeled icon button" onclick="$('#audio-file').click()">
		    <i class="upload icon"></i>
		    {{ __('Browse') }}
		  </a>
		  <input type="file" name="audio_file" id="audio-file" class="d-none" accept="audio/*">
		  <input type="text" placeholder="{{ __('Select new audio file') }}" readonly>
		</div>
	</div>

	<div class="field">
		<label>{{ __('Duration') }}</label>
		<input type="text" name="duration" value="{{ old('duration', $story->duration) }}" placeholder="{{ __('e.g., 45:30 or 45 minutes') }}">
	</div>

	<div class="field">
		<label>{{ __('Pricing') }}</label>
		<div class="ui toggle checkbox">
		  <input type="checkbox" name="is_free" value="1" {{ old('is_free', $story->is_free) ? 'checked' : '' }} onchange="togglePriceField()">
		  <label>{{ __('This story is free') }}</label>
		</div>
	</div>

	<div class="field" id="price-field" {{ old('is_free', $story->is_free) ? 'style=display:none' : '' }}>
		<label>{{ __('Price') }}</label>
		<div class="ui left labeled input">
		  <div class="ui label">{{ config('payments.currency_symbol', '$') }}</div>
		  <input type="number" name="price" step="0.01" min="0" value="{{ old('price', $story->price) }}" placeholder="0.00">
		</div>
	</div>

	<div class="field">
		<div class="ui toggle checkbox">
		  <input type="checkbox" name="active" value="1" {{ old('active', $story->active) ? 'checked' : '' }}>
		  <label>{{ __('Active') }}</label>
		</div>
	</div>

</form>

@if(config('app.html_editor') == 'summernote')
<link href="{{ asset_('assets/admin/summernote-lite-0.8.12.css') }}" rel="stylesheet">
<script src="{{ asset_('assets/admin/summernote-lite-0.8.12.js') }}"></script>
@else
<script src="{{ asset_('assets/tinymce_5.9.2/js/jquery.tinymce.min.js') }}"></script>
<script src="{{ asset_('assets/tinymce_5.9.2/js/tinymce.min.js') }}"></script>
@endif

<script>
$(function()
{
	@if(config('app.html_editor') == 'summernote')
	$('.html-editor').summernote({
		placeholder: '...',
		tabsize: 2,
		height: 350,
		tooltip: false
	});
	@else
	window.tinyMceOpts = {
		encoding: "html",
		plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
		menubar: 'file edit view insert format tools table help',
		toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
		toolbar_sticky: true,
		autosave_ask_before_unload: false,
		autosave_interval: '0',
		autosave_prefix: '{path}{query}-{id}-',
		autosave_restore_when_empty: false,
		autosave_retention: '2m',
		image_advtab: true,
		file_picker_types: 'image media',
		importcss_append: true,
		height: 350,
		content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
	};

	tinymce.init(Object.assign(tinyMceOpts, {selector: '.html-editor'}));
	@endif

<script>
$(function()
{
	'use strict';

	$('#story').on('submit', function(e)
	{
		e.preventDefault();

		let form = $(this);
		let formData = new FormData(form[0]);
		let submitBtn = form.find('button[type="submit"]');
		let originalText = submitBtn.html();

		// Validate required fields before submission
		let isValid = true;
		let firstError = '';

		// Check title
		if (!$('input[name="title"]').val().trim()) {
			isValid = false;
			firstError = firstError || '{{ __("Title is required") }}';
		}

		// Check description
		if (!$('textarea[name="description"]').val().trim()) {
			isValid = false;
			firstError = firstError || '{{ __("Description is required") }}';
		}

		// Check category
		if (!$('input[name="category_id"]').val()) {
			isValid = false;
			firstError = firstError || '{{ __("Please select a category") }}';
		}

		// Check price for paid stories
		if (!$('input[name="is_free"]').is(':checked') && !$('input[name="price"]').val()) {
			isValid = false;
			firstError = firstError || '{{ __("Price is required for paid stories") }}';
		}

		if (!isValid) {
			$('#ajax-error-text').text(firstError);
			$('#ajax-errors').show();
			return false;
		}

		// Disable submit button and show loading
		submitBtn.prop('disabled', true).html('<i class="loading icon"></i> {{ __("Updating...") }}');

		// Hide previous messages
		$('#ajax-errors, #ajax-success').hide();

		$.ajax({
			url: form.attr('action'),
			type: 'POST',
			data: formData,
			processData: false,
			contentType: false,
			timeout: 300000, // 5 minutes timeout for large file uploads
			headers: {
				'X-Requested-With': 'XMLHttpRequest'
			},
			xhr: function() {
				let xhr = new window.XMLHttpRequest();
				
				// Upload progress handler
				xhr.upload.addEventListener("progress", function(evt) {
					if (evt.lengthComputable) {
						let percentComplete = (evt.loaded / evt.total) * 100;
						
						if (percentComplete > 10) {
							submitBtn.html('<i class="loading icon"></i> {{ __("Uploading...") }} ' + Math.round(percentComplete) + '%');
						}
					}
				}, false);
				
				return xhr;
			},
			success: function(response) {
				try {
					if(response && response.success) {
						$('#ajax-success-text').text(response.message || '{{ __("Story updated successfully") }}');
						$('#ajax-success').show();
						submitBtn.html('<i class="checkmark icon"></i> {{ __("Success!") }}');
						
						// Redirect after short delay
						setTimeout(function() {
							window.location.href = '{{ route("stories") }}';
						}, 1500);
					} else {
						$('#ajax-error-text').text(response?.message || '{{ __("An unexpected error occurred") }}');
						$('#ajax-errors').show();
						resetButton();
					}
				} catch (e) {
					console.error('Error parsing success response:', e);
					$('#ajax-error-text').text('{{ __("An unexpected error occurred while processing the response") }}');
					$('#ajax-errors').show();
					resetButton();
				}
			},
			error: function(xhr, textStatus, errorThrown) {
				console.error('AJAX Error:', { xhr, textStatus, errorThrown });
				
				let response = null;
				let message = '{{ __("An error occurred while updating the story.") }}';
				
				try {
					response = xhr.responseJSON;
				} catch (e) {
					console.error('Error parsing error response:', e);
				}
				
				// Handle specific error status codes
				if (xhr.status === 413) {
					message = response?.message || '{{ __("File too large. Please check upload size limits.") }}';
				} else if (xhr.status === 422) {
					message = response?.message || '{{ __("Validation failed. Please check your input.") }}';
				} else if (xhr.status === 500) {
					message = response?.message || '{{ __("Server error. Please try again or contact administrator.") }}';
				} else if (xhr.status === 0 || textStatus === 'timeout') {
					message = '{{ __("Request timeout. Please check your internet connection and try again.") }}';
				} else if (xhr.status === 404) {
					message = '{{ __("The requested page was not found. Please refresh and try again.") }}';
				} else {
					message = response?.message || message;
				}
				
				$('#ajax-error-text').text(message);
				$('#ajax-errors').show();
				resetButton();
			}
		});

		function resetButton() {
			submitBtn.prop('disabled', false).html(originalText);
		}
	});

	// Auto-hide message boxes when close button is clicked
	$(document).on('click', '.message .close', function() {
		$(this).closest('.message').fadeOut();
	});

	// Auto-generate slug from title
	$('input[name="title"]').on('input', function() {
		let title = $(this).val();
		let slug = title.toLowerCase()
			.replace(/[^\w\s-]/g, '') // Remove special characters
			.replace(/[\s_-]+/g, '-') // Replace spaces and underscores with hyphens
			.replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens
		
		if(!$('input[name="slug"]').val() || $('input[name="slug"]').data('auto-generated')) {
			$('input[name="slug"]').val(slug).data('auto-generated', true);
		}
	});

	$('input[name="slug"]').on('input', function() {
		$(this).data('auto-generated', false);
	});

	// File input handlers
	$('#cover-image-file').on('change', function() {
		let fileName = $(this)[0].files[0]?.name || '';
		$(this).next('input[type="text"]').val(fileName);
	});

	$('#audio-file').on('change', function() {
		let fileName = $(this)[0].files[0]?.name || '';
		$(this).next('input[type="text"]').val(fileName);
	});
});

function togglePriceField() {
	let isFree = $('input[name="is_free"]').is(':checked');
	if(isFree) {
		$('#price-field').hide();
		$('input[name="price"]').val('0');
	} else {
		$('#price-field').show();
	}
}
</script>
@endsection