{% extends 'template.html' %}
{% block before_title %} <span class="badge badge-primary badge-pill"> {{ room.id }} </span> {% endblock %}
{% block title %}{{ room.name }}{% endblock %}

{% block button_toolbar %}
  <div class="btn-toolbar">
    <div class="btn-toolbar">
      {% if {module: 'contents', action: 'add'} in privileges and not job.locked %}
      <a href="#" type="button" class="btn btn-primary mr-1" data-toggle="modal" data-target="#addContent">Add Content</a>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block page_nav %}
<!-- .page-navs -->
<header class="page-navs shadow-sm pr-3">
  <!-- btn-account -->
  <a href="/jobs/{{ job.id }}/show" class="btn-account">
    <div class="account-summary">
      <h1 class="card-title"> <span class="badge badge-primary badge-pill"> {{ job.id }} </span> {{ job.name }} </h1>
      <h6 class="card-subtitle text-muted">
        {{ job.incident_address }}
        {% if job.state %}, {{ job.state }}{%endif%}
        {% if job.city %}, {{ job.city }}{%endif%}
        {% if job.zip %}, {{ job.zip }}{%endif%}
      </h6>
    </div>
  </a> <!-- /btn-account -->
  <!-- right actions -->
  <div class="ml-auto">
    <div class="dropdown">
      <button type="button" class="btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-filter mr-1"></i> Switch to another Room ({{ jobRooms|length }}) <i class="fa fa-caret-down ml-1"></i>
      </button> <!-- .dropdown-menu -->
      <div class="dropdown-menu stop-propagation" style="">
        <h6 id="client-projects-tab" class="dropdown-header"> Rooms </h6>
        {% for jobRoom in jobRooms %}
          <label class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="roomFilter" value="{{ jobRoom.id }}" {% if jobRoom.id == room.id %}checked{%endif%}>
            <span class="custom-control-label"> {{ jobRoom.name}} </span>
          </label>
        {% endfor %}
      </div><!-- /.dropdown-menu -->
    </div>
  </div><!-- /right actions -->
</header><!-- /.page-navs -->
{% endblock %}

{% block page_content %}
<style>
  #statusFilter {
    display: inline;
    width: 200px;
    margin-left: 25px;
  }
</style>
<div class="card card-fluid">
  <!-- .card-body -->
  <div class="card-body border-bottom">
    <!-- .d-flex -->
    <div class="row">
      <!-- .col -->
      <div class="col">
        <!-- .metric -->
        <div class="metric">
          <p class="metric-label"> ROOM PRICE </p>
          <h2 class="metric-value"> <sub><i class="oi oi-dollar"></i></sub> <span id="room-price">{{ roomPrice.total|number_format(2, '.', ',') }}</span> </h2>
        </div><!-- .metric -->
      </div><!-- /.col -->
      <!-- .col -->
      <div class="col">
        <!-- .metric -->
        <div class="metric">
          <p class="metric-label"> ROOM COMPLETE </p>
          <h2 class="metric-value">  <sub><i class="fa fa-tasks"></i></sub> <span id="room-total-items">{{ roomTotalItems }}</span>
            <sup class="badge text-info">
            <span id="room-completed">
            {% if roomTotalCompleted.total > 0 %}
              {{ ((roomTotalCompleted.total / roomTotalItems ) * 100)|number_format(1) }}
            {% else %}
              0
            {% endif %}
            </span>
            %
            </sup>
          </h2>
        </div><!-- .metric -->
      </div><!-- /.col -->
      <!-- .col -->
      <div class="col">
        <!-- .metric -->
        <div class="metric">
          <p class="metric-label"> JOB PRICE </p>
          <h2 class="metric-value"> <sub><i class="oi oi-dollar"></i></sub> <span id="job-price">{{ jobPrice.total|number_format(2, '.', ',') }}</span> </h2>
        </div><!-- .metric -->
      </div><!-- /.col -->
      <!-- .col -->
      <div class="col">
        <!-- .metric -->
        <div class="metric">
          <p class="metric-label"> JOB COMPLETE </p>
          <h2 class="metric-value"> <sub><i class="fa fa-tasks"></i></sub> <span id="job-total-items">{{ jobTotalItems.total }}</span>
            <sup class="badge text-info">
              <span id="job-completed">
              {% if jobTotalCompleted.total > 0 %}
                {{ ((jobTotalCompleted.total / jobTotalItems.total ) * 100)|number_format(1) }}
              {% else %}
                0
              {% endif %}
              </span>
              %
            </sup>
          </h2>
        </div><!-- .metric -->
      </div><!-- /.col -->
    </div><!-- /.d-flex -->
  </div><!-- /.card-body -->
  <div class="card-body">
    <!-- .table-responsive -->
    <div>
      <!-- Create the drop down filter -->
      <div class="status-filter">
        <select id="statusFilter" class="form-control">
          <option value="all" {% if filter == 'all' %}selected{% endif %}>Show All</option>
          <option value="unpriced" {% if filter == 'unpriced' %}selected{% endif %}>Unpriced only</option>
          <option value="nodescription" {% if filter == 'nodescription' %}selected{% endif %}>No Drescription only</option>
        </select>
      </div>
      <!-- .table -->
      <table class="table" id="contents">
        <!-- thead -->
        <thead>
          <tr>
            <th></th>
            <th>
              <div class="thead-dd dropdown">
                <span class="custom-control custom-control-nolabel custom-checkbox"><input type="checkbox" class="custom-control-input" id="check-bulk"> <label class="custom-control-label" for="check-bulk"></label></span>
                <div class="thead-btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="fa fa-caret-down"></span>
                </div>
                {% if {module: 'contents', action: 'delete'} in privileges and not job.locked %}
                <div class="dropdown-menu" id="delete-selected">
                  <div class="dropdown-arrow"></div>
                  <a class="dropdown-item" href="#" data-toggle="modal" data-target="#alertDeleteBulk">Delete selected</a>
                </div>
                {% endif %}
              </div>
            </th>
            <th> # </th>
            <th></th>
            <th> Photo </th>
            <th> &nbsp; </th>
            <th> Description </th>
            <th> Category </th>
            <th> Notes </th>
            <th> Units </th>
            <th> Qty </th>
            <th> Price New </th>
            <th> Age </th>
            <th> Condition </th>
            <th> Dep % </th>
            <th> INV </th>
            <th> &nbsp; </th>
          </tr>
        </thead><!-- /thead -->
        <!-- tbody -->
        <tbody>

        </tbody><!-- /tbody -->
      </table><!-- /.table -->
    </div><!-- /.table-responsive -->
  </div><!-- /.card-body -->
