@extends('admin.master')

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

@section('content')

<form class="ui large form" id="story_category" method="post" action="{{ route('story_categories.update', $category->id) }}">
	@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('story_categories') }}">
			<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>{{ __('Name') }}</label>
		<input type="text" name="name" required autofocus value="{{ old('name', $category->name) }}" placeholder="{{ __('Enter category name') }}">
	</div>
	
	<div class="field">
		<label>{{ __('Slug') }}</label>
		<input type="text" name="slug" value="{{ old('slug', $category->slug) }}" placeholder="{{ __('Auto-generated from name if left empty') }}">
	</div>

	<div class="field">
		<label>{{ __('Description') }}</label>
		<textarea name="description" cols="30" rows="4" placeholder="{{ __('Optional description') }}">{{ old('description', $category->description) }}</textarea>
	</div>

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

</form>

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

	$('#story_category').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 name
		if (!$('input[name="name"]').val().trim()) {
			isValid = false;
			firstError = '{{ __("Name is required") }}';
		}

		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: 30000, // 30 seconds timeout
			headers: {
				'X-Requested-With': 'XMLHttpRequest'
			},
			success: function(response) {
				try {
					if(response && response.success) {
						$('#ajax-success-text').text(response.message || '{{ __("Story category updated successfully") }}');
						$('#ajax-success').show();
						submitBtn.html('<i class="checkmark icon"></i> {{ __("Success!") }}');
						
						// Redirect after short delay
						setTimeout(function() {
							window.location.href = '{{ route("story_categories") }}';
						}, 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 category.") }}';
				
				try {
					response = xhr.responseJSON;
				} catch (e) {
					console.error('Error parsing error response:', e);
				}
				
				// Handle specific error status codes
				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 name
	$('input[name="name"]').on('input', function() {
		let name = $(this).val();
		let slug = name.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);
	});
});
</script>
@endsection