@extends('backend.layouts.app')
@section('content')
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Testimonials</h4>
   </div>
   <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">
         <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
         <li class="breadcrumb-item "><a href="{{route('testimonials')}}">Testimonials</a></li> 
                    <li class="breadcrumb-item active">Edit Testimonials</li>
         </ol>
      </div>
   </div>
</div>

<div class="container-fluid">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
   
        <!-- Main content -->
        <section class="content">
            <div class="row">                                 
                <div class="col-md-12">   
                    <div class="card card-primary">
                        <!-- form start -->
                        <form action="{{ route('testimonials.update', $testimonials->id) }}" method="POST" id="form" enctype="multipart/form-data">
                            @csrf
                            @method('POST') <!-- Use PUT for update operations -->
                            <input type="hidden" name="id" value="{{ $testimonials->id }}">

                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="emailname">User Name<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                            <input type="text" name="name" class="form-control" placeholder="Enter Name" pattern="^[a-zA-Z_ ]*$" id="emailname" value="{{ old('name', $testimonials->name) }}">
                                            @error('name')
                                                <p style="color:red;">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="rating">Rating<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                            <input type="number" name="rating" class="form-control" placeholder="Enter Rating" min="1" max="5" id="rating" value="{{ old('rating', $testimonials->rating) }}">
                                            @error('rating')
                                                <p style="color:red;">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="email_content">Description<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                            <textarea rows="4" name="description" class="form-control" placeholder="Enter Description" id="email_content">{{ old('description', $testimonials->description) }}</textarea>
                                            @error('description')
                                                <p style="color:red;">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="user_image">User Image</label>
                                            <input type="file" name="user_image" class="form-control" id="user_image" onchange="previewImage(event)">
                                            @error('user_image')
                                                <p style="color:red;">{{ $message }}</p>
                                            @enderror
                                        </div>

                                        <!-- Preview existing image if available -->
                                        @if(isset($testimonials->user_image) && $testimonials->user_image)
                                            <div class="form-group">
                                                <img id="image-preview" src="{{ asset('uploads/testimonials/' . $testimonials->user_image) }}" alt="Image Preview" style="display: block; width: 200px; height: 200px;">
                                            </div>
                                        @else
                                            <!-- Placeholder for new image preview -->
                                            <div class="form-group">
                                                <img id="image-preview" src="#" alt="Image Preview" style="display: none; width: 200px; height: 200px;">
                                            </div>
                                        @endif
                                    </div>


                                    <div class="col-sm-6">
                                        <div class="custom-control custom-checkbox mr-sm-2 m-b-15">
                                            <input type="checkbox" class="custom-control-input" name="status" id="checkbox0" value="1" {{ $testimonials->status == 1 ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="checkbox0">Is Active</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <button type="submit" id="submitButton" class="btn btn-primary">Submit</button>
                                <a href="{{ route('testimonials') }}" class="btn btn-secondary">Back</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script>
  function previewImage(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function() {
        var dataURL = reader.result;
        var output = document.getElementById('image-preview');
        output.src = dataURL;
        output.style.display = 'block'; // Show the preview image
    };
    
    if (input.files && input.files[0]) {
        reader.readAsDataURL(input.files[0]); // Read the selected file
    }
}


    $(document).ready(function() {
        $.validator.addMethod("noOnlySpaces", function(value, element) {
            return $.trim(value).length !== 0;
        }, "Please enter a value other than spaces.");

        $('#form').validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 100,
                    noOnlySpaces: true,
                },
                description: {
                    required: true,
                    maxlength: 250,
                    noOnlySpaces: true,
                },
                rating: {
                    required: true,
                    maxlength: 5,
                },
            },
            errorClass: "error",
            highlight: function(element) {
                $(element).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid').addClass('is-valid');
            }
        });
    });
</script>

@stop