</div><!-- /.card -->

<!-- .modal -->
<form id="formContent" action="/contents/create" method="post" enctype="multipart/form-data">
  <div class="modal fade" id="addContent" tabindex="-1" role="dialog" aria-labelledby="addContentLabel" aria-hidden="true">
    <!-- .modal-dialog -->
    <div class="modal-dialog" role="document">
      <!-- .modal-content -->
      <div class="modal-content">
        <div id="loading" class="spinner-border text-primary mt-4 mb-4" style="width: 10rem; height: 10rem; margin: auto; display: none;" role="status">
          <span class="sr-only">Loading...</span>
        </div>

        <div id="form-content">
          <!-- .modal-header -->
          <div class="modal-header">
            <h6 id="addContentLabel" class="modal-title">Content</h6>
          </div><!-- /.modal-header -->
          <!-- .modal-body -->
          <div class="modal-body">
            <input type="hidden" name="room_id" value="{{ room.id }}">
            <!-- .form-row -->
            <div class="form-row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="description">Description</label> <input type="text" name="description" class="form-control" placeholder="Description">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label for="category_id">Category</label> <select name="category_id" class="custom-select d-block">
                    <!-- select 'HH - HOUSEHOLD' by default -->
                    {% for category in contentCategories %}
                    <option value="{{ category.value }}" {% if category.value == 2 %}selected{% endif %}> {{ category.text }} </option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label for="note">Notes</label> <textarea class="form-control" name="note" placeholder="Notes" rows="2"></textarea>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="unit_id">Unit</label> <select name="unit_id" class="custom-select d-block">
                    {% for units in contentUnits %}
                    <option value="{{ units.value }}"> {{ units.text }} </option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="quantity">Quantity</label> <input type="number" name="quantity" class="form-control" min="1" value="1">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="price">Price New</label> <input type="number" name="price" class="form-control" min="0" step=".01" value="0" lang="en-US">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="age">Age</label> <input type="number" name="age" class="form-control" min="0" value="0">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label for="price_reference">Price Reference</label> <input type="text" name="price_reference" class="form-control" placeholder="Price Reference">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label for="condition_id">Condition</label> <select name="condition_id" class="custom-select d-block">
                    {% for condition in contentConditions %}
                    <option value="{{ condition.value }}"> {{ condition.text }} </option>
                    {% endfor %}
                  </select>
                </div>
              </div>

              <div class="col-md-12">

                <!--Image Upload-->
                <div class="row mt-3 mb-2">

                  <div class="col-12 pr-0 text-left">
                      <label class="col-form-label text-nowrap">Images</label>
                    </div>
                  </div>

                  <!--Image container -->
                  <div id="imagesLoader" class="row"data-type="imagesloader"
                       data-errorformat="Accepted file formats"
                       data-errorsize="Maximum size accepted"
                       data-errorduplicate="File already loaded"
                       data-errormaxfiles="Maximum number of images you can upload"
                       data-errorminfiles="Minimum number of images to upload"
                       data-modifyimagetext="Modify immage">

                    <!-- Progress bar -->
                    <div class="col-12 order-1 mt-2">
                      <div data-type="progress" class="progress" style="height: 25px; display:none;">
                        <div data-type="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%;">Load in progress...</div>
                      </div>
                    </div>

                    <!-- Model -->
                    <div data-type="image-model" class="col-4 pl-2 pr-2 pt-2" style="max-width:200px; display:none;">

                      <div class="ratio-box text-center" data-type="image-ratio-box">
                        <img data-type="noimage" class="btn btn-light ratio-img img-fluid p-2 image border dashed rounded" src="/assets/vendor/images-loader/img/photo-camera-gray.svg" style="cursor:pointer;">
                        <div data-type="loading" class="img-loading" style="color:#218838; display:none;">
                          <span class="fa fa-2x fa-spin fa-spinner"></span>
                        </div>
                        <img data-type="preview" class="btn btn-light ratio-img img-fluid p-2 image border dashed rounded" src="" style="display: none; cursor: default;">
                        <span class="badge badge-pill badge-success p-2 w-50 main-tag" style="display:none;">Main</span>
                      </div>

                      <!-- Buttons -->
                      <div data-type="image-buttons" class="row justify-content-center mt-2">
                        <button data-type="add" class="btn btn-sm btn-outline-success" type="button"><span class="fa fa-camera mr-2"></span>Add</button>
                        <button data-type="btn-modify" type="button" class="btn btn-sm btn-outline-success m-0" data-toggle="tooltip popover" data-placement="right" style="display:none;">
                          <span class="fa fa-pencil-alt mr-2"></span>Modify
                        </button>
                      </div>
                    </div>

                    <!-- Popover operations -->
                    <div data-type="popover-model" style="display:none">
                      <div data-type="popover" class="ml-3 mr-3" style="min-width:150px;">
                        <div class="row">
                          <div class="col p-0">
                            <button data-operation="main" class="btn btn-block btn-success btn-sm rounded-pill" type="button"><span class="fa fa-angle-double-up mr-2"></span>Main</button>
                          </div>
                        </div>
                        <!--
                        <div class="row mt-2">
                          <div class="col-6 p-0 pr-1">
                            <button data-operation="left" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button"><span class="fa fa-angle-left mr-2"></span>Left</button>
                          </div>
                          <div class="col-6 p-0 pl-1">
                            <button data-operation="right" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button">Right<span class="fa fa-angle-right ml-2"></span></button>
                          </div>
                        </div>
                        -->
                        <div class="row mt-2">
                          <div class="col-6 p-0 pr-1">
                            <button data-operation="rotateanticlockwise" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button"><span class="fas fa-undo-alt mr-2"></span>Rotate</button>
                          </div>
                          <div class="col-6 p-0 pl-1">
                            <button data-operation="rotateclockwise" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button">Rotate<span class="fas fa-redo-alt ml-2"></span></button>
                          </div>
                        </div>
                        <div class="row mt-2">
                          <button data-operation="remove" class="btn btn-outline-danger btn-sm btn-block" type="button"><span class="fa fa-times mr-2"></span>Remove</button>
                        </div>
                      </div>
                    </div>

                  </div>

                  <div class="form-group row" style="display:none;">
                    <div class="input-group">
                      <input id="files" type="file" name="files[]" data-button="" multiple accept="image/jpeg, image/png, image/gif,">
                    </div>
                  </div>

              </div>

            </div><!-- /.form-row -->
          </div><!-- /.modal-body -->
          <!-- .modal-footer -->
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Add Content</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
          </div><!-- /.modal-footer -->
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
</form><!-- /.modal -->


