{% extends 'base.html' %} 
{% load helper_tags %}
{% block content %}
<div class="content">

    <div class="">
        <div class="page-header-title">
            <!--<h4 class="page-title">Assignment</h4>-->
            <div class="time-box">
                <img src="/static/assets/images/alarm-clock.png" alt="clock">
                <input type="text" id="assignment_timer" data-time-spent="{{time_spent}}" disabled>
            </div>
        </div>
    </div>
    <div class="page-content-wrapper ">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <h4 class="m-t-0 m-b-0">View Assignment</h4>
                            {% if form.errors.items %} {% for field in form %} {% for error in field.errors %}
                            <div class="alert alert-danger alert-dismissible fade in">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>{{ error|escape }}</div>
                                {% endfor %} {% endfor %} {% for error in form.non_field_errors %}
                                <div class="alert alert-danger alert-dismissible fade in">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>{{ error|escape }}</div>
                                    {% endfor %} {% endif %}
                                    <div class="row">
                                        <div class="col-sm-12 col-xs-12">
                                            <div class="m-t-20">
                                                <form class="" name="frmAssignmentEdit_" id="frmAssignmentEdit_" method="POST"  novalidate="" enctype="multipart/form-data">
                                                    {% csrf_token %}
                                                    <div class="form-group">
                                                        <label>Title</label>
                                                        <div>
                                                            <input type="text" id="title" name="title" class="form-control" required data-parsley-required-message="Please enter title of the assignment"
                                                            placeholder="Enter assignment title" value='{{assignment.title}}'>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Description</label>
                                                        <div>

                                                            <textarea name="description" id="description" class="form-control" rows="6" required="required" data-parsley-required-message="Please enter description of the assignment"
                                                            placeholder="Enter assignment description">{{assignment.description}}</textarea>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label>Cost of assignment($)</label>
                                                        <div>
                                                            <input type="text" id="cost" name="cost" class="form-control" minlength="1" maxlength="10" required data-parsley-required-message="Please enter cost of the assignment"
                                                            data-parsley-type="number" data-parsley-type-message="Must be number"
                                                            data-parsley-minlength="1" data-parsley-maxlength="10" placeholder="Enter assignment cost"
                                                            value='{{assignment.cost}}'>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label>Start date</label>
                                                        <div>
                                                            <input type="text" id="start_date" name="start_date" class="form-control datepicker" required data-parsley-required-message="Please enter start date of the assignment"
                                                            placeholder="Enter assignment start date" value='{{ assignment.start_date|date:"m-d-Y" }}'>

                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>End date</label>
                                                        <div>
                                                            <input type="text" id="end_date" name="end_date" class="form-control datepicker" required data-parsley-required-message="Please enter end date of the assignment"
                                                            placeholder="Enter assignment end date" value='{{ assignment.end_date|date:"m-d-Y" }}'>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label>Client</label>
                                                        <div>
                                                            <select class="form-control" name="client_id" id="client_id" required data-parsley-required-message="Please select the client of the assignment">
                                                                <option value="">Select client</option>
                                                                {% for client in clients %}
                                                                <option value="{{client.id}}" {% if client.id == assignment.client_id %} selected="selected" {% endif %}>
                                                                    {{client.client_name|capfirst}} {% if client.client_name.strip == '' %} {{client.contact_person}} {% endif %}
                                                                </option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="form-group">
                                                        <div class="upload_pic">
                                                            <img class="image_preview" width="130" height="130" src="/media/{{assignment.image}}">
                                                            <input class="form-control img-preview" type="file" name="image" id="image" data-parsley-fileextension='jpg' data-parsley-required-message="Please enter image of that assignment"
                                                            data-parsley-trigger="change focusout">
                                                        </div>
                                                    </div>
                                                    <div class="row-add-list">
                                                        <div class="row-add row control-group after-add-more">
                                                                <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                            <input type="checkbox" id='' name="">
                                                                            <label>Fair Market Value</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>On Charter</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Loss Control</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Progress</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Condition/Valuation</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Off Charter</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Load/Secure/Trip</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Draft</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Engineer Certs.</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>In/Out of Service</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Damage - Date of Loss</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class='col-md-3'>
                                                                        <div class="checkbox checkbox-primary"> 
                                                                        <input type="checkbox" id='' name="">
                                                                        <label>Invoice Review</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group"></div>
                                                                    <div class='div_form_type_c hide'>
                                                                            <input class='form_type_c' type='text' id='form_type' name='form_type' value='{{assign_vessel_first.form_type}}'>
                                                                        </div>

                                                            <div class='col-md-12'>
                                                                <div class="row">
                                                                    <div class="col-md-3">
                                                                        <div class="radio radio-info radio-inline">
                                                                            <input class='r_vt' type="radio" id='r_vt' name="r_vt" value='bwr' {% if assign_vessel_first.form_type == 'bwr' %} checked {% endif %}> 
                                                                            <label> Walkaround Report</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <div class="radio radio-info radio-inline">
                                                                            <input class='r_vt' type="radio" id='r_vt' name="r_vt" value='gcr' {% if assign_vessel_first.form_type == 'gcr' %} checked {% endif %}> 
                                                                            <label>General Condition Report</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group"></div>
                                                            </div>

                                                            <div class="col-md-4 div_vessel_id_c">
                                                                <div class="form-group">
                                                                    <label>Vessel Type</label>
                                                                    <div> 
                                                                        <select class="form-control vessel_id_c" name="vessel_id" id="vessel_id" required data-parsley-required-message="Please select vessel type">
                                                                            <option value=""> Select Vessel type</option>
                                                                            {% for vt in vessels_type %}
                                                                            <option value="{{vt.id}}" {% if vt.id == assign_vessel_first.vessel_type_id %} selected="selected" {% endif %}>
                                                                                {{vt.type_name|capfirst}}
                                                                            </option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>




                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Vessel Name</label>
                                                                    <div>
                                                                        <input type="text" id="vessel_name" name="vessel_name" class="form-control" required data-parsley-required-message="Please enter Name of Vessels"
                                                                        placeholder="Name of Vessels" value='{{assign_vessel_first.vessel_name}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Requested By</label>
                                                                    <div>
                                                                        <input type="text" id="requested_by" name="requested_by" class="form-control" required data-parsley-required-message="Please enter requested by"
                                                                        placeholder="Requested By" value='{{assign_vessel_first.requested_by}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Account of</label>
                                                                    <div>
                                                                        <input type="text" id="account_of" name="account_of" class="form-control" required data-parsley-required-message="Please enter account of"
                                                                        placeholder="Account of" value='{{assign_vessel_first.account_of}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Owner</label>
                                                                    <div>
                                                                        <input type="text" id="owner" name="owner" class="form-control" required data-parsley-required-message="Please enter owner of vessel"
                                                                        placeholder="Owner of vessel" value='{{assign_vessel_first.owner}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Operator</label>
                                                                    <div>
                                                                        <input type="text" id="operator" name="operator" class="form-control" required data-parsley-required-message="Please enter operator of vessel"
                                                                        placeholder="Operator of vessel" value='{{assign_vessel_first.operator}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                            <div class="col-md-4"> 
                                                                <div class="form-group clearfix">
                                                                    <label>Assign Surveyor</label>
                                                                    <a href="#calendarModal" class="pull-right btn btn-xs waves-effect btn-primary" data-toggle="modal" title="Surveyor's Roster">
                                                                        <i class="fa fa-calendar"></i>
                                                                    </a>
                                                                    <div>
                                                                        <select class="form-control" name="user" id="user" required data-parsley-required-message="Please select surveyor">
                                                                            <option value=""> Select Surveyor</option>
                                                                            {% for a_s in atten_surveyor %}
                                                                            <option value="{{a_s.id}}" {% if a_s.id == assign_vessel_first.user_id %} selected="selected" {% endif %}>
                                                                                {{a_s.get_full_name|capfirst}}
                                                                            </option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>


                                                           <div class="col-md-4"> 
                                                                <div class="form-group clearfix">
                                                                    <label>Assign Admin</label>
                                                                    <a href="#calendarModalAdmin" class="pull-right btn btn-xs waves-effect btn-primary" data-toggle="modal" title="Surveyor's Roster">
                                                                        <i class="fa fa-calendar"></i>
                                                                    </a>
                                                                    <div>
                                                                        <select class="form-control" name="user_a" id="user_a" required data-parsley-required-message="Please select surveyor">
                                                                            <option value=""> Select Admin</option>
                                                                            {% for a_u in admin_user %}
                                                                            <option value="{{a_u.id}}" {% if a_u.id == assign_vessel_first.user_a_id %} selected="selected" {% endif %}>
                                                                                {{a_u.get_full_name|capfirst}}
                                                                            </option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>


                                                             <!---<div class="col-md-4"> 
                                                                <div class="form-group clearfix">
                                                                    <label>Assign Quality Assurance</label>
                                                                    <a href="#calendarModalQuality" class="pull-right btn btn-xs waves-effect btn-primary" data-toggle="modal" title="Surveyor's Roster">
                                                                        <i class="fa fa-calendar"></i>
                                                                    </a>
                                                                    <div>
                                                                        <select class="form-control" name="user_qa" id="user_qa" required data-parsley-required-message="Please select surveyor">
                                                                            <option value=""> Select Quality Assurance</option>
                                                                            {% for q_a_u in quality_assurance_user %}
                                                                            <option value="{{q_a_u.id}}" {% if q_a_u.id == assign_vessel_first.user_qa_id %} selected="selected" {% endif %}>
                                                                                {{q_a_u.get_full_name|capfirst}}
                                                                            </option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>---> 



                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>No of Vessels</label>
                                                                    <div>
                                                                        <input data-parsley-type="number" type="text" id="no_of_vessel" name="no_of_vessel" class="form-control" required data-parsley-required-message="Please enter No of Vessels"
                                                                        placeholder="No of Vessels" value='{{assign_vessel_first.no_of_vessel}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Street Address</label>
                                                                    <div>
                                                                        <input type="text" id="street_address" name="street_address" class="form-control" required data-parsley-required-message="Please enter Street Address"
                                                                        placeholder="Street Address" value='{{assign_vessel_first.street_address}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>City</label>
                                                                    <div>
                                                                        <input type="text" id="city" name="city" class="form-control" required data-parsley-required-message="Please enter City"
                                                                        placeholder="City" value='{{assign_vessel_first.city}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Zip Code</label>
                                                                    <div>
                                                                        <input data-parsley-type="number" type="text" id="pincode" name="pincode" class="form-control" required data-parsley-required-message="Please enter Zip Code"
                                                                        placeholder="Zip Code" value='{{assign_vessel_first.postal_code}}'>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-1 hide">
                                                                <div class="plus">
                                                                    <a href="javascript:void(0)" class="add-more">
                                                                        <i class="ion-plus-circled"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                       
                                                    </div>

                                                    <!--<div class="form-group multiple">
                                                        <label>Assigned User</label>
                                                        <select class="select2" name="assigned_user" id="assigned_user" required data-parsley-required-message="Please assign user of the assignment" multiple >
                                                            {% for manager in managers %}
                                                            <option value="{{manager.id}}" {% if manager.id|is_in:relationships %} selected="selected" {% endif %}>
                                                                {{manager.first_name|capfirst}}&nbsp;{{manager.last_name|capfirst}}&nbsp; - {{manager.userrole.title}}
                                                            </option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>-->
                                                    <div class="form-group">
                                                        <div>
                                                            <button type="submit" class="btn btn-primary waves-effect waves-light" id="btn-assignment-add"> Submit </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Starts Calendar Modal -->
        <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-labelledby="calendarModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="calendarModalLabel">Surveyor's Roaster</h4>
                    </div>
                    <div class="modal-body">
                        <div id='calendar'></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="calendarModalAdmin" tabindex="-1" role="dialog" aria-labelledby="calendarModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="calendarModalLabel">Surveyor's Roaster</h4>
                    </div>
                    <div class="modal-body">
                        <div id='calendar-admin'></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="calendarModalQuality" tabindex="-1" role="dialog" aria-labelledby="calendarModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="calendarModalLabel">Surveyor's Roaster</h4>
                    </div>
                    <div class="modal-body">
                        <div id='calendar-quality-assurance'></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Ends Calendar Modal -->
        <div id='calendar'></div>
        <div id='calendar-admin'></div>
        <div id='calendar-quality-assurance'></div>
        
        {% endblock %}