@include('admin/components/header')
@include('admin/components/top_navigation')
@include('admin/components/sidebar')

<!-- page content -->
<div id="app-content">
    <div class="app-content-area">
        <div class="container-fluid">
            <div class="row mt-5">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="d-flex justify-content-between align-items-center mb-5">
                        <h3 class="mb-0 fw-bold">Add News</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="card">
                    <div class="card-body">
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success">
                                <p>{{ $message }}</p>
                            </div>
                        @endif

                        <!-- Display validation errors -->
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form class="row g-3 needs-validation" action="{{ route('admin.store_news') }}" method="POST" enctype="multipart/form-data" novalidate>
                            @csrf
                            <div class="col-md-12">
                                <label for="news_title" class="form-label">Title News</label>
                                <input type="text" name="news_title" class="form-control" id="news_title" required>
                                <div class="valid-feedback">Looks good!</div>
                                <div class="invalid-feedback">Please provide a title.</div>
                                @error('news_title')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label for="news_images" class="form-label">Title Images</label>
                                <input type="file" name="news_images[]" class="form-control" id="news_images" multiple>
                                <div class="valid-feedback">Looks good!</div>
                                <div class="invalid-feedback">Please provide images.</div>
                                @error('news_images.*')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label for="news_description" class="form-label">Description</label>
                                <textarea name="news_description" class="form-control" id="news_description" rows="5"></textarea>
                                <div class="invalid-feedback">Please provide a description.</div>
                                @error('news_description')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12">
                                <button class="btn btn-primary" type="submit">Submit form</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('admin/components/footer')

<script>
    (function () {
        'use strict'

        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>