<!-- .modal -->
<form id="formEditImages" action="" method="post" enctype="multipart/form-data">
  <div class="modal fade" id="editImages" tabindex="-1" role="dialog" aria-labelledby="editImagesLabel" aria-hidden="true">
    <!-- .modal-dialog -->
    <div class="modal-dialog" role="document">
      <!-- .modal-content -->
      <div class="modal-content">
        <div id="editImagesLoading" class="spinner-border text-primary mt-4 mb-4" style="width: 10rem; height: 10rem; margin: auto; display: none;" role="status">
          <span class="sr-only">Loading...</span>
        </div>

        <div id="form-edit-images-content">
          <!-- .modal-header -->
          <div class="modal-header">
            <h6 id="editImagesLabel" class="modal-title">Content Images</h6>
          </div><!-- /.modal-header -->
          <!-- .modal-body -->
          <div class="modal-body">
            <input type="hidden" name="content_id" value="">
            <!-- .form-row -->
            <div class="form-row">
              <div class="col-md-12">
                  <!--Image container -->
                  <div id="editImagesLoader" class="row" data-type="imagesloader"
                       data-errorformat="Accepted file formats"
                       data-errorsize="Maximum size accepted"
                       data-errorduplicate="File already loaded"
                       data-errormaxfiles="Maximum number of images you can upload"
                       data-errorminfiles="Minimum number of images to upload"
                       data-modifyimagetext="Modify immage">

                    <!-- Progress bar -->
                    <div class="col-12 order-1 mt-2">
                      <div data-type="progress" class="progress" style="height: 25px; display:none;">
                        <div data-type="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%;">Load in progress...</div>
                      </div>
                    </div>

                    <!-- Model -->
                    <div data-type="image-model" class="col-4 pl-2 pr-2 pt-2" style="max-width:200px; display:none;">

                      <div class="ratio-box text-center" data-type="image-ratio-box">
                        <img data-type="noimage" class="btn btn-light ratio-img img-fluid p-2 image border dashed rounded" src="/assets/vendor/images-loader/img/photo-camera-gray.svg" style="cursor:pointer;">
                        <div data-type="loading" class="img-loading" style="color:#218838; display:none;">
                          <span class="fa fa-2x fa-spin fa-spinner"></span>
                        </div>
                        <img data-type="preview" class="btn btn-light ratio-img img-fluid p-2 image border dashed rounded" src="" style="display: none; cursor: default;">
                        <span class="badge badge-pill badge-success p-2 w-50 main-tag" style="display:none;">Main</span>
                      </div>

                      <!-- Buttons -->
                      <div data-type="image-buttons" class="row justify-content-center mt-2">
                        <button data-type="add" class="btn btn-sm btn-outline-success" type="button"><span class="fa fa-camera mr-2"></span>Add</button>
                        <button data-type="btn-modify" type="button" class="btn btn-sm btn-outline-success mb-2" data-toggle="tooltip popover" data-placement="right" style="display:none;">
                          <span class="fa fa-pencil-alt mr-2"></span>Modify
                        </button>
                        <a href="#" data-toggle="modal" data-target="#changeLine" data-type="btn-change-line" type="button" class="btn btn-sm btn-outline-warning" style="display:none;">
                          <span class="fa fa-sort mr-2"></span>Change Line
                        </a>
                      </div>
                    </div>

                    <!-- Popover operations -->
                    <div data-type="popover-model" style="display:none">
                      <div data-type="popover" class="ml-3 mr-3" style="min-width:150px;">
                        <div class="row">
                          <div class="col p-0">
                            <button data-operation="main" class="btn btn-block btn-success btn-sm rounded-pill" type="button"><span class="fa fa-angle-double-up mr-2"></span>Main</button>
                          </div>
                        </div>
                        <!--
                        <div class="row mt-2">
                          <div class="col-6 p-0 pr-1">
                            <button data-operation="left" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button"><span class="fa fa-angle-left mr-2"></span>Left</button>
                          </div>
                          <div class="col-6 p-0 pl-1">
                            <button data-operation="right" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button">Right<span class="fa fa-angle-right ml-2"></span></button>
                          </div>
                        </div>
                        -->
                        <div class="row mt-2">
                          <div class="col-6 p-0 pr-1">
                            <button data-operation="rotateanticlockwise" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button"><span class="fas fa-undo-alt mr-2"></span>Rotate</button>
                          </div>
                          <div class="col-6 p-0 pl-1">
                            <button data-operation="rotateclockwise" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button">Rotate<span class="fas fa-redo-alt ml-2"></span></button>
                          </div>
                        </div>
                        <div class="row mt-2">
                          <button data-operation="remove" class="btn btn-outline-danger btn-sm btn-block" type="button"><span class="fa fa-times mr-2"></span>Remove</button>
                        </div>
                      </div>
                    </div>

                  </div>
                  <div class="form-group row" style="display:none;">
                    <div class="input-group">
                      <input id="editFiles" type="file" name="files[]" data-button="" multiple accept="image/jpeg, image/png, image/gif,">
                    </div>
                  </div>
              </div>
            </div><!-- /.form-row -->
          </div><!-- /.modal-body -->
          <!-- .modal-footer -->
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
          </div><!-- /.modal-footer -->
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
</form><!-- /.modal -->

