@include('admin.layouts.header')

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<meta name="csrf_token" content="{{ csrf_token() }}">


<div class="container-fluid pt-4 px-4">
    @if ($message = Session::get('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fa fa-exclamation-circle me-2"></i> {{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if ($message = Session::get('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fa fa-exclamation-circle me-2"></i>{{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <div class="row g-4">
        <div class="col-sm-12 col-xl-12">
            <div class="bg-light rounded h-100 p-4">
                <h6 class="mb-4">Add New Blog</h6>
                <form action="{{ route('admin.save-blog') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-floating mb-3">
                        <input type="text" name="title" class="form-control" id="title">
                        <label for="title">Title <span class="text-danger">* </span></label>
                        @if ($errors->has('title'))
                            <span class="text-danger">{{ $errors->first('title') }}</span>
                        @endif
                    </div>
                    <!--<div class="mb-3">-->
                    <!--    <label for="link" class="form-label">Description <span class="text-danger">* </span>-->
                    <!--    </label>-->
                    <!--    <textarea class="form-control" style="height: 100px;" id="description" name="description"></textarea>-->
                    <!--    @if ($errors->has('description'))-->
                    <!--        <span class="text-danger">{{ $errors->first('description') }}</span>-->
                    <!--    @endif-->
                    <!--</div>-->
                      <div class="mb-3">
                        <label for="productDescriptiion"> Descriptiion Title </label>

                            <textarea id="summernote2" name="description" ></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="image" class="form-label">Image </span>
                        </label>


                            <span class="text-danger">{{ $errors->first('Image') }}</span>

                        <input type="file" name="image" class="form-control" id="image" aria-describedby="link">
                    </div>


                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-12">
            <div class=" bg-light text-center rounded p-4">
                <div class="row g-3 mb-3">
                    <div class="col-sm-6 col-md-3 d-flex align-items-center mb-0">
                        <h6 class="text-start">Blogs</h6>
                    </div>
                </div>
                <style>
                    th {
                        white-space: nowrap
                    }

                </style>
                <div class="table-responsive">
                    <table class="table text-start align-middle table-bordered table-hover mb-0">
                        <thead>
                            <tr class="text-dark">
                                <th scope="col">Title</th>
                                <th scope="col">Description</th>
                                {{-- <th scope="col">Update</th> --}}
                                          <th scope="col">Image</th>
                                <th scope="col">Delete</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($blogs as $blog)
                                <tr>

                                    <td>{{ $blog->title }}</td>
                                  <td> @php echo $blog->description;@endphp</td>
                                    <!--<td>  <img src="{{ url('uploads/blog/'.$blog->image )}}" style="width: 120px"></td>-->
                                    
                                   <td> <img  loading="lazy"  src="{{ url(env('EXT').'project/public/uploads/blog/'.$blog->image) }}"  style="width: 120px" alt=""></td>
                                    {{-- <td>
                                        <button class="btn btn-sm btn-primary me-2" data-bs-toggle="modal"
                                            data-bs-target="#blogUpdateModal"
                                            onclick="updateBlog()">Update</button>
                                    </td> --}}
                                    <td>
                                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#blogDeleteModal"
                                            onclick="getBlogId()">Delete</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="blogDeleteModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p class="modal-title" id="exampleModalLabel">Are You sure ?</p>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="{{ route('admin.delete-blog') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="blogId" name="blogId">
                            <button type="submit" class="btn btn-primary">Confirm Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="blogUpdateModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p class="modal-title" id="exampleModalLabel">Are You sure ?</p>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <form action="{{ route('admin.update-blog') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="form-floating mb-3">
                                <input type="text" name="update_title" class="form-control"
                                    placeholder="name@example.com" id="update_title">
                                <label for="update_title">Title <span class="text-danger">* </span></label>

                            </div>
                            <div class="mb-3">
                                <label for="update_description" class="form-label">Description <span
                                        class="text-danger">* </span></label>
                                <textarea class="form-control" style="height: 100px;" id="update_description" name="update_description"></textarea>

                            </div>
                            <div class="mb-3">
                                <input type="hidden" id="update_blog_id" name="update_blog_id">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Confirm Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
            function getBlogId(id) {
                document.querySelector('#blogId').value = id;
            }

            function updateBlog(id) {

                $.ajax({
                    type: 'GET',
                    url: '' + '/admin/get-single-blog/' + id,
                    dataType: 'json',
                    success: function(data) {
                        document.querySelector('#update_title').value = data.title;
                        document.querySelector('#update_description').value = data.description;
                        document.querySelector('#update_blog_id').value = data.id;
                    }
                });

            }
        </script>
    </div>


</div>




{{-- summernote  start--}}

{{-- <textarea id="summernote" name="productDescriptiion"  name="editordata"></textarea> --}}

<head>
    <meta charset="UTF-8">
    <title> </title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
  </head>
  <body>




    <script>
      $('#summernote').summernote({
        // placeholder: 'Hello stand alone ui',
        placeholder: '',
        tabsize: 2,
        height: 120,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });
    </script>



<script>
    $('#summernote2').summernote({
      // placeholder: 'Hello stand alone ui',
      placeholder: '',
      tabsize: 2,
      height: 120,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
        ['view', ['fullscreen', 'codeview', 'help']]
      ]
    });
  </script>
{{-- summernote  end--}}
@include('admin.layouts.footer')