@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">Update Blog</p>

                        <!-- Update Form -->
                        <form action="{{ route('updateblog', $blog->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('POST') <!-- Use PUT method for updating -->

                            <!-- Paragraph 1 -->
                            <div class="form-group">
                                <label for="paragraph1">Paragraph 1</label>
                                <textarea name="paragraph1" id="paragraph1" class="form-control" required>{{ old('paragraph1', $blog->paragraph1) }}</textarea>
                            </div>

                            <!-- Paragraph 2 -->
                            <div class="form-group">
                                <label for="paragraph2">Paragraph 2</label>
                                <textarea name="paragraph2" id="paragraph2" class="form-control" required>{{ old('paragraph2', $blog->paragraph2) }}</textarea>
                            </div>

                            <!-- Paragraph 3 -->
                            <div class="form-group">
                                <label for="paragraph3">Paragraph 3</label>
                                <textarea name="paragraph3" id="paragraph3" class="form-control" required>{{ old('paragraph3', $blog->paragraph3) }}</textarea>
                            </div>

                            <!-- Title 1 -->
                            <div class="form-group">
                                <label for="title1">Table 1, Title</label>
                                <input type="text" name="title1" id="title1" class="form-control" value="{{ old('title1', $blog->title1) }}" required>
                            </div>

                            <!-- Title 2 -->
                            <div class="form-group">
                                <label for="title2">Table 2, Title</label>
                                <input type="text" name="title2" id="title2" class="form-control" value="{{ old('title2', $blog->title2) }}" required>
                            </div>

                            <!-- Title Paragraph 1 -->
                            <div class="form-group">
                                <label for="title1_p">Table 1, Title Paragraph</label>
                                <input type="text" name="title1_p" id="title1_p" class="form-control" value="{{ old('title1_p', $blog->title1_p) }}" required>
                            </div>

                            <!-- Title Paragraph 2 -->
                            <div class="form-group">
                                <label for="title2_p">Table 2, Title Paragraph</label>
                                <input type="text" name="title2_p" id="title2_p" class="form-control" value="{{ old('title2_p', $blog->title2_p) }}" 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">
                                    @foreach (json_decode($blog->title1_content) as $content)
                                        <div class="input-group mb-2">
                                            <input type="text" name="title1_content[]" class="form-control" value="{{ old('title1_content[]', $content) }}" placeholder="Enter Title 1 Content" required>
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-danger remove-field">-</button>
                                            </div>
                                        </div>
                                    @endforeach
                                    <div class="input-group mb-2">
                                        <input type="text" name="title1_content[]" class="form-control" placeholder="Enter Title 1 Content">
                                        <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">
                                    @foreach (json_decode($blog->title2_content) as $content)
                                        <div class="input-group mb-2">
                                            <input type="text" name="title2_content[]" class="form-control" value="{{ old('title2_content[]', $content) }}" placeholder="Enter Title 2 Content" required>
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-danger remove-field">-</button>
                                            </div>
                                        </div>
                                    @endforeach
                                    <div class="input-group mb-2">
                                        <input type="text" name="title2_content[]" class="form-control" placeholder="Enter Title 2 Content">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-success add-more">+</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Title 1 Paragraph Bottom -->
                            <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" value="{{ old('title1_pb', $blog->title1_pb) }}" required>
                            </div>

                            <!-- Title 2 Paragraph Bottom -->
                            <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" value="{{ old('title2_pb', $blog->title2_pb) }}" 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" value="{{ old('card1', $blog->card1) }}" 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>{{ old('card1_content', $blog->card1_content) }}</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" value="{{ old('card2', $blog->card2) }}" 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>{{ old('card2_content', $blog->card2_content) }}</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" value="{{ old('card3', $blog->card3) }}" 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>{{ old('card3_content', $blog->card3_content) }}</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">
                                @if ($blog->image1)
                                    <img src="{{ asset($blog->image1) }}" alt="Image 1" width="100">
                                @endif
                            </div>

                            <!-- Image 2 -->
                            <div class="form-group">
                                <label for="image2">Image 2</label>
                                <input type="file" name="image2" id="image2" class="form-control-file">
                                @if ($blog->image2)
                                    <img src="{{ asset($blog->image2) }}" alt="Image 2" width="100">
                                @endif
                            </div>

                            <!-- Image 3 -->
                            <div class="form-group">
                                <label for="image3">Image 3</label>
                                <input type="file" name="image3" id="image3" class="form-control-file">
                                @if ($blog->image3)
                                    <img src="{{ asset($blog->image3) }}" alt="Image 3" width="100">
                                @endif
                            </div>

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

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->

    <!-- 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>

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

            $('#title1_content_group').on('click', '.add-more', function() {
                addTitle1InputField();
            });

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

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

            $('#title2_content_group').on('click', '.add-more', function() {
                addTitle2InputField();
            });

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

@endsection