{% extends 'admin_dash/base.html' %}


{% load static %}
{% load humanize %}
{% block content %}
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<div class="content-wrapper">
    <div class="content">
        <div class="row">
            {% for field in form %}
            {% for error in field.errors %}
            <label class="text-{{msg.tags}} text-center col-12" style="text-align: center;">{{error}}</label>
            {% endfor %}
            {% endfor%}
            {% for msg in messages %}

            <label class="text-{{msg.tags}} text-center col-12" style="text-align: center;">{{msg}}</label>

            {% endfor%}
            <div class="col-xl-6 col-lg-6 col-12">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="550">
                    <div class="card-header justify-content-between">
                        <h2>Executed Projects</h2>

                    </div>
                    <div class="card-body slim-scroll py-0">
                        <table class="table ">
                            <tbody>
                                {% for project in projects %}
                                
                                <tr>
                                    <td class="text-dark col-6">{{project.project_title}}<br><small>{{project.project_nature}}</small></td>
                                    <td class="text-suceess"><a href="{% url 'edit_projects' project.id %}">edit project</a></td>
                                    <td class="text-suceess"><a href="#" data-toggle="modal" data-target="#project_del{{project.id}}">delete project</a></td>
                                </tr>
                                
                                 <div class="modal fade" id="blog_dproject_delel{{project.id}}" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Blog Deletion</h5>
                                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        {{user.email}}<br><br>
                                        Are you sure you want to delete this user subscription?
                                    </div>
                                    <div class="modal-footer">
                                        <a class="btn btn-danger" href="#">Cancel</a>
                                        <a class="btn btn-success" href="">Delete
                                            Now</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                                {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-12">
                <!-- Notification Table -->
                <div class="card card-default" data-scroll-height="550">
                    <div class="card-header justify-content-between ">
                        <h2>Submitted Projects</h2>


                    </div>
                    <div class="card-body slim-scroll">
                        {% for project in sub_projects %}
                        
                        <div class="media pb-3 align-items-center justify-content-between">
                            {% comment %} <div
                                class="d-flex align-items-center justify-content-center mr-3 media-icon iconbox-45  text-white">
                                <img src="{{project.image.url}}" class="img-circle img-fluid rounded" alt="User Image" />
                            </div> {% endcomment %}
                            <div class="media-body pr-3 ">
                                <a class="mt-0 mb-1 font-size-15 text-dark" href="#">{{project.project_title}}</a>
                                <p><i class="mdi mdi-calendar"></i> {{project.email}}</p>
                                <a href="" data-toggle="modal" data-target="#project_delete{{project.id}}">view project</a>
                            </div>
                            <span class=" font-size-12 d-inline-block">Files? {% if project.project_file %} Yes {% else %} No {% endif %}
                                <br>
                                {% comment %} <span class="text-success">View Project</span> {% endcomment %}

                        </div>
                        
                       <div class="modal fade" id="project_delete{{project.id}}" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Project Details</h5>
                                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <label>User: {{project.user.email}}</label><br>
                                        <label>Submitted Email: {{project.email}}</label><br>
                                        <label>Project Title: {{project.project_title}}</label><br>
                                        <label>Name: {{project.first_name}} {{project.middle_name}} {{project.last_name}}</label><br>
                                        <label>Company / University: {{project.company_university}}</label><br>
                                        <label>Phone Nnumber: {{project.phone_number}}</label><br>
                                        <label>Zip Number: {{project.zip_number}}</label><br>
                                        <label>Professional / Academic Field: {{project.professional_academic_field}}</label><br>
                                        <label>Address: {{project.address}}</label><br>
                                        <label>country: {{project.country}}</label><br>
                                        <label>project Files: {% if project.project_file %}{{project.project_file.url}}{% endif %}</label><br>
                                        <label>Project Nature: {{project.project_nature}}</label><br>
                                        <label>Project Type: {{project.project_type}}</label><br>
                                        <label>Other Comment: {{project.comment}}</label><br>
                                    </div>
                                    <div class="modal-footer">
                                        <a class="btn btn-danger" href="#">Close</a>
                                        
                                    </div>
                                </div>

                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="mt-3"></div>
                </div>
            </div>

            <div class=" col-12">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="850">
                    <div class="card-header">
                        <h4>Add New Project</h4>

                    </div>
                    <div class="card-body slim-scroll mt-2">
                        <form action="{% url 'projects' %}" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="form-group col-6">
                                    <label for="title" class="">Project Title</label>
                                    <input type="text" class="form-control" name="project_title">
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Project Full Name</label>
                                    <input type="text" class="form-control" name="project_full_name">
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Country</label>
                                    <input type="text" class="form-control" name="country">
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Project Nature</label>
                                    <select class="form-control" name="project_nature">
                                        <option>Full execution</option>
                                        <option>Project assistance</option>
                                    </select>
                                </div>
                               <div class="form-group col-6">
                                    <label for="title" class="">Projet Type</label>
                                    <input type="text" class="form-control" name="project_type">
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Project Scope</label>
                                    <input type="text" class="form-control" name="project_scope">
                                </div> 
                                <div class="form-group col-6">
                                    <label for="title" class="">Project Small Image</label>
                                    <input type="file" class="form-control" name="image">
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Project Big Image</label>
                                    <input type="file" class="form-control" name="detail_image">
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Project Duration</label>
                                    <input type="text" class="form-control" name="project_duration" placeholder="1 Month">
                                </div> 
                                <div class="form-group col-6">
                                    <label for="title" class="">Project Completion Date</label>
                                    <input type="text" class="form-control" name="project_completion_date" placeholder="June, 2021">
                                </div> 
                            
                                <div class="form-group col-12">
                                    <label for="title">Meta</label>
                                    <textarea class="form-control" name="meta"></textarea>
                                    <div class="form-group col-6 mt-3 px-0">
                                    <label for="title" class="">Executed</label>
                                    <input type="checkbox" class="" name="executed">
                                </div>
                                    <div class="row justify-content-end col-12  ms-3">

                                        <button type="submit" class="btn border rounded text-white mt-4 col-2 py-3"
                                            style="background-color: #754C28;">Submit</button>
                                    </div>
                                </div>

                            </div>
                        </form>

                    </div>
                    <!-- <div class="card-footer bg-white py-4">
          <a href="#" class="btn-link py-3 text-uppercase">View Report</a>
        </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error => {
            console.error(error);
        });

    ClassicEditor
        .create(document.querySelector('#editor1'))
        .catch(error => {
            console.error(error);
        });
</script>

{% endblock content %}