@extends('backend.layout.layouts')

@section('content')
    <div class="container mx-auto">
        <div class="container">
            <div class="flex justify-between my-10">
                <h2 class="text-2xl ">Testimonials</h2>
                <a href="{{ route('testimonials.create') }}"
                    class="w-32 py-4 text-center text-white bg-gray-600 hover:text-gray-300 btn btn-success">Add
                </a>
            </div>

            @if (session('success'))
                <div class="px-4 py-2 mb-4 text-green-800 bg-green-200 border border-green-600 rounded">
                    {{ session('success') }}
                </div>
            @endif
            <table id="testimonialTable" class="table text-center table-striped">
                <thead>
                    <tr>
                        <th>Customer Name</th>
                        <th>Testimony</th>
                        <th>Picture</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>


        <div id="addTestimonyModal"
            class="fixed inset-0 z-50 flex items-center justify-center hidden p-4 bg-black bg-opacity-70">
            <div class="w-full max-w-lg overflow-hidden bg-white rounded-lg shadow-lg">
                <div class="flex items-center justify-between p-4 bg-gray-200 border-b">
                    <h5 class="text-xl font-semibold">Add Testimony</h5>
                    <button type="button" class="text-gray-600 hover:text-gray-900"
                        onclick="closeModal('addTestimonyModal')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('testimonials.store') }}" method="POST" enctype="multipart/form-data"
                    class="p-4">
                    @csrf
                    <div class="space-y-4">



                        <div class="form-group">
                            <label for="customer_name" class="block text-sm font-medium text-gray-700">Customer Name</label>
                            <input type="text"
                                class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('customer_name') border-red-500 @enderror"
                                id="customer_name" name="customer_name" value="{{ old('customer_name') }}" required>
                            @error('customer_name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="testimony" class="block text-sm font-medium text-gray-700">Testimony</label>
                            <input type="text"
                                class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('testimony') border-red-500 @enderror"
                                id="testimony" name="testimony" value="{{ old('testimony') }}" required>
                            @error('testimony')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="picture" class="block text-sm font-medium text-gray-700">Picture</label>
                            <input type="file"
                                class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('picture') border-red-500 @enderror"
                                id="picture" name="picture">
                            @error('picture')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="flex justify-end p-4 bg-gray-200 border-t">
                        <button type="button" class="mr-2 btn btn-secondary" data-dismiss="modal"
                            onclick="closeModal('addProductModal')">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>

        @foreach ($testimonial as $testimony)
            <!-- Edit Contact Modal -->
            <div id="edittestimonialModal{{ $testimony->id }}"
                class="fixed inset-0 z-50 flex items-center justify-center hidden p-4 bg-black bg-opacity-80">
                <div class="w-full max-w-md bg-gray-100 rounded-lg shadow-lg">
                    <div class="flex items-center justify-between p-4 border-b modal-header">
                        <h5 class="text-xl font-semibold">Edit Testimony</h5>
                        <button type="button" class="text-gray-600 hover:text-gray-900"
                            onclick="closeModal('edittestimonialModal{{ $testimony->id }}')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="p-4 modal-body">
                        <form id="editProductForm{{ $testimony->id }}"
                            action="{{ route('testimonials.update', $testimony->id) }}" method="POST"
                            enctype="multipart/form-data" class="p-4">
                            @csrf
                            @method('PUT') <!-- Use PUT for update -->
                            <div class="space-y-4">

                                <div class="form-group">
                                    <label for="customer_name" class="block text-sm font-medium text-gray-700">Customer
                                        Name</label>
                                    <input type="text"
                                        class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('customer_name') border-red-500 @enderror"
                                        id="customer_name" name="customer_name"
                                        value="{{ old('customer_name', $testimony->customer_name) }}" required>
                                    @error('customer_name')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="testimony" class="block text-sm font-medium text-gray-700">Testimony
                                    </label>
                                    <input type="text"
                                        class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('testimony') border-red-500 @enderror"
                                        id="testimony" name="testimony"
                                        value="{{ old('testimony', $testimony->testimony) }}" required>
                                    @error('testimony')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="picture" class="block text-sm font-medium text-gray-700">Picture</label>
                                    <input type="file"
                                        class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('picture') border-red-500 @enderror"
                                        id="picture" name="picture">
                                    @error('picture')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="flex justify-end p-4 bg-gray-200 border-t">
                                <button type="button" class="mr-2 btn btn-secondary" data-dismiss="modal"
                                    onclick="closeModal('edittestimonialModal{{ $testimony->id }}')">Close</button>
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <!-- Delete Contact Modal -->
            <div id="deletetestimonialModal{{ $testimony->id }}"
                class="fixed inset-0 z-50 flex items-center justify-center hidden p-4 bg-black bg-opacity-80">
                <div class="w-full max-w-md bg-gray-100 rounded-lg shadow-lg">
                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-4 bg-gray-200 border-b rounded-t-lg">
                        <h5 class="text-xl font-semibold" id="deleteModalLabel{{ $testimony->id }}">Delete Testimony
                        </h5>
                        <button type="button" class="text-gray-600 hover:text-gray-900"
                            onclick="closeModal('deletetestimonialModal{{ $testimony->id }}')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="p-4">
                        <p>Are you sure you want to delete this Testimonial?</p>
                    </div>

                    <!-- Modal Footer -->
                    <div class="flex justify-end p-4 bg-gray-200 border-t rounded-b-lg">
                        <form action="{{ route('testimonials.destroy', $testimony->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                class="px-4 py-2 text-white bg-red-600 rounded hover:bg-red-700">Delete</button>
                            <button type="button"
                                class="px-4 py-2 ml-2 text-gray-700 bg-gray-300 rounded hover:bg-gray-400"
                                onclick="closeModal('deletetestimonialModal{{ $testimony->id }}')">Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach


        <script>
            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
            }

            // Close modal
            function closeModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
            }
        </script>
        <script>
            $(document).ready(function() {
                $('#testimonialTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('testimonials.index') }}",
                        type: 'GET'
                    },
                    columns: [{
                            data: 'customer_name',
                            name: 'customer_name'
                        },
                        {
                            data: 'testimony',
                            name: 'testimony'
                        },

                        {
                            data: 'picture',
                            name: 'picture',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'actions',
                            name: 'actions',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });

            });
        </script>

    </div>
@endsection