{% extends "admin/layout_admin.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}

{% block title %}{% trans "Recursos" %}{% endblock title %}

{% block head %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
{% endblock %}

{% block content %}
<div class="main-content">
  <div class="page-content">
    <div class="container-fluid contenido-principal">
      <div class="row">
        <div class="col-md-12 mb-4">
          <h4>📚 Libros</h4>
          <button class="btn btn-success mb-3" onclick="openBookModal()">Agregar Libro</button>
          
          <div class="card">
            <div class="card-body">
              <table id="booksTable" class="display">
                <thead>
                  <tr>
                    <th>Título</th>
                    <th>Descripción</th>
                    <th>Archivo</th>
                    <th>Subido</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {% for book in books %}
                  <tr>
                    <td>{{ book.title }}</td>
                    <td>{{ book.description|truncatechars:60 }}</td>
                    <td><a href="{{ book.file.url }}" download>📥 Descargar</a></td>
                    <td>{{ book.uploaded_at|naturaltime }}</td>
                    <td>
                      <button class="btn btn-sm btn-primary" onclick="editBook({{ book.id }}, '{{ book.title }}', '{{ book.description|escapejs }}')">Editar</button>
                      <button class="btn btn-sm btn-danger" onclick="deleteBook({{ book.id }})">Eliminar</button>
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>              
            </div>
          </div>  

        
        </div>

        <div class="col-md-12">
          <h4>🎥 Videos</h4>
          <button class="btn btn-success mb-3" onclick="openVideoModal()">Agregar Video</button>
          
          <div class="card">
            <div class="card-body">
              <table id="videosTable" class="display">
                <thead>
                  <tr>
                    <th>Título</th>
                    <th>Descripción</th>
                    <th>URL</th>
                    <th>Subido</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {% for video in videos %}
                  <tr>
                    <td>{{ video.title }}</td>
                    <td>{{ video.description|truncatechars:60 }}</td>
                    <td><a href="{{ video.youtube_url }}" target="_blank">🔗 Ver</a></td>
                    <td>{{ video.uploaded_at|naturaltime }}</td>
                    <td>
                      <button class="btn btn-sm btn-primary" onclick="editVideo({{ video.id }}, '{{ video.title }}', '{{ video.description|escapejs }}', '{{ video.youtube_url }}')">Editar</button>
                      <button class="btn btn-sm btn-danger" onclick="deleteVideo({{ video.id }})">Eliminar</button>
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>



        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Libro -->
<div class="modal fade" id="bookModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form id="bookForm" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Agregar/Editar Libro</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" id="bookId">
          <div class="mb-3">
            <label>Título</label>
            <input type="text" class="form-control" name="title" id="bookTitle" required>
          </div>
          <div class="mb-3">
            <label>Descripción</label>
            <textarea class="form-control" name="description" id="bookDescription" rows="3"></textarea>
          </div>
          <div class="mb-3">
            <label>Archivo PDF</label>
            <input type="file" class="form-control" name="file" id="bookFile">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Guardar</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal Video -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form id="videoForm">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Agregar/Editar Video</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" id="videoId">
          <div class="mb-3">
            <label>Título</label>
            <input type="text" class="form-control" name="title" id="videoTitle" required>
          </div>
          <div class="mb-3">
            <label>Descripción</label>
            <textarea class="form-control" name="description" id="videoDescription" rows="3"></textarea>
          </div>
          <div class="mb-3">
            <label>URL de YouTube</label>
            <input type="url" class="form-control" name="youtube_url" id="videoURL" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Guardar</button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock content %}

{% block footer %}
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function () {
    $('#booksTable').DataTable();
    $('#videosTable').DataTable();
  });

  function openBookModal() {
    $('#bookForm')[0].reset();
    $('#bookId').val('');
    $('#bookModal').modal('show');
  }

  function editBook(id, title, description) {
    $('#bookId').val(id);
    $('#bookTitle').val(title);
    $('#bookDescription').val(description);
    $('#bookModal').modal('show');
  }

  function deleteBook(id) {
    if (confirm("¿Eliminar este libro?")) {
      fetch(`/agronomist/resources/book/delete/${id}/`, { method: 'POST', headers: { 'X-CSRFToken': '{{ csrf_token }}' }})
        .then(() => location.reload());
    }
  }

  $('#bookForm').submit(function (e) {
    e.preventDefault();
    const formData = new FormData(this);
    fetch("{% url 'create_or_update_book' %}", {
      method: 'POST',
      body: formData,
    }).then(() => location.reload());
  });

  function openVideoModal() {
    $('#videoForm')[0].reset();
    $('#videoId').val('');
    $('#videoModal').modal('show');
  }

  function editVideo(id, title, description, url) {
    $('#videoId').val(id);
    $('#videoTitle').val(title);
    $('#videoDescription').val(description);
    $('#videoURL').val(url);
    $('#videoModal').modal('show');
  }

  function deleteVideo(id) {
    if (confirm("¿Eliminar este video?")) {
      fetch(`/agronomist/resources/video/delete/${id}/`, { method: 'POST', headers: { 'X-CSRFToken': '{{ csrf_token }}' }})
        .then(() => location.reload());
    }
  }

  $('#videoForm').submit(function (e) {
    e.preventDefault();
    const payload = {
      id: $('#videoId').val(),
      title: $('#videoTitle').val(),
      description: $('#videoDescription').val(),
      youtube_url: $('#videoURL').val(),
    };

    fetch("{% url 'create_or_update_video' %}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': '{{ csrf_token }}',
      },
      body: JSON.stringify(payload),
    }).then(() => location.reload());
  });
</script>
{% endblock %}