<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <!-- Quill CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <!-- Font Awesome CSS -->
    <style>
        body {
            background-color: #f8f9fa;
            color: #343a40;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #007bff;
        }
        .alert {
            margin-bottom: 20px;
        }
        .table {
            background-color: #ffffff;
        }
        .table th {
            background-color: #007bff;
            color: white;
        }
        .card {
            cursor: pointer; /* Makes the card clickable */
        }
    </style>
</head>
<body>
    <div class="container mt-5">
   

       

        <!-- Button to trigger Add Content modal -->
        <button class="btn btn-primary mb-4" data-toggle="modal" data-target="#addContentModal">
            Add Content
        </button>

        <!-- Add Content Modal -->
        <div class="modal fade" id="addContentModal" tabindex="-1" role="dialog" aria-labelledby="addContentModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form action="{{ route('contents.store') }}" method="POST">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title" id="addContentModalLabel">Add New Content</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                           <div class="form-group">
    <label for="content_name">Content Name</label>
    <select class="form-control" id="content_name" name="content_name" required>
        <option value="">Select Content Type</option>
        <option value="Terms and Conditions">Terms and Conditions</option>
        <option value="Privacy Policy">Privacy Policy</option>
        <option value="Content Policy">Content Policy</option>
        <option value="About Us">About Us</option>
        <option value="Donation">Donation</option>
        <option value="Minimum_order">Minimum Order</option>
        <option value="Phone Number">Phone Number</option>
    </select>
</div>
                            <div class="form-group">
                                <label for="content">Content</label>
                                <div id="editor" style="height: 200px;"></div>
                                <input type="hidden" name="content" id="content" required>
                                <small class="form-text text-muted">Use <strong>bold</strong>, <em>italic</em>, and other HTML tags.</small>
                            </div>
                            <div class="form-group">
                                <label for="role">Role</label>
                                <select class="form-control" id="role" name="role" required>
                                    <option value="user">User</option>
                                    <option value="vendor">Vendor</option>
                                    <option value="driver">Driver</option>
                                    <option value="all">All</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Add Content</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="row">
            @forelse($contents as $content)
                <div class="col-md-4 mb-4">
                    <div class="card" >
                        <div class="card-header">
                            <h5>{{ $content->content_name }} For {{ $content->role }}</h5>
                        </div>
                        <div class="card-body">
                            <p>{!! Str::limit(strip_tags($content->content), 100) !!}</p>
                            <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#contentModal{{ $content->id }}">
                                <i class="fas fa-eye"></i> View
                            </button>
                            <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#editModal{{ $content->id }}">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <form action="{{ route('contents.destroy', $content->id) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this content?');">
                                    <i class="fas fa-trash-alt"></i> Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- View Modal -->
                <div class="modal fade" id="contentModal{{ $content->id }}" tabindex="-1" role="dialog" aria-labelledby="contentModalLabel{{ $content->id }}" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="contentModalLabel{{ $content->id }}">{{ $content->content_name }} For {{ $content->role }}</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                {!! $content->content !!}
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Edit Modal -->
                <div class="modal fade" id="editModal{{ $content->id }}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel{{ $content->id }}" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <form action="{{ route('contents.update', $content->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="modal-header">
                                    <h5 class="modal-title" id="editModalLabel{{ $content->id }}">Edit {{ $content->content_name }}</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                   <div class="form-group">
    <label for="edit_content_name">Content Name</label>
    <select class="form-control" id="edit_content_name" name="content_name" required>
        <option value="">Select Content Type</option>
        <option value="Terms and Conditions" {{ $content->content_name == 'Terms and Conditions' ? 'selected' : '' }}>Terms and Conditions</option>
        <option value="Privacy Policy" {{ $content->content_name == 'Privacy Policy' ? 'selected' : '' }}>Privacy Policy</option>
        <option value="Content Policy" {{ $content->content_name == 'Content Policy' ? 'selected' : '' }}>Content Policy</option>
        <option value="About Us" {{ $content->content_name == 'About Us' ? 'selected' : '' }}>About Us</option>
        <option value="Donation" {{ $content->content_name == 'Donation' ? 'selected' : '' }}>Donation</option>
        <option value="Minimum_order" {{ $content->content_name == 'Minimum_order' ? 'selected' : '' }}>Minimum Order</option>
        <option value="Phone Number" {{ $content->content_name == 'Phone Number' ? 'selected' : '' }}>Phone Number</option>
    </select>
</div>
                                    <div class="form-group">
                                        <label for="edit_content">Content</label>
                                        <div id="edit_editor{{ $content->id }}" style="height: 200px;"></div>
                                        <input type="hidden" name="content" id="edit_content{{ $content->id }}" required>
                                        <small class="form-text text-muted">Use <strong>bold</strong>, <em>italic</em>, and other HTML tags.</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="edit_role">Role</label>
                                        <select class="form-control" id="edit_role" name="role" required>
                                            <option value="user" {{ $content->role == 'user' ? 'selected' : '' }}>User</option>
                                            <option value="vendor" {{ $content->role == 'vendor' ? 'selected' : '' }}>Vendor</option>
                                            <option value="driver" {{ $content->role == 'driver' ? 'selected' : '' }}>Driver</option>
                                            <option value="all" {{ $content->role == 'all' ? 'selected' : '' }}>All</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Update Content</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-md-12 text-center">
                    <p>No contents available.</p>
                </div>
            @endforelse
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
        // Initialize Quill editor for adding content
 // Initialize Quill editor for adding content
var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: [
            [{ 'header': [1, 2, false] }], // Header options
            ['bold', 'italic', 'underline'], // toggled buttons
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // List options
            [{ 'align': [] }], // Alignment options
            ['link'] // Only link, remove image
        ]
    }
});

// Initialize Quill editor for editing content
@foreach($contents as $content)
    var editQuill{{ $content->id }} = new Quill('#edit_editor{{ $content->id }}', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, false] }], // Header options
                ['bold', 'italic', 'underline'], // toggled buttons
                [{ 'list': 'ordered' }, { 'list': 'bullet' }], // List options
                [{ 'align': [] }], // Alignment options
                ['link'] // Only link, remove image
            ]
        }
    });

    // Set the content for the editor
    editQuill{{ $content->id }}.clipboard.dangerouslyPasteHTML('{!! addslashes($content->content) !!}');
@endforeach


        // On form submit, get the content from the editor
        $('form').on('submit', function() {
            var content = quill.root.innerHTML;
            $('#content').val(content);

            @foreach($contents as $content)
                var editContent = editQuill{{ $content->id }}.root.innerHTML;
                $('#edit_content{{ $content->id }}').val(editContent);
            @endforeach
        });
    </script>
</body>
</html>