<!-- .modal -->
<form id="formInvoice" action="#" method="post" enctype="multipart/form-data">
  <div class="modal fade" id="invoice" tabindex="-1" role="dialog" aria-labelledby="invoiceLabel" aria-hidden="true">
    <!-- .modal-dialog -->
    <div class="modal-dialog" role="document">
      <!-- .modal-content -->
      <div class="modal-content">
        <div id="invoiceLoading" class="spinner-border text-primary mt-4 mb-4" style="width: 10rem; height: 10rem; margin: auto; display: none;" role="status">
          <span class="sr-only">Loading...</span>
        </div>

        <div id="form-invoice">
          <!-- .modal-header -->
          <div class="modal-header">
            <h6 id="invoiceLabel" class="modal-title">Invoice</h6>
          </div><!-- /.modal-header -->
          <!-- .modal-body -->
          <div class="modal-body">
            <!-- .form-row -->
            <div class="form-row">
              <div class="col-md-12">
                <!-- form-group -->
                <div class="form-group">
                  <!-- form column -->
                  <label for="inputInvoice" class="col-md-3">Invoice</label> <!-- /form column -->
                  <!-- form column -->
                  <div class="col-md-12 mb-3">
                    <div class="mb-2" style="display: none;" id="existingInvoice">
                      <div class="tile tile-sm"><span class="fa fa-file-invoice-dollar"></span></div><span class="text-muted" id="existingInvoiceName"> </span> &nbsp;
                      <a href="#" target="_blank" class="btn btn-xs btn-success" id="existingInvoiceDownload"><span class="oi oi-data-transfer-download mr-1"></span> Download</a>
                      {% if not job.locked %}
                      <a data-href="#" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#alerdDelete" id="existingInvoiceDelete"><span class="fa fa-trash mr-1"></span> Delete</a>
                      {% endif %}
                    </div>
                    {% if not job.locked %}
                    <div class="custom-file">
                      <input type="file" class="custom-file-input" id="inputInvoice" name="invoice" accept="application/pdf, image/*">
                      <label class="custom-file-label" for="inputInvoice">Choose file</label>
                      <small id="inputInvoice" class="form-text text-muted">Only PDF and Images allowed</small>
                    </div>
                    {% endif %}
                  </div><!-- /form column -->
                </div><!-- /form-group -->
              </div>
            </div><!-- /.form-row -->
          </div><!-- /.modal-body -->
          <!-- .modal-footer -->
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
          </div><!-- /.modal-footer -->
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
</form><!-- /.modal -->

