@extends('backend.layouts.app')

@section('content')
    <div class="p-3">
        <div class="row gy-3">
            <div class="col-12 col-md">
                <div class="card">
                    <div class="card-header font-weight-bold">
                        Edit Blog
                    </div>
                    <div class="card-body">
                        <form action="{{ url('admin/blogs/' . $blogs->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf @method('PUT')
                            <div class="row">

                                @if ($blogs->image != null)
                                    <div class="col-12 mb-3">
                                        <label for="">Image </label>
                                        <input type="file" class="form-control" name="image"
                                            value="{{ $blogs->image }}" />
                                        @error('image')
                                            <span class="text-danger">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                @endif

                                @if ($blogs->youtube_link != null)
                                    <div class="col-12 mb-3">
                                        <label for="">Youtube Link </label>
                                        <input type="text" class="form-control" name="youtube_link"
                                            value="{{ $blogs->youtube_link }}" />
                                        @error('youtube_link')
                                            <span class="text-danger">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                @endif

                                <div class="col-12 mb-3">
                                    <label for="">Title </label>
                                    <input type="text" class="form-control" required name="title"
                                        value="{{ $blogs->title }}" />
                                    @error('title')
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="">Description </label>
                                    <textarea rows="5" type="text" class="form-control" required name="description">{!! $blogs->description !!}</textarea>
                                    @error('description')
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>

                                <div class="col-12 col-md-4 mb-3">
                                    <label for="">Post Type</label>
                                    <select class="form-control form-select" name="post_type" required>
                                        <option hidden selected>{{ $blogs->post_type }}</option>
                                        <option>News</option>
                                        <option>Events</option>
                                        <option>Publications</option>
                                        <option>Blogs</option>
                                        <option>Awards</option>
                                        <option>Activities</option>
                                        <option>Resources</option>
                                    </select>
                                    @error('post_type')
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>

                                <div class="col-12 text-right">
                                    <button type="submit" class="btn btn-success">Edit Blog</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md mb-3">
                @if ($blogs->image != null)
                    <div class="card">
                        <div class="card-header font-weight-bold">
                            Current Image
                        </div>
                        <div class="card-body overflow-hidden">
                            <img src="{{ asset('blogs/' . $blogs->image) }}" class="img-fluid" alt="">
                        </div>
                    </div>
                @else
                    <div class="card mb-3">
                        <div class="card-header font-weight-bold">
                            Current Youtube Link
                        </div>
                        <div class="card-body overflow-hidden d-flex justify-content-center">
                            <iframe width="350" height="315" src="{{ $blogs->youtube_link }}"
                                title="YouTube video player" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                allowfullscreen></iframe>
                        </div>
                    </div>
                @endif

                <div class="card">
                    <div class="card-header font-weight-bold">
                        Files Uploaded
                    </div>
                    <div class="card-body">
                        <table class="table table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Image</th>
                                    <th>File Name</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($files as $items)
                                    <tr>
                                        <td>{{ $items->id }}</td>
                                        <td>
                                            <img src="{{ asset('files/' . $items->image) }}" height="50" width="50"
                                                alt="">
                                        </td>
                                        <td>{{ $items->slug }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
    @yield('js')
    <script>
        $(document).ready(function() {
            $('.table').DataTable({
                order: [
                    [0, 'asc']
                ],
                responsive: true
            });
        });
    </script>
    <script type="text/javascript">
        CKEDITOR.replace('description');
    </script>
@endsection