@extends('admin.layouts.master')
@section('content')

<br>
<br>
<div class="breadcrumbs">
	<div class="col-sm-4">
		<div class="page-header float-left">
			<div class="page-title">
				<h1>Testimonials</h1>
			</div>
		</div>
	</div>
</div>

    <div class="content mt-3">
		<div class="col-sm-8">
			<div class="page-header float-left">
				<div class="page-title">
					<ol class="breadcrumb text-right">
						<a href="javascript:void(0);" id="addTestimonialBtn" class="btn btn-primary">Add testimonial</a> 
					</ol>
				</div>
			</div>
			<div class=" float-left">
				<div class="page-title">
					<ol class="breadcrumb text-right">
						<a href="javascript:void(0);" id="viewTestimonialBtn" class="btn btn-primary">View testimonials</a> 
					</ol>
				</div>
			</div>
		</div>

        <div id="addTestimonialSection" class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ isset($test) ? route('testimonials.update', $test->id) : route('testimonials.handleForm') }}" id="testimonialForm" method="POST">
                        @csrf
                        @if(isset($test))
						@method('POST') 
						    <input type="hidden" name="test_id" value="{{ $test->id }}">
					    @endif
                        <div class="form-group">
                            <label>Feedback</label>
                            <input type="text" class="form-control" name="feedback" value="{{ isset($test) ? $test->feedback : '' }}" >
                        </div>

                        <div class="form-group">
                            <label>Upload profile image (format: jpg, png, recommended size: 48x48,56x66 and etc..)</label>
                            <input type="file" name="user_image" class="form-control" value="{{ isset($test) ? $test->user_image : '' }}"  >
					    </div>
                        <button type="submit" class="btn btn-primary" name="btn_add"><i class="fa fa-plus"></i>{{ isset($test) ? 'Edit' : 'Add' }}</button>
                    </form>
                </div>
            </div>
        </div>

        <div id="viewTestimonialSection" class="content mt-3">
            <div class="card">
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th width="40%">Feedback</th>
                                <th width="20%">created_at</th>
                                <th width="20%">updated_at</th>
                                <th width="10%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($tests as $t)
                            <tr>
                                <td>{{ $t->feedback }}</td>
                                <td>{{ $t->created_at }}</td>
                                <td>{{ $t->updated_at }}</td>
                                <td>
                                    <a href="{{ route('testimonials.edit', $t->id) }}" id="submitBtn" class="editTestimonial" title="Edit"><i class="fa fa-pencil"></i></a> &nbsp; &nbsp; 
                                    <a href="javascript:void(0);" class="deleteBtn" data-merchant-id="{{ $t->id }}"  title="Delete"><i class="fa fa-times"></i></a>	
                                </td>
                            @endforeach 
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- script for toggling section -->
    <script>
        $(document).ready(function() {
            $('#addTestimonialSection').show();
            $('#viewTestimonialSection').hide();

            $('#addTestimonialBtn').click(function() {
                $('#addTestimonialSection').fadeIn();
                $('#viewTestimonialSection').hide();
            });

            $('#viewTestimonialBtn').click(function() {
                $('#viewTestimonialSection').fadeIn();
                $('#addTestimonialSection').hide();
            });
        });
    </script>

    <!-- for form submission -->
	<script>
		$('#testimonialForm').on('submit', function (event) {
			event.preventDefault(); 

			var formData = new FormData(); 

			// Append all form fields manually
			formData.append('_token', $('input[name="_token"]').val());
			formData.append('feedback', $('input[name="feedback"]').val());

			// Add the file upload field to FormData
			var imageFile = $('input[name="user_image"]')[0].files[0];
			if (imageFile) {
				formData.append('user_image', imageFile);
			}

			$.ajax({
				type: 'POST',
				url: $(this).attr('action'),
				data: formData,
				processData: false, // Prevent jQuery from processing data
				contentType: false, // Allow content type to be set as multipart/form-data
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function (response) {
					toastr.success(response.message);
					$('#testimonialForm')[0].reset();
				},
				error: function (xhr) {
					const errors = xhr.responseJSON.errors;
					for (const field in errors) {
						toastr.error(errors[field][0], 'Error');
					}
				}
			});
		});
	</script>

    <!-- script for deletion -->
    <script>
        $(document).ready(function() {
            $('a.deleteBtn').click(function(e) {
                e.preventDefault(); 

                var tId = $(this).data('merchant-id'); 
                var row = $(this).closest('tr'); 

                // Ask for confirmation before deletion
                if (confirm('Are you sure you want to delete this testimonial?')) {
                    $.ajax({
                        url: '{{ route("testimonials.delete") }}', 
                        type: 'DELETE',
                        data: {
                            id: tId,
                            _token: '{{ csrf_token() }}' 
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success('testimonial deleted successfully');
                                row.remove(); 
                            } else {
                                toastr.error(response.message || 'Failed to delete testimonial');
                            }
                        },
                        error: function(xhr) {
                            console.error(xhr.responseText);
                            toastr.error('An error occurred while deleting the testimonial');
                        }
                    });
                }
            });
        });
    </script>

@endsection