<!-- .modal -->
<form id="formChangeLine" action="#" method="post">
  <div class="modal fade" id="changeLine" role="dialog" aria-labelledby="changeLineLabel" aria-hidden="true">
    <!-- .modal-dialog -->
    <div class="modal-dialog" role="document">
      <!-- .modal-content -->
      <div class="modal-content">
        <div id="changeLineLoading" class="spinner-border text-primary mt-4 mb-4" style="width: 10rem; height: 10rem; margin: auto; display: none;" role="status">
          <span class="sr-only">Loading...</span>
        </div>

        <div id="form-change-line">
          <!-- .modal-header -->
          <div class="modal-header">
            <h6 id="invoiceLabel" class="modal-title">Change Line</h6>
          </div><!-- /.modal-header -->
          <!-- .modal-body -->
          <div class="modal-body">
            <input type='hidden' id="imageId" name='image_id'>
            <!-- .form-row -->
            <div class="form-row">
              <div class="col-md-12">
                <!-- form-group -->
                <div class="form-group mb-4">
                  <label class="control-label" for="target_line">Target Line</label>
                  <select id="target_line" name="target_line" class="form-control" data-placeholder="Select Target Line" data-allow-clear="true" style="width: 100%">
                    <option value=""></option>

                  </select>
                </div><!-- /.form-group -->
                <div class="form-group">
                  <!-- form column -->
                  <div class="col-md-12 mb-3">
                    <label class="switcher-control switcher-control-success switcher-control-lg">
                      <input type='hidden' value='0' name='main_image'>
                      <input type="checkbox" class="switcher-input" id="inputMainImage" name="main_image">
                      <span class="switcher-indicator"></span>
                      <span class="switcher-label-on"><i class="fas fa-check"></i></span>
                      <span class="switcher-label-off"><i class="fas fa-times"></i></span>
                    </label>
                    <label class="control-label" for="inputMainImage">Make main image of new line</label>
                  </div><!-- /form column -->
                </div>
                <div class="form-group">
                  <!-- form column -->
                  <div class="col-md-12 mb-3">
                    <label class="switcher-control switcher-control-success switcher-control-lg">
                      <input type='hidden' value='0' name='delete_existing_line'>
                      <input type="checkbox" class="switcher-input" id="inputDeleteExistingLine" name="delete_existing_line" checked>
                      <span class="switcher-indicator"></span>
                      <span class="switcher-label-on"><i class="fas fa-check"></i></span>
                      <span class="switcher-label-off"><i class="fas fa-times"></i></span>
                    </label>
                    <label class="control-label" for="inputDeleteExistingLine">Delete this line after transferring image on new line</label>
                  </div><!-- /form column -->
                </div>
              </div>
            </div><!-- /.form-row -->
          </div><!-- /.modal-body -->
          <!-- .modal-footer -->
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
          </div><!-- /.modal-footer -->
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
</form><!-- /.modal -->

