@extends('layouts.admin.index')

@section('content')
<div class="row">
  <div class="col-sm-12">
    <div class="home-tab">
      <div class="tab-content tab-content-basic">
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
          <div class="container-fluid">
            <div class="image-box mb-4 rounded border border-secondary">
              <img src="{{ asset('img/newsAdmin.png') }}" alt="Image" class="img-fluid" style="width: 100%; height: auto;">
            </div>

            <div class="alert alert-info mt-4">
              <strong>Info Website:</strong>
              <ul style="margin-top:10px; font-size: 15px;">
                <li><strong>Upload Image</strong>: Please upload an image for the news event. Recommended size: <strong>1080 x 1350 px</strong>.</li>
                <li><strong>File Size</strong>: Please ensure the image file size is <strong>below 1MB</strong>.
                <li><strong>Event Start Date</strong>: Choose the start date of the event.</li>
                <li><strong>Event End Date</strong>: Choose the end date of the event.</li>
                <li><strong>Description</strong>: Provide a simple description of the event.</li>
              </ul>
              <hr>
              <strong>Info Mobile App:</strong>
              <ul style="margin-top:10px; font-size: 15px;">
                <li><strong>Upload Image</strong>: Please upload a mobile-optimized image for the event. Recommended size: <strong>2048 x 568 px</strong>.</li>
                <li><strong>File Naming </strong>: All mobile images must begin with the prefix <strong>mobile-</strong>. Example: <strong>mobile-1.png</strong>, <strong>mobile-2.png</strong>, <strong>mobile-3.png</strong></li>
                <li><strong>File Size</strong>: Please ensure the image file size is <strong>below 1MB</strong>.
              </ul>
                After you submit the form, your new event will be displayed on the news section of the website.
            </div>

            <div class="card shadow mb-4">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Create News</h6>
              </div>
              <div class="card-body">
                @if(session('success'))
                  <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <form action="{{ route('news.store') }}" method="POST" enctype="multipart/form-data">
                  @csrf
                  <div class="form-group">
                    <label for="image">Image</label>
                    <input type="file" name="image" id="image" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label for="desc">Description</label>
                    <textarea name="desc" id="desc" class="form-control" required></textarea>
                  </div>

                  <div class="form-group">
                    <label for="date_start">Date Start</label>
                    <input type="date" name="date_start" id="date_start" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label for="date_end">Date End</label>
                    <input type="date" name="date_end" id="date_end" class="form-control" required>
                  </div>

                  <button type="submit" class="btn btn-primary">Create News</button>
                </form>

                <h2 class="mt-5">Existing News</h2>
                <table class="table mt-3">
                  <thead>
                    <tr>
                      <th>Image</th>
                      <th>Description</th>
                      <th>Date Start</th>
                      <th>Date End</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($news as $item)
                      <tr>
                        <td><img src="{{ asset($item->image) }}" width="100" alt=""></td>
                        <td>{{ $item->desc }}</td>
                        <td>{{ $item->date_start }}</td>
                        <td>{{ $item->date_end }}</td>
                        <td>
                          <form action="{{ route('news.delete', $item->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                          </form>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection