@extends('layouts.admin.index')

@section('content')
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<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>Upload image for website (1080 x 1350 px, Max 1MB).</li>
                <li>Upload image for mobile (2048 x 568 px, filename must start with "mobile-", Max 1MB).</li>
                <li>Fill all details and submit.</li>
              </ul>
            </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">
                <form id="createNewsForm" action="{{ route('news.store') }}" method="POST" enctype="multipart/form-data">
                  @csrf

                  <div class="form-group">
                    <label for="image">Image (Web)</label>
                    <input type="file" name="image" id="image" class="form-control" required>
                    <small class="text-muted">1080 x 1350 px, Max 1MB</small>
                  </div>

                  <div class="form-group mt-3">
                    <label for="mobile_image">Image (Mobile)</label>
                    <input type="file" name="mobile_image" id="mobile_image" class="form-control" required>
                    <small class="text-muted">2048 x 568 px, filename must start with "mobile-", Max 1MB</small>
                  </div>

                  <div class="form-group mt-3">
                    <label for="event_name">Event Name</label>
                    <input type="text" name="event_name" id="event_name" class="form-control">
                  </div>

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

                  <!-- Dynamic How to Redeem -->
                  <div class="form-group mt-3">
                    <label>How to Redeem</label>
                    <div id="steps-container">
                      <div class="input-group mb-2 step-input">
                        <input type="text" name="how_to_redeem[]" class="form-control" placeholder="Step 1">
                        <button type="button" class="btn btn-danger remove-step">Remove</button>
                      </div>
                    </div>
                    <button type="button" id="add-step" class="btn btn-secondary btn-sm">Add Step</button>
                  </div>

                  <div class="form-check mt-3 d-flex align-items-center">
                    <input class="form-check-input ms-2" type="checkbox" name="redeem_once" id="redeem_once" value="1">
                    <label class="form-check-label ms-2 mb-0" for="redeem_once">
                      Allow redeem only once
                    </label>
                  </div>

                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label for="date_start">Date Start</label>
                      <input type="date" name="date_start" id="date_start" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                      <label for="date_end">Date End</label>
                      <input type="date" name="date_end" id="date_end" class="form-control" required>
                    </div>
                    <div class="col-md-6 mt-3">
  <label for="show_until">Show Until</label>
  <input type="date" name="show_until" id="show_until" class="form-control">