<!-- Alert Danger Modal -->
<div class="modal modal-alert fade" id="alertDeleteBulk" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="alertDeleteBulkLabel" aria-hidden="true">
  <form class="" action="/contents/delete-bulk" method="post">
  <input type="hidden" name="selectedItemsModal[]">
  <input type="hidden" name="bulk_room_id" value="{{ room.id }}">
  <!-- .modal-dialog -->
  <div class="modal-dialog modal-dialog-centered" role="document">
    <!-- .modal-content -->
    <div class="modal-content">
      <!-- .modal-header -->
      <div class="modal-header">
        <h5 id="alertDeleteBulkLabel" class="modal-title">
          <i class="fa fa-exclamation-triangle text-red mr-1"></i> Are you sure you want to delete selected items?
        </h5>
      </div><!-- /.modal-header -->
      <div class="modal-body" id="no-items-selected" style="display:none;">
        <p class="text-danger">No items selected</p>
      </div>
      <!-- .modal-footer -->
      <div class="modal-footer">
        <button role="submit" id="delete-bulk-button" class="btn btn-danger btn-lg btn-ok">Delete <i class="far fa-trash-alt"></i></button>
        <button type="button" class="btn btn-lg btn-subtle-dark" data-dismiss="modal">Cancel</button>
      </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
  </form>
</div><!-- /.modal -->

{% endblock %}

{% block page_includes %}
<script src="/assets/vendor/x-editable/dist/bootstrap4-editable/js/bootstrap-editable.min.js"></script><!-- SHOULD BE BEFORE DATATABLE -->
<script src="/assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/dataTables.buttons.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.bootstrap4.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.html5.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.print.min.js"></script> <!-- END PLUGINS JS -->
<script src="/assets/javascript/pages/dataTables.bootstrap.js"></script>
<script src="/assets/vendor/flatpickr/flatpickr.min.js"></script>
<script src="/assets/vendor/flatpickr/plugins/monthSelect/index.js"></script>
<script src="/assets/vendor/images-loader/jquery.imagesloader-1.0.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script src="/assets/vendor/select2/js/select2.min.js"></script>

