{% extends 'base.html' %}

{% block body %}

<div id="wrapper">
	{% include 'navbar.html' %}

	<div id="page-wrapper" class="gray-bg">
		{% include 'header.html' %}
		<div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>Letter Box</h2>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
		<!-- test -->
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        
                        <div class="ibox-title px-2 justify-content-between d-flex align-items-center">
                            <div></div>
                            <!-- <input type="text" class="form-control w-50 form-control-sm m-b-xs" id="filter" placeholder="Search in table"> -->
                            <button type="button" id="add_letter" class="btn btn-w-s btn-primary"> Add </button>
                        </div>

                        <div class="ibox-content">
                            <div style="overflow-x: auto;">
                                <table class="footable table table-bordered table-stripped" data-page-size="10" data-filter=#filter>
                                    <thead>
                                        <tr>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">S No.</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Name</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Department</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Receipt Type</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Date</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Letter Box</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Type Of Letter</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Reference No</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Pdf</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Actions</th>
                                            <th style="display: none;">Subject</th>
                                            <th style="display: none;">Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for letter in letter_box %}
                                            <tr>
                                                <td>{{forloop.counter}}</td>
                                                <td style="max-width: fit-content; white-space:nowrap;">{{letter.name}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{letter.department.user_department}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                    {% if letter.receipt_type == 1 %}
                                                        <span class="badge badge-primary">Dispatched</span>
                                                    {% else %}
                                                        <span class="badge badge-success">Received</span>
                                                    {% endif %}
                                                </td>
                                                <td style="max-width: fit-content; white-space:nowrap;">{{letter.date}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                    {% if letter.letter_box == 0 %}
                                                        <span class="badge badge-info">Sender</span>
                                                    {% else %}
                                                        <span class="badge badge-warning">Receiver</span>
                                                    {% endif %}
                                                </td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                    {% if letter.letter_type == 0 %}
                                                        Offer Letter
                                                    {% elif letter.letter_type == 1 %}
                                                        Appointment Letter
                                                    {% elif letter.letter_type == 2 %}
                                                        Office Letter
                                                    {% elif letter.letter_type == 3 %}
                                                        Govt. Notice
                                                    {% elif letter.letter_type == 4 %}
                                                        Letter Of Recommendation
                                                    {% elif letter.letter_type == 5 %}
                                                        Cover Letter
                                                    {% elif letter.letter_type == 6 %}
                                                        Resignation Letter
                                                    {% elif letter.letter_type == 7 %}
                                                        Announcement Letter
                                                    {% elif letter.letter_type == 8 %}
                                                        Complaint Letter
                                                    {% elif letter.letter_type == 9 %}
                                                        Thank You Letter
                                                    {% elif letter.letter_type == 10 %}
                                                        Interview Follow Up Letter
                                                    {% elif letter.letter_type == 11 %}
                                                        Termination Letter
                                                    {% else %}
                                                        Others
                                                    {% endif %}
                                                </td>
                                                <td>{{letter.reference_no}}</td>
                                                <td>
                                                    {% if letter.pdf %}
                                                        <a href="{{letter.pdf.url}}" target="_blank"><button class="btn btn-danger" type="button"><i class="fa fa-eye"></i> </button></a>
                                                    {% else %}
                                                        -
                                                    {% endif %}
                                                </td>
                                                
                                                <td class="text-right" style="max-width: fit-content; white-space:nowrap;">
                                                    <button class="btn btn-info edit_button" data-id="{{letter.id}}" data-name="{{letter.name}}"  data-department="{{letter.department_id}}" data-receipt-type="{{letter.receipt_type}}" data-date="{{letter.date}}" data-letter-box="{{letter.letter_box}}" data-letter-type="{{letter.letter_type}}" data-reference-no="{{letter.reference_no}}" data-subject="{{letter.subject}}" data-description="{{letter.description}}"  type="button"><i class="fa fa-edit"></i> </button>
                                                    <button class="btn btn-danger delete_button" data-id="{{letter.id}}" type="button"><i class="fa fa-trash"></i> </button>
                                                </td>
                                                <td style="display: none;">{{letter.subject}}</td>
                                                <td style="display: none;">{{letter.description}}</td>
                                                
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="py-4 px-5 justify-content-end d-flex align-items-end" style="width : 100%;">
                                <ul class="pagination float-center"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>


<div class="modal inmodal" id="add_modal"  role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated">
            <div class="modal-header py-1">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2><b>Add Letter</b></h2>
            </div>
            <form method="POST" action="/demo/admin-department/letter-box" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Receipt Type *</label> 
                                <select data-placeholder="" name="receipt_type" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    <option value="0">Received</option>
                                    <option value="1">Dispatched</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Date *</label> 
                                <input type="date" placeholder="" name="date" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Letter Box *</label> 
                                <select data-placeholder="" name="letter_box" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    <option value="0">Sender</option>
                                    <option value="1">Receiver</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-6">
                            <div class="form-group">
                                <label>Name *</label> 
                                <input type="text" placeholder="" name="name" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Department *</label> 
                                <select data-placeholder="" name="department" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    {% for department in user_departments %}
                                        <option value="{{department.id}}">{{department.user_department}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Letter No. / Reference No. *</label> 
                                <input type="text" placeholder="" name="reference_no" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Type Of Letter *</label> 
                                <select data-placeholder="" name="letter_type" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    <option value="0">Offer Letter</option>
                                    <option value="1">Appointment Letter</option>
                                    <option value="2">Office Letter</option>
                                    <option value="3">Govt. Notice</option>
                                    <option value="4">Letter Of Recomndation</option>
                                    <option value="5">Cover Letter</option>
                                    <option value="6">Resignation Letter</option>
                                    <option value="7">Annoucement Letter</option>
                                    <option value="8">Complaint Letter</option>
                                    <option value="9">Thank You Letter</option>
                                    <option value="10">Interview Follow Up Letter</option>
                                    <option value="11">Termination Letter</option>
                                    <option value="12">Others</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Subject *</label> 
                                <input type="text" placeholder="" name="subject" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Pdf *</label> 
                                <input type="file" accept="application/pdf" placeholder="" name="pdf" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label>Description *</label> 
                                <textarea type="text" placeholder="" name="description" class="form-control" required></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
            
        </div>
    </div>
</div>

<div class="modal inmodal" id="delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Delete Letter</h4>
            </div>
            <form method="GET" id="delete_form" action="/demo/admin-department/letter-box/">
                <div class="modal-body">
                    <p><strong>Are you sure you want to delete this ?</strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">Yes</button>
                </div>
            </form>
            
        </div>
    </div>
</div>


<div class="modal inmodal" id="edit_modal"  role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated">
            <div class="modal-header py-1">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2><b>Edit Letter</b></h2>
            </div>
            <form method="POST" id="edit_form" action="/demo/admin-department/letter-box/" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Receipt Type *</label> 
                                <select data-placeholder="" id="receipt_type" name="receipt_type" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    <option value="0">Received</option>
                                    <option value="1">Dispatched</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Date *</label> 
                                <input type="date" placeholder="" id="date" name="date" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Letter Box *</label> 
                                <select data-placeholder="" id="letter_box" name="letter_box" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    <option value="0">Sender</option>
                                    <option value="1">Receiver</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-6">
                            <div class="form-group">
                                <label>Name *</label> 
                                <input type="text" placeholder="" id="name" name="name" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Department *</label> 
                                <select data-placeholder="" id="department" name="department" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    {% for department in user_departments %}
                                        <option value="{{department.id}}">{{department.user_department}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Letter No. / Reference No. *</label> 
                                <input type="text" placeholder="" id="reference_no" name="reference_no" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Type Of Letter *</label> 
                                <select data-placeholder="" id="letter_type" name="letter_type" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    <option value="0">Offer Letter</option>
                                    <option value="1">Appointment Letter</option>
                                    <option value="2">Office Letter</option>
                                    <option value="3">Govt. Notice</option>
                                    <option value="4">Letter Of Recomndation</option>
                                    <option value="5">Cover Letter</option>
                                    <option value="6">Resignation Letter</option>
                                    <option value="7">Annoucement Letter</option>
                                    <option value="8">Complaint Letter</option>
                                    <option value="9">Thank You Letter</option>
                                    <option value="10">Interview Follow Up Letter</option>
                                    <option value="11">Termination Letter</option>
                                    <option value="12">Others</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Subject *</label> 
                                <input type="text" placeholder="" id="subject" name="subject" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Pdf</label> 
                                <input type="file" accept="application/pdf" placeholder="" name="pdf" class="form-control">
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label>Description *</label> 
                                <textarea type="text" placeholder="" id="description" name="description" class="form-control" required></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
            
        </div>
    </div>
</div>

<script>
    $('.table').footable({
		"paging": {
			"enabled": true
		}
	});


    $(document).on('click', '#add_letter', ()=>{
        $('#add_modal').modal('show');
    });

    $(document).on('click', '.delete_button', function() {
        var id = $(this).attr("data-id");
        var action=$('#delete_form').attr('action');
        $('#delete_form').attr('action', action + id);
        $('#delete_modal').modal('show');
    });


     $(document).on('click', '.edit_button', function(){
        var id = $(this).attr("data-id");
        var name = $(this).attr("data-name");
        var department = $(this).attr("data-department");
        var receipt_type = $(this).attr("data-receipt-type");
        var date = $(this).attr("data-date");
        var letter_box = $(this).attr("data-letter-box");
        var letter_type = $(this).attr("data-letter-type");
        var reference_no = $(this).attr("data-reference-no");
        var subject = $(this).attr("data-subject");
        var description = $(this).attr("data-description");

        var action=$('#edit_form').attr('action');
        $('#edit_form').attr('action', action + id);

        $('#receipt_type').val(receipt_type);
        $('#date').val(date);
        $('#letter_box').val(letter_box);
        $('#name').val(name);
        $('#department').val(department);
        $('#letter_type').val(letter_type);
        $('#reference_no').val(reference_no);
        $('#subject').val(subject);
        $('#description').val(description);
        $('#edit_modal').modal('show');
        
    });
</script>

{% for message in messages %}
	<script>
		showNotification('{{message}}', '{{message.tags}}')
	</script>
{% endfor %}

{% endblock %}