</div>

                  </div>

                  <button type="button" id="submitNewsBtn" class="btn btn-primary mt-4">Create News</button>
                </form>

                <script>
                  // Dynamic steps
                  let stepCount = 1;
                  document.getElementById('add-step').addEventListener('click', function() {
                    stepCount++;
                    const container = document.getElementById('steps-container');
                    const stepDiv = document.createElement('div');
                    stepDiv.classList.add('input-group', 'mb-2', 'step-input');
                    stepDiv.innerHTML = `
                      <input type="text" name="how_to_redeem[]" class="form-control" placeholder="Step ${stepCount}">
                      <button type="button" class="btn btn-danger remove-step">Remove</button>
                    `;
                    container.appendChild(stepDiv);
                  });

                  document.addEventListener('click', function(e) {
                    if(e.target && e.target.classList.contains('remove-step')) {
                      e.target.parentNode.remove();
                    }
                  });

                  // SweetAlert2 for submit
                  document.getElementById('submitNewsBtn').addEventListener('click', function() {
                    Swal.fire({
                      title: 'Are you sure?',
                      text: "You want to create this news?",
                      icon: 'question',
                      showCancelButton: true,
                      confirmButtonColor: '#3085d6',
                      cancelButtonColor: '#d33',
                      confirmButtonText: 'Yes, create it!'
                    }).then((result) => {
                      if (result.isConfirmed) {
                        document.getElementById('createNewsForm').submit();
                      }
                    });
                  });
                </script>

                <hr class="mt-5">

                <h2 class="mt-4">Existing News</h2>
                <div class="table-responsive">
                  <table class="table table-bordered mt-3">
                    <thead class="table-light">
                      <tr>
                        <th>Web Image</th>
                        <th>Mobile Image</th>
                        <th>Event Name</th>
                        <th>Description</th>
                        <th>How to Redeem</th>
                        <th>Redeem Once</th>
                        <th>Date Start</th>
                        <th>Date End</th>
                        <th>Actions</th>
                        <th>Status</th>
                        <th>Notify</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($news as $item)
                        <tr>
                          <td><img src="{{ asset($item->image) }}" width="100" alt=""></td>
                          <td><img src="{{ asset($item->mobile_image) }}" width="100" alt=""></td>
                          <td>{{ $item->event_name }}</td>
                          <td>{{ $item->desc }}</td>
                          <td style="max-width: 200px; white-space: pre-wrap;">{{ $item->how_to_redeem }}</td>
                          <td>{{ $item->redeem_once ? 'Yes' : 'No' }}</td>
                          <td>{{ $item->date_start }}</td>
                          <td>{{ $item->date_end }}</td>
                          <td>
                          <form action="{{ route('news.destroy', $item->id) }}" method="POST">
                          @csrf
                          @method('DELETE')
                          <button class="btn btn-danger btn-sm">Delete</button>
                      </form>

                          </td>
                          <td>
                            @if($item->is_active)
                              <form action="{{ route('news.disable', $item->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-warning btn-sm">Disable</button>
                              </form>
                            @else
                              <form action="{{ route('news.enable', $item->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-success btn-sm">Enable</button>
                              </form>
                            @endif
                          </td>
                          <td>
                            <button type="button" 
                                    class="btn btn-info btn-sm notifyBtn" 
                                    data-news-id="{{ $item->id }}"
                                    data-event-name="{{ $item->event_name }}"
                                    data-description="{{ $item->desc }}">
                              <i class="mdi mdi-bell"></i> Send Notification
                            </button>
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>

                <script>
                  document.querySelectorAll('.deleteBtn').forEach(btn => {
                    btn.addEventListener('click', function(){
                      Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                      }).then((result) => {
                        if (result.isConfirmed) {
                          this.closest('form').submit();
                        }
                      });
                    });
                  });

                  // Notification blast button
                  document.querySelectorAll('.notifyBtn').forEach(btn => {
                    btn.addEventListener('click', function(){
                      const newsId = this.getAttribute('data-news-id');
                      const eventName = this.getAttribute('data-event-name');
                      const description = this.getAttribute('data-description');
                      
                      Swal.fire({
                        title: 'Send Notification?',
                        html: `
                          <p>Send push notification to all app users about:</p>
                          <strong>${eventName}</strong>
                          <p class="text-muted mt-2">${description}</p>
                        `,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, send notification!',
                        showLoaderOnConfirm: true,
                        preConfirm: () => {
                          return fetch(`{{ url('/admin/news/send-notification') }}/${newsId}`, {
                            method: 'POST',
                            headers: {
                              'Content-Type': 'application/json',
                              'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                          })
                          .then(response => {
                            if (!response.ok) {
                              throw new Error(response.statusText)
                            }
                            return response.json()
                          })
                          .catch(error => {
                            Swal.showValidationMessage(
                              `Request failed: ${error}`
                            )
                          })
                        },
                        allowOutsideClick: () => !Swal.isLoading()
                      }).then((result) => {
                        if (result.isConfirmed) {
                          Swal.fire({
                            icon: 'success',
                            title: 'Notification Sent!',
                            text: `Notification sent to ${result.value.sent_count || 'all'} users`,
                            timer: 3000,
                            showConfirmButton: false
                          });
                        }
                      });
                    });
                  });

                  @if(session('success'))
                    Swal.fire({
                      icon: 'success',
                      title: 'Success',
                      text: "{{ session('success') }}",
                      timer: 2000,
                      showConfirmButton: false
                    });
                  @endif
                </script>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection