@extends('layouts.backend')

@section('main')
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        Blogs
                        Create</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Blogs</li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Blogs Create</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->

            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                <!--begin::Card-->
                <div class="card">
                    <!--begin::Card body-->
                    <div class="card-body py-4">

                        <form action="{{ route('project.blog.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <h1>Blogs Information :-</h1>


                            @if ($dataDetails->count() > 0)
                                @foreach ($dataDetails as $index => $info)
                                    <div class="row" id="row-{{ $index }}">
                                        <div class="col-md-4 mb-3">
                                            <div>
                                                <label for="category" class="form-label">Category</label>
                                                <input type="text" name="category[]" id="category"
                                                    class="form-control @error('category') is-invalid @enderror"
                                                    value="{{ $info->category ?? '' }}" placeholder="Enter category">
                                                @error('category')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="title" class="form-label">Title</label>
                                            <input type="text" name="title[]" id="title"
                                                class="form-control @error('title') is-invalid @enderror"
                                                value="{{ $info->title ?? '' }}" placeholder="Enter title">
                                            @error('title')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="author" class="form-label">Author</label>
                                            <input type="text" name="author[]" id="author"
                                                class="form-control @error('author') is-invalid @enderror"
                                                value="{{ $info->author ?? '' }}" placeholder="Enter author">
                                            @error('author')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-8 mb-3">
                                            <label for="description" class="form-label"> Description</label>
                                            <textarea name="description[]" class="form-control summernote" cols="30" rows="3">{{ $info->description ?? '' }}</textarea>

                                            @error('description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="">
                                                <div>
                                                    <label for="details_image" class="form-label">Image</label>
                                                    <input type="file" name="details_image[]" id="details_image"
                                                        class="form-control @error('details_image') is-invalid @enderror">
                                                </div>
                                                <img src="{{ asset('uploads/blog/' . $info->image) }}" alt=""
                                                    style="width: 150px; height: 150px;">
                                            </div>
                                            <input type="hidden" name="old_details_image[]" value="{{ $info->image }}">

                                            @error('details_image')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>


                                        @if ($index > 0)
                                            <div class="col-md-1 mb-1">
                                                <button type="button" class="remove btn btn-sm btn-danger text-center ml-2"
                                                    style="margin-top:32px" onclick="removeRow({{ $index }})">
                                                    <i class="fa fa-minus"></i>
                                                </button>
                                            </div>
                                        @else
                                            <div class="col-md-1 mb-3 d-flex justify-content-center align-items-center">

                                                <button type="button" class="btn btn-sm btn-success"
                                                    style="margin-top: 22px;" onclick="addField()"><i
                                                        class="fa-solid fa-plus"></i></button>
                                            </div>
                                        @endif

                                    </div>
                                @endforeach
                                <div id="wrapper"></div>
                            @else
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <div>
                                            <label for="category" class="form-label">Category</label>
                                            <input type="text" name="category[]" id="category"
                                                class="form-control @error('category') is-invalid @enderror"
                                                value="{{ $info->category ?? '' }}" placeholder="Enter category">
                                            @error('category')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="title" class="form-label">Title</label>
                                        <input type="text" name="title[]" id="title"
                                            class="form-control @error('title') is-invalid @enderror"
                                            placeholder="Enter title">
                                        @error('title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="author" class="form-label">Author</label>
                                        <input type="text" name="author[]" id="author"
                                            class="form-control @error('author') is-invalid @enderror"
                                            placeholder="Enter author">
                                        @error('author')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-8 mb-3">
                                        <label for="description" class="form-label"> Description</label>
                                        <textarea name="description[]" class="form-control summernote" cols="30" rows="3"></textarea>

                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <div class="">
                                            <div>
                                                <label for="details_image" class="form-label">Image</label>
                                                <input type="file" name="details_image[]" id="details_image"
                                                    class="form-control @error('details_image') is-invalid @enderror">
                                            </div>

                                        </div>
                                        <input type="hidden" name="old_details_image[]">

                                        @error('details_image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>


                                    <div class="col-md-1 mb-3 d-flex justify-content-center align-items-center">

                                        <button type="button" class="btn btn-sm btn-success" style="margin-top: 22px;"
                                            onclick="addField()"><i class="fa-solid fa-plus"></i></button>
                                    </div>
                                </div>

                                <div id="wrapper"></div>
                            @endif





                            <div class="text-end">
                                <a href="#" class="btn btn-secondary">Cancel</a>
                                <button type="submit" class="btn btn-success">Create</button>
                            </div>
                        </form>


                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // $(document).ready(function() {
        //     $('.summernote').summernote({
        //         height: 50
        //     });
        // });

        var i = {{ count($dataDetails) }};

        function addField() {
            i++;
            $("#wrapper").append(`
            <div class="row form-group" id="row-${i}">
         <div class="col-md-4 mb-3">
                                        <div>
                                            <label for="category" class="form-label">Category</label>
                                            <input type="text" name="category[]" id="category"
                                                class="form-control @error('category') is-invalid @enderror"
                                                value="{{ $info->category ?? '' }}" placeholder="Enter category">
                                            @error('category')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="title" class="form-label">Title</label>
                                        <input type="text" name="title[]" id="title"
                                            class="form-control @error('title') is-invalid @enderror"
                                            placeholder="Enter title">
                                        @error('title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="author" class="form-label">Author</label>
                                        <input type="text" name="author[]" id="author"
                                            class="form-control @error('author') is-invalid @enderror"
                                            placeholder="Enter author">
                                        @error('author')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-8 mb-3">
                                        <label for="description" class="form-label"> Description</label>
                                        <textarea name="description[]" class="form-control summernote" cols="30" rows="3"></textarea>

                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <div class="">
                                            <div>
                                                <label for="details_image" class="form-label">Image</label>
                                                <input type="file" name="details_image[]" id="details_image"
                                                    class="form-control @error('details_image') is-invalid @enderror">
                                            </div>

                                        </div>
                                        <input type="hidden" name="old_details_image[]">

                                        @error('details_image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                <div class="col-md-1 mb-1">
                    <button type="button" class="remove btn btn-sm btn-danger text-center ml-2" style="margin-top:32px" onclick="removeRow(${i})">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
        `);
            // $('#row-' + i).find('.summernote').summernote({
            //     height: 50
            // });
        }

        function removeRow(rowId) {
            $(`#row-${rowId}`).remove();
        }
    </script>

@endsection