@include('header')

<!--**********************************
            Content body start
        ***********************************-->
<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">
            Testimonial Management </h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">
                    Dashboard </a>
            </li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Add Testimonial</a></li>
        </ul>
    </div>
    <div class="container">
        <!-- row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add New Testimonial</h4>
                    </div>
                    <div class="card-body">
                        <div class="form-validation">
                            <form id="testimonialForm" class="needs-validation" enctype="multipart/form-data" novalidate>
                                @csrf
                                <div class="row">

                                    <!-- Client Name -->
                                    <div class="col-xl-6">
                                        <div class="mb-3 row">
                                            <label class="col-lg-4 col-form-label">Client Name <span class="text-danger">*</span></label>
                                            <div class="col-lg-8">
                                                <input type="text" name="name" class="form-control" placeholder="Enter client name" required>
                                                <div class="text-danger error-name"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Job Title / Designation -->
                                    <div class="col-xl-6">
                                        <div class="mb-3 row">
                                            <label class="col-lg-4 col-form-label">Title / Designation</label>
                                            <div class="col-lg-8">
                                                <input type="text" name="title" class="form-control" placeholder="Enter job title or designation">
                                                <div class="text-danger error-title"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Testimonial Text -->
                                    <div class="col-xl-6">
                                        <div class="mb-3 row">
                                            <label class="col-lg-4 col-form-label">Testimonial <span class="text-danger">*</span></label>
                                            <div class="col-lg-8">
                                                <textarea name="testimonial" class="form-control" rows="4" placeholder="Enter testimonial text" required></textarea>
                                                <div class="text-danger error-testimonial"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Rating -->
                                    <div class="col-xl-6">
                                        <div class="mb-3 row">
                                            <label class="col-lg-4 col-form-label">Rating (1-5)</label>
                                            <div class="col-lg-8">
                                                <select name="rating" class="form-control">
                                                    <option value="5" selected>5 Stars ⭐</option>
                                                    <option value="4">4 Stars ⭐⭐⭐⭐</option>
                                                    <option value="3">3 Stars ⭐⭐⭐</option>
                                                    <option value="2">2 Stars ⭐⭐</option>
                                                    <option value="1">1 Star ⭐</option>
                                                </select>
                                                <div class="text-danger error-rating"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Image Upload -->
                                    <div class="col-xl-6">
                                        <div class="mb-3 row">
                                            <label class="col-lg-4 col-form-label">Image</label>
                                            <div class="col-lg-8">
                                                <input type="file" name="image" accept="image/*" class="form-control">
                                                <small class="text-muted">Supported formats: JPG, JPEG, PNG, WEBP (Max: 2MB)</small>
                                                <div class="text-danger error-image"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Display Order -->
                                    <div class="col-xl-6">
                                        <div class="mb-3 row">
                                            <label class="col-lg-4 col-form-label">Display Order</label>
                                            <div class="col-lg-8">
                                                <input type="number" name="order" class="form-control" placeholder="0" value="0" min="0">
                                                <small class="text-muted">Lower number appears first</small>
                                                <div class="text-danger error-order"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Active Status -->
                                    <div class="col-xl-6">
                                        <div class="mb-3 row">
                                            <label class="col-lg-4 col-form-label">Status</label>
                                            <div class="col-lg-8">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="active" id="activeSwitch" checked>
                                                    <label class="form-check-label" for="activeSwitch">
                                                        Active
                                                    </label>
                                                </div>
                                                <div class="text-danger error-active"></div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="row mt-4">
                                    <div class="col-lg-12">
                                        <button type="submit" class="btn btn-primary me-2">Save Testimonial</button>
                                        <a href="{{ route('testimonial.manage') }}" class="btn btn-secondary">Cancel</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@include('footer')

<script>
(function() {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
        .forEach(function(form) {
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
})()
</script>

<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('testimonialForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        
        fetch("{{ route('testimonial.store') }}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                window.location.href = "{{ route('testimonial.manage') }}";
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while saving the testimonial.');
        });
    });
});
</script>