{% extends 'components/admin/layout.html' %}
{% load static %}

{% block content %} 

<section role="main" class="content-body">
    <header class="page-header">
        <h2>Dashboard</h2>

        <div class="right-wrapper text-end">
            <ol class="breadcrumbs">
                <li></li>
                <li><span>Dashboard</span></li>
                <li><span>News & Events</span></li>

            </ol>
            <a class="sidebar-right-toggle" data-open=""></a>
        </div>
    </header>

    <div class="row">
        <div class="col">
            <section class="card">
                <header class="card-header">
                    <div class="col-lg-6">
                        <a class="mb-1 mt-1 me-1 modal-with-zoom-anim ws-normal btn btn-success" href="#modalForm"><i class='bx bx-news' ></i>  Add Event</a>
                    </div>
                </header>
                <div class="card-body">

                    <table class="table table-bordered table-striped mb-0 table-sm" id="datatable-tabletools">

                        <thead>
                            <tr>
                                <th class="text-center">Sl No</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Event Date</th>
                                <th>Attachment</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for data in data %}
                            <tr>
                                <td class="text-center">{{forloop.counter}}</td>
                                <td>{{data.title}}</td>
                                <td>{{data.description}}</td>
                                <td>{{data.event_date}}</td>
                                <td>
                                    <a href="/media/news/{{data.file_path}}" target="_blank">{{data.file_path}}</a>
                                </td>
                                <td class="text-center">
                                    <a href="#modalDelete" class="mb-1 mt-1 me-1 modal-with-zoom-anim ws-normal btn btn-warning btn-sm" onclick="deleteFunction('{{data.id}}')"><i class='bx bx-trash' ></i></a>
                                    <a href="#modalFormUpdate" class="mb-1 mt-1 me-1 modal-with-zoom-anim ws-normal btn btn-primary btn-sm" onclick="updateFunction('{{data.id}}','{{data.title}}','{{data.description}}','{{data.event_date|date:"Y-m-d"}}')"><i class='bx bx-edit' ></i></a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
    <!-- end: page -->


    <!-- Modal Form -->
    <div id="modalForm" class="zoom-anim-dialog modal-block modal-block-primary mfp-hide">
        <section class="card">
            <form action="{% url 'admin-news-event' %}" method="post" autocomplete="off" enctype="multipart/form-data">
                {% csrf_token %}
                <header class="card-header">
                    <h2 class="card-title">Add News & Event</h2>
                </header>
                <div class="card-body">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" name="title" required>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea class="form-control" name="description" cols="30" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Event Date</label>
                        <input type="text" data-plugin-datepicker class="form-control form-control-sm datepicker" name="event_date" required>
                    </div>
                    <div class="form-group mb-2">
                        <label>File (only image)</label>
                        <input type="file" class="form-control" name="file_path" required accept="image/*">
                    </div>
                </div>
                <footer class="card-footer">
                    <div class="row">
                        <div class="col-md-12 text-end">
                            <button class="btn btn-default modal-dismiss">Cancel</button>
                            <button type="submit" name="create" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </footer>
            </form>
        </section>
    </div>
    <!-- end: page -->
      <!-- Modal Form -->
    <div id="modalFormUpdate" class="zoom-anim-dialog modal-block modal-block-primary mfp-hide">
        <section class="card">
            <form action="{% url 'admin-news-event' %}" method="post" autocomplete="off">
                {% csrf_token %}
                <input type="hidden" id="id" name="id">
                <header class="card-header">
                    <h2 class="card-title">Update News & Events</h2>
                </header>
                <div class="card-body">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" id="title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <textarea class="form-control" name="description" id="description" cols="30" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Event Date</label>
                        <input type="text" data-plugin-datepicker class="form-control form-control-sm datepicker" name="event_date" id="event_date" required>
                    </div>
                    <div class="form-group mb-2">
                        <label>File (only image)</label>
                        <input type="file" class="form-control" name="file_path" accept="image/*">
                    </div>
                </div>
                <footer class="card-footer">
                    <div class="row">
                        <div class="col-md-12 text-end">
                            <button class="btn btn-default modal-dismiss">Cancel</button>
                            <button type="submit" name="update" class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </footer>
            </form>
        </section>
    </div>
    <!-- end: page -->
    <div id="modalDelete" class="zoom-anim-dialog modal-block modal-block-warning mfp-hide">
        <section class="card">
            <form action="{% url 'admin-news-event' %}" method="post" autocomplete="off">
                {% csrf_token %}
                <header class="card-header bg-warning">
                    <h2 class="card-title text-white">Confirmation!</h2>
                </header>

                <div class="card-body">
                    <input type="hidden" class="form-control" name="id" id="del_id">
                    <p class="text-dark">Are you sure you want to delete this News & Events?</p>
                </div>
                <footer class="card-footer">
                    <div class="row">
                        <div class="col-md-12 text-end">
                            <button class="btn btn-default modal-dismiss">Cancel</button>
                            <button type="submit" name="delete" class="btn btn-warning">Delete</button>
                        </div>
                    </div>
                </footer>
            </form>
        </section>
    </div>
    {% if success %}
    <div class="modal fade" id="modalSuccess">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success">
                    <h2 class="card-title text-white">Confirmation</h2>
                </div>
                <div class="modal-body">
                    <p class="text-dark">{{success}}</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <div class="col-md-12 text-end">
                        <button class="btn btn-success modal-dismiss" onclick="closeModal()">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    {% if error %}
    <div class="modal fade" id="modalError">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h2 class="card-title text-white">Attention!</h2>
                </div>
                <div class="modal-body">
                    <p class="text-dark">{{error}}</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <div class="col-md-12 text-end">
                        <button class="btn btn-warning modal-dismiss" onclick="closeModal()">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% endblock content %}

    {% block custom_js %}
    <script>
    $(document).ready(function () {
        var error_msg = '{{error}}' || "";
        var success = '{{success}}' || "";
        if(error_msg != "")
        {
            $('#modalError').modal('show');
        }
        if(success != "")
        {
            $('#modalSuccess').modal('show');
        }

    });
     function closeModal(){
        $('#modalSuccess').modal('hide');
        $('#modalError').modal('hide');
     }
     function updateFunction(id,title,description,event_date){
        $("#id").val(id);
        $("#title").val(title);
        $("#description").val(description);
        $("#event_date").val(event_date);
     }
     function deleteFunction(id){
        $("#del_id").val(id);
     }
    </script>
    {% endblock custom_js %}