@extends('admin.layout.header')
@section('content')

<!-- partial -->
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">Add Blog</p>

                        <form action="{{ route('add-blog') }}" method="POST" enctype="multipart/form-data">
                            @csrf



                            <!-- Paragraph 1 -->
                            <div class="form-group">
                                <label for="paragraph1">Paragraph 1</label>
                                <textarea name="paragraph1" id="paragraph1" class="form-control" required></textarea>
                            </div>

                            <!-- Paragraph 2 -->
                            <div class="form-group">
                                <label for="paragraph2">Paragraph 2</label>
                                <textarea name="paragraph2" id="paragraph2" class="form-control" required></textarea>
                            </div>

                            <!-- Paragraph 3 -->
                            <div class="form-group">
                                <label for="paragraph3">Paragraph 3</label>
                                <textarea name="paragraph3" id="paragraph3" class="form-control" required></textarea>
                            </div>


                            <!-- Title 1 -->
                            <div class="form-group">
                                <label for="title1">Table1, Title </label>
                                <input type="text" name="title1" id="title1" class="form-control" required>
                            </div>

                            <!-- Title 2 -->
                            <div class="form-group">
                                <label for="title2">Table2, Title </label>
                                <input type="text" name="title2" id="title2" class="form-control" required>
                            </div>

                            <!-- Title Paragraph 1 -->
                            <div class="form-group">
                                <label for="title1_p">Table2 , Title Paragraph </label>
                                <input type="text" name="title1_p" id="title1_p" class="form-control" required>
                            </div>

                            <!-- Title Paragraph 2 -->
                            <div class="form-group">
                                <label for="title2_p">Table1, Title Paragraph </label>
                                <input type="text" name="title2_p" id="title2_p" class="form-control" required>
                            </div>

                            <!-- Title 1 Content (Array of Inputs) -->
                            <div class="form-group">
                                <label for="title1_content">Table, 1, Title Content</label>
                                <div id="title1_content_group">
                                    <div class="input-group mb-2">
                                        <input type="text" name="title1_content[]" class="form-control" placeholder="Enter Title 1 Content" required>
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-success add-more">+</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Title 2 Content (Array of Inputs) -->
                            <div class="form-group">
                                <label for="title2_content">Table 2, Title Content</label>
                                <div id="title2_content_group">
                                    <div class="input-group mb-2">
                                        <input type="text" name="title2_content[]" class="form-control" placeholder="Enter Title 2 Content" required>
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-success add-more">+</button>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <!-- Title 1 Paragraph -->
                            <div class="form-group">
                                <label for="title1_pb">Table, Title 1 Paragraph bottom</label>
                                <input type="text" name="title1_pb" id="title1_pb" class="form-control" required>
                            </div>

                            <!-- Title 2 Paragraph -->
                            <div class="form-group">
                                <label for="title2_pb">Table,, Title 2 Paragraph bottom</label>
                                <input type="text" name="title2_pb" id="title2_pb" class="form-control" required>
                            </div>

                            <!-- Card 1 -->
                            <div class="form-group">
                                <label for="card1">Card 1 title</label>
                                <input type="text" name="card1" id="card1" class="form-control" required>
                            </div>

                            <!-- Card 1 Content -->
                            <div class="form-group">
                                <label for="card1_content">Card 1 Content</label>
                                <textarea name="card1_content" id="card1_content" class="form-control" required></textarea>
                            </div>

                            <!-- Card 2 -->
                            <div class="form-group">
                                <label for="card2">Card 2 title</label>
                                <input type="text" name="card2" id="card2" class="form-control" required>
                            </div>

                            <!-- Card 2 Content -->
                            <div class="form-group">
                                <label for="card2_content">Card 2 Content</label>
                                <textarea name="card2_content" id="card2_content" class="form-control" required></textarea>
                            </div>

                            <!-- Card 3 -->
                            <div class="form-group">
                                <label for="card3">Card 3 title</label>
                                <input type="text" name="card3" id="card3" class="form-control" required>
                            </div>

                            <!-- Card 3 Content -->
                            <div class="form-group">
                                <label for="card3_content">Card 3 Content</label>
                                <textarea name="card3_content" id="card3_content" class="form-control" required></textarea>
                            </div>

                            <!-- Image 1 -->
                            <div class="form-group">
                                <label for="image1">Image 1</label>
                                <input type="file" name="image1" id="image1" class="form-control-file" required>
                            </div>

                            <!-- Image 2 -->
                            <div class="form-group">
                                <label for="image2">Image 2</label>
                                <input type="file" name="image2" id="image2" class="form-control-file" required>
                            </div>

                            <!-- Image 3 -->
                            <div class="form-group">
                                <label for="image3">Image 3</label>
                                <input type="file" name="image3" id="image3" class="form-control-file" required>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" class="btn btn-primary">Add Blog</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->

    <!-- jQuery and Bootstrap scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            // Function to add new input field for Title 1 Content
            function addTitle1InputField() {
                const newInput = `
            <div class="input-group mb-2">
                <input type="text" name="title1_content[]" class="form-control" placeholder="Enter Title 1 Content" required>
                <div class="input-group-append">
                    <button type="button" class="btn btn-danger remove-field">-</button>
                </div>
            </div>
        `;
                $('#title1_content_group').append(newInput);
            }

            // Event handler for add-more button for Title 1 Content
            $('#title1_content_group').on('click', '.add-more', function() {
                addTitle1InputField();
            });

            // Event handler for remove-field button
            $(document).on('click', '.remove-field', function() {
                $(this).closest('.input-group').remove();
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // Function to add new input field for Title 2 Content
            function addTitle2InputField() {
                const newInput = `
            <div class="input-group mb-2">
                <input type="text" name="title2_content[]" class="form-control" placeholder="Enter Title 2 Content" required>
                <div class="input-group-append">
                    <button type="button" class="btn btn-danger remove-field">-</button>
                </div>
            </div>
        `;
                $('#title2_content_group').append(newInput);
            }

            // Event handler for add-more button for Title 2 Content
            $('#title2_content_group').on('click', '.add-more', function() {
                addTitle2InputField();
            });

            // Event handler for remove-field button
            $(document).on('click', '.remove-field', function() {
                $(this).closest('.input-group').remove();
            });
        });
    </script>

    @endsection