@extends('layouts.main')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">Critical Asset Database</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Critical Asset Database</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
@endsection
@section('content')
  <script
    defer
    src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
  ></script>

  @include('flash::message')
  <div class="box box-default">
    <div class="box-header with-border">
      <h4 class="box-title">Filters: Chose the Type</h4>
    </div>
    <div class="box-body" style="">
      {!! Form::open(['route' => ['cad-asset-index'], 'method' => 'get']) !!}
      @include('CAD.asset.filters_in')
      {!! Form::close() !!}
    </div>
  </div>
  @if(\App\Models\GmpRoles::canSeeLink(\App\Models\GmpRoles::CAD))
    @php
      $exportFilter = [];

      if (($assetType = request('type')) !== null) {
          $exportFilter['type'] = $assetType;
      }
    @endphp
    <div class="row" style="display: block;" x-data="{}">
      <div class="col-md-7" id="cad-buttons">
        <a class="btn btn-primary pull-right" href="{!! route('cad-asset.create') !!}">Add Asset</a>
        @if(Request::input('type')<2)
          <div class="dropdown pull-right">
            <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
              Export Assets
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" style="box-shadow: 0 0 3px rgba(0, 0, 0, .5); right: 0; left: auto;">
              <li><a href="{!! route('cad-asset.export', array_merge(['format' => 'csv'], $exportFilter)) !!}">As *.csv
                  file</a></li>
              <li><a href="{!! route('cad-asset.export', array_merge(['format' => 'xlsx'], $exportFilter)) !!}">As
                  *.xlsx file</a></li>
              <li><a href="javascript: void(0);"
                     onclick="printJS({printable: 'print-area', type: 'html', header: 'Critical Asset Database'})">As
                  *.pdf file</a></li>
            </ul>
          </div>
          <button type="button" class="btn btn-success top_inform pull-right"
                  href="#custom-modal" data-animation="fadein" data-plugin="custommodal"
                  data-overlaySpeed="200" data-overlayColor="#f1f5f7">
            Import Assets
          </button>
          <div
            class="dropdown pull-right"
          >
            @csrf
            <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu12" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
              Bulk Actions
              &nbsp;
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" style="box-shadow: 0 0 3px rgba(0, 0, 0, .5); right: 0; left: auto;">
              <li>
                <button type="button" style="margin-right:15px;" class="top_inform btn-link btn cst-btn"
                        href="#baseline-bulk" data-animation="fadein" data-plugin="custommodal"
                        data-overlaySpeed="200" data-overlayColor="#f1f5f7"
                        @click="() => {
                          const qs = (sel) => document.querySelectorAll(sel)
                          const byId = (id) => document.getElementById(id)
                          byId('submitUpdateBtn').disabled = false
                          if (qs('.info_checked:checked').length > 0) {
                            let checked_array = [];
                            qs('.info_checked:checked').forEach((el) => {
                              checked_array.push(el.value);
                            });
                            byId('rowsUpdateBaseline').value = JSON.stringify(checked_array)
                          } else {
                            byId('submitUpdateBtn').disabled = true
                          }
                        }"
                >
                  Update Baselined
                </button>
              </li>
              <li>
                <button type="button" style="margin-right:15px;" class="top_inform btn-link btn cst-btn"
                        href="#impact-bulk" data-animation="fadein" data-plugin="custommodal"
                        data-overlaySpeed="200" data-overlayColor="#f1f5f7"
                        @click="() => {
                          const qs = (sel) => document.querySelectorAll(sel)
                          const byId = (id) => document.getElementById(id)
                          byId('submitUpdateBtn').disabled = false
                          if (qs('.info_checked:checked').length > 0) {
                            let checked_array = [];
                            qs('.info_checked:checked').forEach((el) => {
                              checked_array.push(el.value);
                            });
                            byId('rowsUpdate').value = JSON.stringify(checked_array)
                          } else {
                            byId('submitUpdateBtn').disabled = true
                          }
                        }"
                >
                  Update Impact
                </button>
              </li>
              <li>
                <button type="button" style="margin-right:15px;" class="top_inform btn-link btn cst-btn"
                        href="#delete-bulk" data-animation="fadein" data-plugin="custommodal"
                        data-overlaySpeed="200" data-overlayColor="#f1f5f7"
                        @click="() => {

                          const qs = (sel) => document.querySelectorAll(sel)
                          const byId = (id) => document.getElementById(id)

                          byId('submitDeleteBtn').disabled = false


                          if (qs('.info_checked:checked').length > 0) {
                            let checked_array = [];
                            qs('.info_checked:checked').forEach((el) => {
                              checked_array.push(el.value);
                            });
                            byId('rowsDelete').value = JSON.stringify(checked_array)
                          } else {
                            byId('submitDeleteBtn').disabled = true
                          }
                        }"
                >
                  Delete
                </button>
              </li>
            </ul>
          </div>
        @endif
      </div>
      {{-- bulk actions modals --}}
      <div id="baseline-bulk" class="modal-demo" style="width:800px;max-width:800px;    text-align: left;">
        <button type="button" class="close" onclick="Custombox.close();">
          <span>&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="custom-modal-title">Bulk Update Baselined</h4>
        <div class="custom-modal-text" style="overflow:hidden;">
          <p>Select baseline for selected CAD entries.</p>
          <form class="form-horizontal formt row" method="POST" action="/cad-asset-bulk-update">
            <div class="col-md-4">
              <span class="bl_bold">Baseline:</span>
              {!! Form::select('baseline', [0=>'no',1=>'yes'], null, ['class' => 'standards_id_input form-control m-t-15', 'required'=>'required','style'=>'width:100%']) !!}
            </div>
            <input type="hidden" name="rows" id="rowsUpdateBaseline">
            @method('PUT')
            @csrf
            <div class="col-md-12 m-t-15" style="padding-top:15px">
              <button type="submit" class="btn btn-success" id="submitUpdateBtn">Submit</button>
              <button type="button" class="btn btn-info" onclick="Custombox.modal.close();">Close</button>
            </div>
          </form>
        </div>
      </div>

      <div id="impact-bulk" class="modal-demo" style="width:800px;max-width:800px;    text-align: left;">
        <button type="button" class="close" onclick="Custombox.close();">
          <span>&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="custom-modal-title">Bulk Update Impact</h4>
        <div class="custom-modal-text" style="overflow:hidden;">
          <p>Select impact for selected CAD entries.</p>
          <form class="form-horizontal formt row" method="POST" action="/cad-asset-bulk-update">
            <div class="col-md-4">
              <span class="bl_bold">Impact:</span>
              {!! Form::select('impact', \App\Models\CAD\AssetSetting::getTypeID(1), null, ['class' => 'standards_id_input form-control m-t-15', 'placeholder' => 'Set Impact','required'=>'required','style'=>'width:100%']) !!}
            </div>
            <input type="hidden" name="rows" id="rowsUpdate">
            @method('PUT')
            @csrf
            <div class="col-md-12 m-t-15" style="padding-top:15px">
              <button type="submit" class="btn btn-success" id="submitUpdateBtn">Submit</button>
              <button type="button" class="btn btn-info" onclick="Custombox.modal.close();">Close</button>
            </div>
          </form>
        </div>
      </div>

      <div id="delete-bulk" class="modal-demo" style="width:800px;max-width:800px;    text-align: left;">
        <button type="button" class="close" onclick="Custombox.close();">
          <span>&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="custom-modal-title">Bulk Delete</h4>
        <div class="custom-modal-text" style="overflow:hidden;">
          <p>Are you sure you want to delete these assets?</p>
          <form class="form-horizontal formt row" method="POST" action="/cad-asset-bulk-delete">
            <input type="hidden" name="rows" id="rowsDelete">
            @method('DELETE')
            @csrf
            <div class="col-md-12 m-t-15" style="padding-top:15px">
              <button type="submit" class="btn btn-success" id="submitDeleteBtn">Yes, Submit</button>
              <button type="button" class="btn btn-info" onclick="Custombox.modal.close();">No, Close</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    {{-- EOF bulk actions modals --}}

  @endif

  @include('CAD.asset.table')

  <div id="print-area" style="display: none;">
    @include('CAD.asset.pdf')
  </div>