<script type="text/javascript">
  $('input[name=roomFilter]').change(function(){
      window.location.href = '/rooms/' + $(this).val() + '/show';
  });

  // Create image loader plugin
  var imagesloader = $('#imagesLoader').imagesloader({
    maxFiles: 4, minSelect: 0, imagesToLoad: []
  });

  function refreshStats() {
    $.ajax({
        url: '/rooms/{{ room.id }}/get-stats',
        type: 'GET',
        success: function (stats) {
            console.log(stats);
            $('#room-price').text(stats.roomPrice.total.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
            $('#room-total-items').text(stats.roomTotalItems);
            $('#room-completed').text(((stats.roomTotalCompleted.total/stats.roomTotalItems) * 100).toFixed(1));
            $('#job-price').text(stats.jobPrice.total.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
            $('#job-total-items').text(stats.jobTotalItems.total);
            $('#job-completed').text(((stats.jobTotalCompleted.total/stats.jobTotalItems.total) * 100).toFixed(1));
        },
        cache: false,
        contentType: false,
        processData: false
    });
  }

  // Form submit
  $('#formContent').submit(function (e) {
    e.preventDefault();
    var formData = new FormData(this);
    var files = imagesloader.data('format.imagesloader').AttachmentArray;
    var il = imagesloader.data('format.imagesloader');

    //console.log(files);

    if (il.CheckValidity()) {
      files.forEach((file, index, array) => {
          //console.log(file);
          formData.append('files[]', file.File);
          formData.append('rotations[]', file.Rotation);
      });

      $.ajax({
          url: '/contents/create',
          type: 'POST',
          data: formData,
          beforeSend: function() {
            $('#form-content').hide();
            $('#loading').show();
          },
          success: function (data) {
              console.log(data)
          },
          complete: function() {
            location.reload();
          },
          cache: false,
          contentType: false,
          processData: false
      });
    }

    e.stopPropagation();
  });

  $("#editImages").on('shown.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var contentId = button.data('content-id');
    var editImagesLoader = null;

    $.ajax({
        url: '/contents/' + contentId + '/get-images',
        type: 'GET',
        beforeSend: function() {
          $('#form-edit-images-content').hide();
          $('#editImagesLoading').show();
        },
        success: function (images) {
            //console.log(images);
            $('#form-edit-images-content').show();
            $('#editImagesLoading').hide();

            //images = [{"Url":"/content-images/13/get-image","Name":"Nespresso001"},{"Url":"/content-images/14/get-image","Name":"Nespresso002"}];

            editImagesLoader = $('#editImagesLoader').imagesloader({
              maxFiles: 4, minSelect: 1, imagesToLoad: images, destroy: true
            });
            //console.log(editImagesLoader.data('format.imagesloader').AttachmentArray);
        },
        cache: false,
        contentType: false,
        processData: false
    });

    // Form submit
    $('#formEditImages').submit(function (e) {
      e.preventDefault();
      var formData = new FormData(this);
      var files = editImagesLoader.data('format.imagesloader').AttachmentArray;
      var il = editImagesLoader.data('format.imagesloader');

      formData.append('content_id', contentId);

      if (il.CheckValidity()) {
        files.forEach((file, index, array) => {
            //console.log(file);
            formData.append('files[]', file.File);
            formData.append('rotations[]', file.Rotation);
        });

        $.ajax({
            url: '/contents/edit-images',
            type: 'POST',
            data: formData,
            beforeSend: function() {
              $('#form-edit-images-content').hide();
              $('#editImagesLoading').show();
            },
            success: function (data) {
                console.log(data);
            },
            complete: function() {
              location.reload();
            },
            cache: false,
            contentType: false,
            processData: false
        });
      }

      e.stopPropagation();
    });
  });

  $("#invoice").on('shown.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var contentId = button.data('content-id');
    var invoice = button.data('content-invoice');

    $('#formInvoice').attr("action", "/contents/" + contentId + "/add-invoice");

    if (invoice != '') {
      $('#existingInvoiceName').text(invoice.split(/[/]+/).pop());
      $('#existingInvoiceDownload').attr("href", "/contents/" + contentId + "/download-invoice");
      $('#existingInvoiceDelete').attr("data-href", "/contents/" + contentId + "/delete-invoice");
      $('#existingInvoice').show();
    }
  });

  $('#invoice').on('hidden.bs.modal', function () {
    $('#existingInvoice').hide();
  })

  $('#addContent, #editImages').on('hidden.bs.modal', function () {
    location.reload();
  });

  $("#changeLine").on('shown.bs.modal', function (event) {
    var link = $(event.relatedTarget); // Link that triggered the modal
    var imageId = link.data('image-id');
    $("#imageId").val(imageId);

    $.ajax({
         url: '/contents/list-room-items?room_id={{ room.id }}&image_id=' + imageId,
         type: 'get',
         dataType: 'json',
         success: function (data){
           $('[name=target_line]').select2({
             data: data,
             templateResult: formatLine,
             templateSelection: formatLineSelection
           });

           function formatLineSelection(line) {
             if (!line.id) {
               return line.text;
             }

             var $span = $(
               '<span class="card-title"> Line <span class="badge badge-primary badge-pill">' + line.line + ' </span></span>'
             );

             return $span;
           }

           function formatLine(line) {
            if (!line.id) {
             return line.text;
            }

            var html = '<div class="media">' + '<div class="user-avatar user-avatar-lg mr-2"><img src="' + line.primary_image + '" /></div>' + '<div class="media-body">' + '<h6 class="my-0"> Line #' + line.line + '</h6>';

            if (line.category) {
              html += '<div class="small text-muted">Category: ' + line.category + '</div>';
            }

            if (line.description) {
              html += '<div class="small text-muted">Description: ' + line.description + '</div>';
            }

            var $span = $(html);

            return $span;
           }

         }
    });
  });

  // Form submit
  $('#formChangeLine').submit(function (e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
        url: '/contents/change-line',
        type: 'POST',
        data: formData,
        beforeSend: function() {
          $('#form-change-line').hide();
          $('#changeLineLoading').show();
        },
        success: function (data) {
          console.log(data);
        },
        complete: function() {
          location.reload();
        },
        cache: false,
        contentType: false,
        processData: false
    });

    e.stopPropagation();
  });

  // render datatable at the end, otherwise x-editable doesnt work on pagination
  var contentsTable = $('#contents').DataTable({
        dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>\n        <'table-responsive'tr>\n        <'row align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 d-flex justify-content-end'p>>",
        language: {
          paginate: {
            previous: '<i class="fa fa-lg fa-angle-left"></i>',
            next: '<i class="fa fa-lg fa-angle-right"></i>'
          }
        },
        autoWidth: false,
        stateSave: true,
        deferRender: true,
        "processing": true,
        "serverSide": true,
        "ajax": {
          "url": "/contents/{{ room.id }}/list-room-contents-ajax",
          "data": {filter: "{{ filter }}" }
        },
        "responsive": true,
        "order": [[ 2, "desc" ]],
        columnDefs: [
          {
              "defaultContent": "",
              "targets": "_all"
          },
          {
              "targets": [ 0 ],
              "visible": false
          },
          {
              "targets": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 ],
              "class": "align-middle",
              "visible": true
          },
          {
              "targets": [ 0, 1, 4, 5, 15, 16 ],
              "orderable": false
          }
        ],
        "fnDrawCallback": function (oSettings) {

          {% if not job.locked and {module: 'contents', action: 'edit'} in privileges %}
          //x-editable
          $.fn.editable.defaults.mode = 'popup'; // inline, popup

          $('.name-column').editable({
              type: 'text',
              url: '/contents/update-column'
          });

          $('.sentimental').change(function() {
              var value = 0;
              var pk = $(this).attr("data-id");
              var name = 'sentimental';

              if(this.checked) {
                value = 1;
              }

              var data = {pk:pk, value:value, name:name};

              $.ajax({
                  url: '/contents/update-column',
                  type: 'POST',
                  data: data,
                  success: function(resultData) { console.log(resultData); }
              });
          });

          $('.category-column').editable({
              type:'select',
              value:$(this).attr('data-value'),
              source:{{ contentCategories|json_encode|raw }},
              url: '/contents/update-column',
              success: function(data, config) {
                $('.depreciation-column[data-pk=' + data.id + ']').text(data.depreciation);
              }
          });

          $('.note-column').editable({
            type:'textarea',
            url: '/contents/update-column'
          });

          $('.unit-column').editable({
              type:'select',
              value:$(this).attr('data-value'),
              source:{{ contentUnits|json_encode|raw }},
              url: '/contents/update-column'
          });

          $('.quantity-column').editable({
              type:'number',
              validate:function(val) {
                  var i = parseInt(val);
                  if (i < 0) {
                      return "Please enter a valid quantity";
                  }
              },
              url: '/contents/update-column',
              success: function(data) {
                  refreshStats();
              }
          });

          $('.price-column').editable({
              type:'text',
              validate:function(val) {
                  var i = parseFloat(val);
                  if (i < 0) {
                      return "Please enter a valid price";
                  }
              },
              url: '/contents/update-column',
              success: function(data) {
                  refreshStats();
              }
          });

          $('.price-reference-column').editable({
              type: 'textarea',
              value: $(this).attr('data-value'),
              display: function (value, sourceData, response) {
                 $(this).html('<i class="fa fa-link text-muted"></i>');
              },
              url: '/contents/update-column'
          });

          $('.age-column').editable({
              type:'number',
              validate:function(val) {
                  var i = parseInt(val);
                  if (i < 0) {
                      return "Please enter a valid age";
                  }
              },
              url: '/contents/update-column'
          });

          $('.condition-column').editable({
              type:'select',
              value:$(this).attr('data-value'),
              source:{{ contentConditions|json_encode|raw }},
              url: '/contents/update-column'
          });

          $('.depreciation-column').editable({
              type:'text',
              validate:function(val) {
                  var i = parseFloat(val);
                  if (i < 0 || i > 100) {
                      return "Please enter a valid percentage";
                  }
              },
              url: '/contents/update-column'
          });
          {% endif %}

          $('#check-bulk').prop('checked', false);

          $('.editable').on('shown', function(e, editable) {
              editable.input.postrender = function() {
                  editable.input.$input.select();
              };
          });
        }
  });

  $(".dataTables_filter").append($("#statusFilter"));

  $("#statusFilter").change(function () {
      var filterValue = $(this).val();
      window.location.href = "/rooms/{{ room.id }}/show?filter=" + filterValue;
  });

  // Search with at least 3 characters
  $(".dataTables_filter input")
  .unbind() // Unbind previous default bindings
  .bind("input", function(e) { // Bind our desired behavior
      // If the length is 3 or more characters, or the user pressed ENTER, search
      if(this.value.length >= 3 || e.keyCode == 13) {
          // Call the API search function
          contentsTable.search(this.value).draw();
      }
      // Ensure we clear the search if they backspace far enough
      if(this.value == "") {
          contentsTable.search("").draw();
      }
      return;
  });

  $('#check-bulk').change(function() {
      if (this.checked) {
        // check all items
        $('input[name="selectedItems[]"]').prop('checked', true);
      } else {
        // uncheck all items
        $('input[name="selectedItems[]"]').prop('checked', false);
      }
  });

  $('#alertDeleteBulk').on('show.bs.modal', function(e) {
      $('input[name="selectedItemsModal[]"]').val($('input[name="selectedItems[]"]:checked').map(function(_, el) {
        return $(el).val();
      }).get());

      $('#delete-bulk-button').prop('disabled', false);
      $('#no-items-selected').hide();
      if (!$('input[name="selectedItemsModal[]"]').val()) {
        $('#delete-bulk-button').prop('disabled', true);
        $('#no-items-selected').show();
      }
  });

  $('#formChangeLine').validate({
      rules: {
          target_line: 'required'
      }
  });

  Fancybox.bind("[data-fancybox]", {
    // Your custom options
  });
</script>
{% endblock %}