@endsection

@section('scripts')
  <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">
  <script type="text/javascript" src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
  <script type="text/javascript">
    $(document).on('change', '.formt select[name="flt"]', function (e) {
      var by = $(this).val();
      if (by == 0) {
        $('.formt').attr('action', '/parseImportEX');
        $('.formt input[type="file"]').attr('name', 'import_file');
        $('.formt input[type="file"]').attr('accept', '.xls,.xlsx');
      } else {
        $('.formt').attr('action', '/import_parse');
        $('.formt input[type="file"]').attr('name', 'csv_file');
        $('.formt input[type="file"]').attr('accept', '.csv');
      }
    });

    $(function () {
      var dataTable = new DataTable(document.querySelector('#data-table'), {
        perPageSelect: [5, 15, 25, 50, 100],
        perPage: 15,
      });
      var queryParams = getQueryStringParams();

      if (queryParams.hasOwnProperty('ip')) {
        var tableSearchField = $('#data-table').closest('.card-box').find('.dataTable-input').eq(0);

        if (typeof tableSearchField !== typeof undefined) {
          tableSearchField.val(queryParams.ip);
          dataTable.search(queryParams.ip);
        }
      }
    });
  </script>
  <style>
    .cst-btn:hover {
      text-decoration: none;
    }

    .cst-btn {
      padding: 6px 20px;
    }
  </style>
@endsection