@extends('layouts.template')
@section('content')
<section>
  <div class="container-fluid">
    <h1 class="heading color-quick-silver">Task <a class="bg-quick-silver" href="{{ url('mis/dashboard') }}" title="back"><i class="fa fa-undo" aria-hidden="true"></i></a></h1>
    @if(Session::has('flash_message'))
    <div class="row-fluid">
      <div class="span12">
        <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
      </div> 
    </div>
    @endif
    <div class="alert-div"></div>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#taskmenu">Task</a></li>
        <li><a data-toggle="tab" href="#expensemenu">Expenses</a></li>
        <li><a data-toggle="tab" href="#equipmentoolsmenu">Equipment & Tools</a></li>
        <li><a data-toggle="tab" href="#prodstocksmenu">Production & Stock</a></li>
    </ul>
    <div class="tab-content">
      <div id="taskmenu" class="tab-pane fade in active">
        <div class="cargo-search">
          <div class="table-heading bg-quick-silver padding-x10">
             <h4 class="col-md-2 col-sm-2 col-xs-8">Task</h4>
             <div class="col-md-10 col-sm-10 col-xs-4">
                <span class="pull-left text-yellow"><a class="btn-style-unset" href="javascript:void(0);"><u>Activity Log (Total:8 New)</u></a></span>
                <a href="javascript:void(0);" title="Create New Task" class="add-new-row">Add</a>
                <!-- <a href="javascript:void(0);" style="margin-right:5px;">Download Excel</a> -->
             </div>
          </div>
          <div class="task bg-white">
            <div class="table-responsive">
                <table id="tasksDataTable" class="table table-bordered dtTable" style="width:100%;">
                   <thead class="bg-platinum">
                      <tr>
                         <th>#</th>
                         <th>Tsk Id</th>
                         <th>Main Task</th>
                         <th>Assigner</th>
                         <th>Date</th>
                         <th>Deadline</th>
                         <th>Concluded</th>
                         <th>Currency</th>
                         <th>Budget</th>
                         <th>Adv. Costs</th>
                         <th>Act. Costs</th>
                         <th>Status</th>
                         <th>Action</th>
                      </tr>
                   </thead>
                </table>
            </div>
          </div>
        </div>
      </div>
      <div id="expensemenu" class="tab-pane fade">
        <div class="cargo-search">
          <div class="table-heading bg-quick-silver padding-x10">
             <h4 class="col-md-2 col-sm-2 col-xs-8">Expenses</h4>
             <div class="col-md-10 col-sm-10 col-xs-4">
             </div>
          </div>
          <div class="expenses-class bg-white">
            <br>
            {!! Form::open(['method' => 'POST', 'route' => 'mis.expense.store','id'=>'expensestoreform','class' => 'form-vertical', 'novalidate' => 'novalidate'])  !!}
              <div class="">
                  <div class="form-group col-md-3">
                      <div class="input-group">
                        <select id="taskId" name="task_id" class="form-control" required>
                          <option value="">Task</option>
                          @foreach($page_data['tasks_data'] as $dt)
                          <option value="{{$dt->id}}">{{$dt->main_task_id}}</option>
                          @endforeach
                        </select>
                      </div>
                  </div>
                  <div class="form-group col-md-3">
                      <div class="input-group">
                          {!! Form::select("sub_task_child_id",["" => "Sub Task"],null, ["class" => "form-control", 'id' => 'subTaskId']) !!}
                      </div>
                  </div>
                  <div class="form-group col-md-3">
                    <span class="expenseTotalSum"></span>
                  </div>
              </div>
              <br>
              <br>
              <table class="table tbl-border">
                  <thead>
                      <tr>
                          <th class="text-center">Supplier</th>
                          <th class="text-center">Invoice</th>
                          <th class="text-center">Date</th>
                          <th class="text-center">Item</th>
                          <th class="text-center">Unit</th>
                          <th class="text-center">Quantity</th>
                          <th class="text-center">Price</th>
                          <th class="text-center">Amount</th>
                          <th class="text-center">Resp</th>
                          <th class="text-center">Description</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td class="text-center">
                            <div class="input-group">{!! Form::select("supplier",["" => "Supplier"]+$page_data['supplier_list']->toArray(),null, ["class" => "form-control", 'id' => 'expenseSupplierId', 'required'=>'true']) !!}</div>
                          </td>
                          <td class="text-center">
                              <input id="expenseInv" type="text" name="invoice" class="form-control" placeholder="Invoice" autocomplete="off" required>
                          </td>
                          <td class="text-center">{!! Form::date('date',null, ['id'=>'expenseDateId','class' => 'form-control', 'required' => 'true']) !!}</td>
                          <td class="text-center">
                            <div class="input-group">
                              {!! Form::select("charge_id",["" => "Item"] + $page_data['charge_list']->toArray(),null, ["class" => "form-control", 'id' => 'expenseItemId', 'required'=>'true']) !!}
                            </div>
                          </td>
                          <td class="text-center">
                            <div class="input-group">
                              {!! Form::select("packaging_id",["" => "Unit"] + $page_data['packaging_list']->toArray(),null, ["class" => "form-control", 'id' => 'expenseUnitId', 'required'=>'true']) !!}
                            </div>
                          </td>
                          <td class="text-center">
                            <input id="expenseQuantity" type="number" name="quantity" class="form-control quantity-class" placeholder="Quantity" oninput="calculateAmount()" autocomplete="off" required>
                          </td>
                          <td class="text-center">
                            <input id="expensePrice" type="number" name="price" class="form-control price-class" oninput="calculateAmount()" placeholder="Price" autocomplete="off" required>
                          </td>
                          <td class="text-center">
                            <input id="expenseAmount" type="number" name="amount" class="form-control amount-class" placeholder="Amount" autocomplete="off" required>
                          </td>
                          <td class="text-center">
                            <input id="expenseResp" type="text" name="resp" class="form-control" placeholder="Resp" autocomplete="off">
                          </td>
                          <td class="text-center">
                            <input id="expenseDescription" type="text" name="description" class="form-control" placeholder="Description" autocomplete="off" required>
                          </td>
                          <td>
                            <input id="expenseAddId" type="submit" class="btn btn-sm btn-success" value="ADD">
                          </td>
                      </tr>
                  </tbody>
              </table>
            {!! Form::close() !!}
            <div class="table-responsive">
              <table id="expesnesTable" class="table table-bordered display dataTable" style="width:100%;">
                 <thead class="bg-platinum">
                    <tr>
                       <th class="text-center">Created At</th>
                       <th class="text-center">Nr</th>
                       <th class="text-center">Tsk Id</th>
                       <th class="text-center">Task</th>
                       <th class="text-center dt-center text-nowrap">Sub Task Id</th>
                       <th class="text-center">Sub Task</th>
                       <th class="text-center">{!! Form::select("supplier_filter_id",["" => "Supplier"]+$page_data['supplier_list']->toArray(),null, ["class" => "form-control wh-select2-class", 'id' => 'expenseSupplierFilterId']) !!}</th>
                       <th class="text-center">{!! Form::select("charge_filter_id",["" => "Item"] + $page_data['charge_list']->toArray(),null, ["class" => "form-control wh-select2-class", 'id' => 'expenseItemFilterId']) !!}</th>
                       <th class="text-center"> {!! Form::select("invoice_filter_id",["" => "Invoice"] + $page_data['expense_invoices']->toArray(),null, ["class" => "form-control wh-select2-class", 'id' => 'expenseInvoiceFilterId']) !!}</th>
                       <th class="text-center"><button class="btn btn-sm btn-default" data-toggle="modal" data-target="#searchExpenseModal" aria-hidden="true">Date</button></th>
                       <th class="text-center">Unit</th>
                       <th class="text-center">Quantity</th>
                       <th class="text-center">Price</th>
                       <th class="text-center">Amount</th>
                       <th class="text-center">Resp</th>
                       <th class="text-center">Description</th>
                       <th class="text-center">Action</th>
                    </tr>
                 </thead>
               </table>
            </div>
          </div>
        </div>
      </div>
      <div id="equipmentoolsmenu" class="tab-pane fade">
        <div class="cargo-search col-md-6 padding-x-0px">
          <div class="table-heading bg-quick-silver padding-x10">
             <h4 class="col-md-2 col-sm-2 col-xs-8">Equipment</h4>
             <div class="col-md-10 col-sm-10 col-xs-4">
             </div>
          </div>
          <div class="equipment-class bg-white">
            <br>
            {!! Form::open(['method' => 'POST', 'route' => 'mis.equipment.store','id'=>'equipmentstoreform','class' => 'form-vertical overflow-x-scroll', 'files' => true, 'novalidate' => 'novalidate'])  !!}
              <table class="table tbl-border">
                  <thead>
                      <tr>
                          <th class="text-center">Company</th>
                          <th class="text-center white-space-nowrap">Asset Nr</th>
                          <th class="text-center">Description</th>
                          <th class="text-center">Make</th>
                          <th class="text-center">Model</th>
                          <th class="text-center">Fuel</th>
                          <th class="text-center">Image</th>
                          <th class="text-center"></th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td class="text-center">
                            <div class="input-group">{!! Form::select("company",["" => "Company"] + $page_data['transporter']->toArray(),null, ["class" => "form-control width-100px wh-select2-class", 'name' => 'transporter_id', 'id' => 'companyId', 'required'=>'true']) !!}</div>
                          </td>
                          <td class="text-center">{!! Form::text('asset_nr', null, ['class' => 'form-control', 'id' => 'assetNrId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Asset Nr']) !!}</td>
                          <td class="text-center">{!! Form::text('description', null, ['class' => 'form-control', 'id' => 'descriptionId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Description']) !!}</td>
                          <td class="text-center">{!! Form::text('make', null, ['class' => 'form-control', 'id' => 'makeId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Make']) !!}</td>
                          <td class="text-center">{!! Form::text('model', null, ['class' => 'form-control', 'id' => 'modelId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Model']) !!}</td>
                          <td class="text-center">
                            <div class="input-group">{!! Form::select("fuel",["" => "Fuel"] + config('constants.FUELTYPE'),null, ["class" => "form-control width-100px wh-select2-class", 'id' => 'fuelId', 'name' => 'fuel']) !!}</div>
                          </td>
                          <td>
                            <label for="fileToUpload">
                              <a href="javascript:void(0);" class="fileuploadbtn"><i class="fa fa-paperclip" aria-hidden="true" style="font-size: 18px;"></i></a>
                            </label>
                            {!! Form::file('image', null, ['class' => 'form-control', 'id' => 'imageEquId', 'autocomplete'=>'off', 'id' => 'fileToUpload', 'placeholder' => 'Image']) !!}</td>
                          <td>
                            <input id="equipmentAddId" type="submit" class="btn btn-sm btn-success" value="ADD">
                          </td>
                      </tr>
                  </tbody>
              </table>
            {!! Form::close() !!}
            <div class="table-responsive">
              <table id="equipmentsTable" class="table table-bordered display dataTable" style="width:100%;">
                 <thead class="bg-platinum">
                    <tr>
                       <th class="text-center">Company</th>
                          <th class="text-center">Asset Nr</th>
                          <th class="text-center">Description</th>
                          <th class="text-center">Make</th>
                          <th class="text-center">Model</th>
                          <th class="text-center">Fuel</th>
                          <th class="text-center">Image</th>
                       <th class="text-center">Action</th>
                    </tr>
                 </thead>
               </table>
            </div>
          </div>
        </div>
        <div class="cargo-search col-md-6 padding-x-0px border-left">
          <div class="table-heading bg-quick-silver padding-x10">
             <h4 class="col-md-2 col-sm-2 col-xs-8">Tools</h4>
             <div class="col-md-10 col-sm-10 col-xs-4">
             </div>
          </div>
          <div class="tools-class bg-white">
            <br>
            {!! Form::open(['method' => 'POST', 'route' => 'mis.tools.store','id'=>'toolsstoreform','class' => 'form-vertical overflow-x-scroll', 'files' => 'true', 'novalidate' => 'novalidate'])  !!}
              <table class="table tbl-border">
                  <thead>
                      <tr>
                          <th class="text-center">Tool</th>
                          <th class="text-center">Make</th>
                          <th class="text-center">Size</th>
                          <th class="text-center">BIN</th>
                          <th class="text-center">Quantity</th>
                          <th class="text-center" >Image</th>
                          <th class="text-center" ></th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td class="text-center">{!! Form::text('tool', null, ['class' => 'form-control', 'id' => 'toolId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Tool']) !!}</td>
                          <td class="text-center">{!! Form::text('make', null, ['class' => 'form-control', 'id' => 'makeId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Make']) !!}</td>
                          <td class="text-center">{!! Form::text('size', null, ['class' => 'form-control', 'id' => 'sizeId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Size']) !!}</td>
                          <td class="text-center">
                            <div class="input-group">{!! Form::select("bin_id",["" => "Bin"] + $page_data['bin_list']->toArray(),null, ["class" => "form-control width-100px wh-select2-class", 'id' => 'binId', 'required'=>'true']) !!}</div>
                          </td>
                          <td class="text-center">{!! Form::number('stock', null, ['class' => 'form-control', 'id' => 'stockId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Quantity']) !!}</td>
                          <td>
                            <label for="fileToUpload">
                              <a href="javascript:void(0);" class="fileuploadbtn"><i class="fa fa-paperclip" aria-hidden="true" style="font-size: 18px;"></i></a>
                            </label>
                            {!! Form::file('image', null, ['class' => 'form-control', 'id' => 'imageId', 'autocomplete'=>'off', 'placeholder' => 'Image']) !!}
                          </td>
                          <td>
                            <input id="toolsAddId" type="submit" class="btn btn-sm btn-success" value="ADD">
                          </td>
                      </tr>
                  </tbody>
              </table>
            {!! Form::close() !!}
            <div class="table-responsive">
              <table id="toolsTable" class="table table-bordered display dataTable" style="width:100%;">
                 <thead class="bg-platinum">
                    <tr>
                        <th class="text-center">Tool</th>
                        <th class="text-center">Make</th>
                        <th class="text-center">Size</th>
                        <th class="text-center">BIN</th>
                        <th class="text-center">Quantity</th>
                        <th class="text-center">Loss</th>
                        <th class="text-center">Balance</th>
                        <th class="text-center">Image</th>
                        <th class="text-center">Action</th>
                    </tr>
                 </thead>
               </table>
            </div>
          </div>
        </div>
      </div>
      <div id="prodstocksmenu" class="tab-pane fade">
        <div class="cargo-search col-md-6 padding-x-0px">
          <div class="table-heading bg-quick-silver padding-x10">
             <h4 class="col-md-2 col-sm-2 col-xs-8">Production</h4>
             <div class="col-md-10 col-sm-10 col-xs-4">
             </div>
          </div>
          <div class="production-class bg-white">
            <br>
            {!! Form::open(['method' => 'POST', 'route' => 'mis.production.store','id'=>'productionstoreform','class' => 'form-vertical', 'files' => true, 'novalidate' => 'novalidate'])  !!}
              <div style="display:flex;">
                  <div class="form-group col-md-3">
                      <div class="input-group">
                          <select id="prodTaskId" name="task_id" class="form-control prod_task_id" required>
                            <option value="">Task</option>
                            @foreach($page_data['tasks_data'] as $dt)
                            <option value="{{$dt->id}}">{{$dt->main_task_id}}</option>
                            @endforeach
                          </select>
                      </div>
                  </div>
                  <div class="col-md-1"></div>
                  <div class="form-group col-md-3">
                      <div class="input-group">
                          {!! Form::select("sub_task_child_id",["" => "Sub Task"],null, ["class" => "form-control prod_sub_task_child_id", 'id' => 'prodSubTaskId']) !!}
                      </div>
                  </div>
                  <div class="col-md-1"></div>
                  <div class="form-group col-md-3">
                    <label>Ratio Set</label>
                  </div>
              </div>
              <br>
              <div style="display:flex;">
                <table class="table tbl-border">
                    <thead>
                        <tr>
                            <th class="text-center">Date</th>
                            <th class="text-center" colspan="2">Production</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center">
                              {!! Form::date('period',null, ['id'=>'periodDateId','class' => 'form-control', 'required' => 'true']) !!}
                            </td>
                            <td class="text-center">{!! Form::number('production', null, ['class' => 'form-control', 'id' => 'productionId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Production']) !!}</td>
                            <td class="text-center">
                              <input id="productionAddId" type="submit" class="btn btn-sm btn-success" value="ADD">
                            </td>
                        </tr>
                    </tbody>
                </table>
                &nbsp;
                <table id="prodSummaryTable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Act. Cost</th>
                            <th>Production</th>
                            <th>Cst/Prod</th>
                            <th>Av. Ratio</th>
                        </tr>
                    </thead>
                </table>
              </div>
            {!! Form::close() !!}
            <div class="table-responsive">
              <table id="prodTable" class="table table-bordered display dataTable" style="width:100%;">
                 <thead class="bg-platinum">
                    <tr>
                        <th class="text-center"><button class="btn btn-sm btn-default" data-toggle="modal" data-target="#searchProdModal" aria-hidden="true">Period</button></th>
                        <th class="text-center">Production</th>
                        <th class="text-center">Stock Used</th>
                        <th class="text-center">Ratio</th>
                    </tr>
                 </thead>
               </table>
            </div>
          </div>
        </div>
        <div class="cargo-search col-md-6 padding-x-0px border-left">
          <div class="table-heading bg-quick-silver padding-x10">
             <h4 class="col-md-2 col-sm-2 col-xs-8">Stocks</h4>
             <div class="col-md-10 col-sm-10 col-xs-4">
             </div>
          </div>
          <div class="stocks-class bg-white">
            <br>
            {!! Form::open(['method' => 'POST', 'route' => 'mis.stocks.store','id'=>'stockstoreform','class' => 'form-vertical', 'files' => 'true', 'novalidate' => 'novalidate', 'style' => 'padding-top: 9px;'])  !!}
              <table class="table tbl-border">
                  <thead>
                      <tr>
                          <th class="text-center">Date</th>
                          <th class="text-center">Item</th>
                          <th class="text-center">Stock Used</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td class="text-center">{!! Form::date('period', null, ['class' => 'form-control', 'id' => 'stockPeriodId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Period']) !!}</td>
                          <td class="text-center">
                            <div class="input-group">
                              {!! Form::select("item_id",["" => "Item"] + $page_data['item_stock_list']->toArray(),null, ["class" => "form-control width-100px", 'id' => 'stockItemId', 'required'=>'true']) !!}
                            </div>
                          </td>
                          <td class="text-center">{!! Form::number('stock_used', null, ['class' => 'form-control', 'id' => 'stockStockUsedId', 'autocomplete'=>'off', 'required'=>'true', 'placeholder' => 'Stock Used']) !!}</td>
                          <td class="text-center">
                            <input id="stockAddId" type="submit" class="btn btn-sm btn-success" value="ADD">
                          </td>
                      </tr>
                  </tbody>
              </table>
            {!! Form::close() !!}
            <div class="table-responsive">
              <table id="stockTable" class="table table-bordered display dataTable dtTable" style="width:100%;">
                 <thead class="bg-platinum">
                    <tr>
                        <th>#</th>
                        <th>Item</th>
                        <th><button class="btn btn-sm btn-default" data-toggle="modal" data-target="#searchStockModal" aria-hidden="true">Period</button></th>
                        <th>Stock IN</th>
                        <th>Stock Used</th>
                        <th>Balance</th>
                    </tr>
                 </thead>
                 
               </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="searchProdModal" tabindex="-1" role="dialog" aria-labelledby="searchProdModal" aria-hidden="true">
      <div class="modal-dialog" style="width:25% !important;">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
              <div class="row">
                  <div class="form-group col-md-6">
                      <label>From Date</label>
                      <input type="date" class="form-control" id="searchprod_fromdate" placeholder="From date">
                  </div>
                  <div class="form-group col-md-6">
                      <label>To Date</label>
                      <input type="date" class="form-control" id="searchprod_todate" placeholder="To date">
                  </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <input class="btn btn-sm btn-primary" type="button" id="btn_prodsearch" value="Search">
            </div>
          </div>
      </div>
  </div>
  <div class="modal fade" id="searchStockModal" tabindex="-1" role="dialog" aria-labelledby="searchStockModal" aria-hidden="true">
      <div class="modal-dialog" style="width:25% !important;">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
              <div class="row">
                  <div class="form-group col-md-6">
                      <label>From Date</label>
                      <input type="date" class="form-control" id="searchstock_fromdate" placeholder="From date">
                  </div>
                  <div class="form-group col-md-6">
                      <label>To Date</label>
                      <input type="date" class="form-control" id="searchstock_todate" placeholder="To date">
                  </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <input class="btn btn-sm btn-primary" type="button" id="btn_stocksearch" value="Search">
            </div>
          </div>
      </div>
  </div>
  <div class="modal fade" id="searchExpenseModal" tabindex="-1" role="dialog" aria-labelledby="searchExpenseModal" aria-hidden="true">
      <div class="modal-dialog" style="width:25% !important;">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
              <div class="row">
                  <div class="form-group col-md-6">
                      <label>From Date</label>
                      <input type="date" class="form-control" id="searchexpense_fromdate" placeholder="From date">
                  </div>
                  <div class="form-group col-md-6">
                      <label>To Date</label>
                      <input type="date" class="form-control" id="searchexpense_todate" placeholder="To date">
                  </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <input class="btn btn-sm btn-primary" type="button" id="btn_expensesearch" value="Search">
            </div>
          </div>
      </div>
  </div>
</section>
<script type="text/javascript">
  var toolsDataTable = '';
  var eqipmentsDataTable = '';
  var expesnesDataTable = '';
  var dataTable = '';
  var prodDataTable = '';
  var prodSummaryTable = '';
  var tasksDataTable = '';

  $(document).ready(function() {

    tasksDataTable = $('#tasksDataTable').DataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        'searching': false, // Set false to remove default Search Control
        "dom": 'rtip',
        "order": [[0, 'desc']],
        'ajax': {
            'url':'{{ route("mis.task.getajaxtasktable") }}',
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'data': function(data){
                /*// Read values
                var from_date = $('#searchstock_fromdate').val();
                var to_date = $('#searchstock_todate').val();
                var stock_item_id = $('#stockItemId').val();

                // Append to data
                data.searchByFromdate = from_date;
                data.searchByTodate = to_date;
                data.searchByStockitem = stock_item_id;*/
            }
        },
        'columnDefs': [
            { className: "dt-center text-nowrap", targets: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ] }
         ],
        'columns': [
            { data: 'id', bSortable: false, bSearchable: false },
            { data: 'tsk_id' },
            { data: 'main_task' },
            { data: 'assigner' },
            { data: 'date' },
            { data: 'deadline' },
            { data: 'concluded' },
            { data: 'currency' },
            { data: 'budget' },
            { data: 'adv_cost' },
            { data: 'act_cost' },
            { data: 'status' },
            { data: 'action', bSortable: false, bSearchable: false },
        ]
    });

    $( tasksDataTable.table().body() ).addClass( 'task-body' );

    expesnesDataTable = $('#expesnesTable').DataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        'searching': false, // Set false to remove default Search Control
        "info": false,
        "dom": 'rtip',
        "order": [[0, 'desc']],
        'ajax': {
            'url':'{{ route("mis.expesnes.getajaxexpesnestable") }}',
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'data': function(data){
                // Read values
                var task_id = $('#taskId').val();
                var sub_task_id = $('#subTaskId').val();
                var expense_invoice = $('#expenseInvoiceFilterId').val();
                var expense_supplier = $('#expenseSupplierFilterId').val();
                var expense_item_id = $('#expenseItemFilterId').val();
                var expense_fromdate = $('#searchexpense_fromdate').val();
                var expense_todate = $('#searchexpense_todate').val();

                // Append to data
                data.searchByTaskId = task_id;
                data.searchBySubTaskId = sub_task_id;
                data.searchByExpenseInvoice = expense_invoice;
                data.searchByExpenseSupplier = expense_supplier;
                data.searchByExpenseItemId = expense_item_id;
                data.searchByExpenseFromDate = expense_fromdate;
                data.searchByExpenseToDate = expense_todate;
            }
        },
        'columnDefs': [
            { className: "dt-center text-nowrap", targets: [ 0, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 ] },
            { visible: false, 'targets': [0] },
         ],
        'columns': [
            { data: 'created_at', bSortable: false,  bSearchable: false },
            { data: 'DT_RowIndex', bSortable: false},
            { data: 'tsk_id', bSortable: false },
            { data: 'task', bSortable: false },
            { data: 'sub_task_id', bSortable: false },
            { data: 'sub_task', bSortable: false },
            { data: 'supplier', bSortable: false },
            { data: 'item', bSortable: false },
            { data: 'invoice', bSortable: false },
            { data: 'date', bSortable: false },
            { data: 'unit', bSortable: false },
            { data: 'quantity', bSortable: false },
            { data: 'price', bSortable: false },
            { data: 'amount', bSortable: false },
            { data: 'resp', bSortable: false },
            { data: 'description', bSortable: false },
            { data: 'action', bSortable: false,  bSearchable: false },
        ]
    });

    $('#expensestoreform').validate({
      ignore:'',
      errorPlacement: function(error, element) {
          if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      },
      submitHandler: function(form,event) {
        event.preventDefault();
        var form = $("#expensestoreform").closest("form");
        formStoreAjax(form, 'expenses');
      }
    });

    eqipmentsDataTable = $('#equipmentsTable').DataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        'searching': false, // Set false to remove default Search Control
        "info": false,
        "dom": 'rtip',
        'ajax': {
            'url':'{{ route("mis.eqipments.getajaxeqipmentstable") }}',
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'data': function(data){
                // Read values
                // var equip_subtask_id = $('#equipSubTaskId').val();

                // Append to data
                // data.searchByProdsubtask = prod_subtask_id;
            }
        },
        'columnDefs': [
            { className: "dt-center", targets: [ 0, 1, 2, 3, 5, 6, 7 ] },
         ],
        'columns': [
            { data: 'transporter_id', bSortable: false },
            { data: 'asset_nr' },
            { data: 'description' },
            { data: 'make' },
            { data: 'model' },
            { data: 'fuel', bSortable: false },
            {
                "mData": "image",
                "mRender": function (data, type, row) {
                    var htmlData = `<div class="product-image">
                            <a class="example-image-link" href="{{ url('images') }}/`+data+`" data-lightbox="example-1">`;
                              if (data != '') {
                                htmlData += `<img class="example-image" src="{{ url('images') }}/`+data+`" width="20" height="20">`;
                              }
                        htmlData +=  `</a></div>`; 
                    return htmlData;
                },
                bSortable: false, 
                bSearchable: false
            },
            {
                "mData": "id",
                "mRender": function (data, type, row) {
                    var htmlData = `<div style="display:flex;"><button class="btn btn-xs btn-primary edit-equipment-btn" data-id="`+data+`"><i class="fa fa-pencil"></i></button>&nbsp;<button class="btn btn-xs btn-danger cancel-equipment-btn" data-id="`+data+`">Inactive</button></div>`;
                    return htmlData;
                },
                bSortable: false, 
                bSearchable: false
            },
        ]
    });

    $('#equipmentstoreform').validate({
      ignore:'',
      errorPlacement: function(error, element) {
          if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      },
      submitHandler: function(form,event) {
        event.preventDefault();
        var form = $("#equipmentstoreform").closest("form");
        formStoreAjax(form, 'equipments');
      }
    });

    toolsDataTable = $('#toolsTable').DataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        'searching': false, // Set false to remove default Search Control
        "info": false,
        "dom": 'rtip',
        'ajax': {
            'url':'{{ route("mis.tool.getajaxtoolstable") }}',
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'data': function(data){
                // Read values
                // var equip_subtask_id = $('#equipSubTaskId').val();

                // Append to data
                // data.searchByProdsubtask = prod_subtask_id;
            }
        },
        'columnDefs': [
            { className: "dt-center", targets: [ 0, 1, 2, 3, 5, 6, 7, 8 ] },
         ],
        'columns': [
            { data: 'tool' },
            { data: 'make' },
            { data: 'size' },
            { data: 'bin', bSortable: false },
            { data: 'stock' },
            { data: 'loss' },
            { data: 'balance' },
            {
                "mData": "image",
                "mRender": function (data, type, row) {
                    var htmlData = `<div class="product-image">
                            <a class="example-image-link" href="{{ url('images') }}/`+data+`" data-lightbox="example-1">`;
                              if (data != '') {
                                htmlData += `<img class="example-image" src="{{ url('images') }}/`+data+`" width="20" height="20">`;
                              }
                        htmlData +=  `</a></div>`; 
                    return htmlData;
                },
                bSortable: false, 
                bSearchable: false
            },
            {
                "mData": "id",
                "mRender": function (data, type, row) {
                    var htmlData = `<div style="display:flex;"><button class="btn btn-xs btn-primary edit-tool-btn" data-id="`+data+`"><i class="fa fa-pencil"></i></button>&nbsp;<button class="btn btn-xs btn-danger cancel-tool-btn" data-id="`+data+`">Inactive</button></div>`;
                    return htmlData;
                },
                bSortable: false, 
                bSearchable: false
            },
        ]
    });

    $('#toolsstoreform').validate({
      ignore:'',
      errorPlacement: function(error, element) {
          if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      },
      submitHandler: function(form,event) {
        event.preventDefault()
        var form = $("#toolsstoreform").closest("form");
        formStoreAjax(form, 'tools');
      }
    });

    prodDataTable = $('#prodTable').DataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        'searching': false, // Set false to remove default Search Control
        "dom": 'rtip',
        "order": [[0, 'desc']],
        'ajax': {
            'url':'{{ route("mis.prod.getajaxprodtable") }}',
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'data': function(data){
                // Read values
                var from_date = $('#searchprod_fromdate').val();
                var to_date = $('#searchprod_todate').val();
                var prod_task_id = $('#prodTaskId').val();
                var prod_subtask_id = $('#prodSubTaskId').val();

                // Append to data
                data.searchByFromdate = from_date;
                data.searchByTodate = to_date;
                data.searchByProdtask = prod_task_id;
                data.searchByProdsubtask = prod_subtask_id;
            }
        },
        'columnDefs': [
            { className: "dt-center", targets: [ 0, 1, 2, 3 ] }
         ],
        'columns': [
            { data: 'period', bSortable: false },
            { data: 'production' },
            { data: 'stock_used' },
            { data: 'ratio' },
        ]
    });

    $(document).on('change', '#prodTaskId', function () {
        var task_id = $(this).val();
        prodDataTable.draw();
        prodSummaryTable.draw();
        response = getSubTask(task_id);
        
        count = Object.keys(response.data).length;
        html = "<option value=''>Sub Task</option>";
        if (count) {
            $.each(response.data, function (key, val) {
                html += '<option value="'+key+'">'+val+'</option>';
            });
        }
        $("#prodSubTaskId").empty().selectBoxIt("refresh");
        $('#prodSubTaskId').append(html);
        $("#prodSubTaskId").selectBoxIt("refresh");
    });

    $(document).on('change', '#prodSubTaskId', function () {
        prodDataTable.draw();
        prodSummaryTable.draw();
    });

    $('#productionstoreform').validate({
      ignore:'',
      errorPlacement: function(error, element) {
          if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      },
      submitHandler: function(form,event) {
        event.preventDefault();
        $.ajax({
            url: '{{ route("mis.production.store") }}',
            type: 'POST',
            data: $('#productionstoreform').serialize(),
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            success: function (response) {
                if (response.status == 'success') {
                  $('#periodDateId').val('');
                  $('#productionId').val('');
                  prodDataTable.draw();
                  prodSummaryTable.draw();
                }
                else {
                  alert(response.message)
                }
            }
        });
      }
    });

    $(document).on('click', '#btn_prodsearch', function () {
        prodDataTable.draw();
        prodSummaryTable.draw();
    });

    prodSummaryTable = $('#prodSummaryTable').DataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        'searching': false, // Set false to remove default Search Control
        "dom": 'rtip',
        "info": false,
        'paging': false,
        'ordering': false,
        'ajax': {
            'url':'{{ route("mis.prod.getajaxprodsummarytable") }}',
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        },
        'columnDefs': [
            { className: "dt-center text-nowrap", targets: [ 0, 1, 2, 3 ] }
         ],
        'columns': [
            { data: 'act_cost', bSortable: false, bSearchable: false },
            { data: 'production', bSortable: false, bSearchable: false },
            { data: 'cst_prod', bSortable: false, bSearchable: false },
            { data: 'av_ratio', bSortable: false, bSearchable: false }
        ]
    });

    dataTable = $('#stockTable').DataTable({
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        'searching': false, // Set false to remove default Search Control
        "dom": 'rtip',
        "order": [[0, 'desc']],
        'ajax': {
            'url':'{{ route("mis.stock.getajaxstocktable") }}',
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'data': function(data){
                // Read values
                var from_date = $('#searchstock_fromdate').val();
                var to_date = $('#searchstock_todate').val();
                var stock_item_id = $('#stockItemId').val();

                // Append to data
                data.searchByFromdate = from_date;
                data.searchByTodate = to_date;
                data.searchByStockitem = stock_item_id;
            }
        },
        'columnDefs': [
            { className: "dt-center text-nowrap", targets: [ 0, 1, 2, 3, 4, 5 ] }
         ],
        'columns': [
            { data: 'item_id', bSortable: false, bSearchable: false },
            { data: 'item', bSortable: false },
            { data: 'period', bSortable: false },
            { data: 'stock_in' },
            { data: 'stock_used' },
            { data: 'balance' },
        ]
    });

    $('#stockstoreform').validate({
      ignore:'',
      errorPlacement: function(error, element) {
          if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      },
      submitHandler: function(form,event) {
        event.preventDefault();
        $.ajax({
              url: '{{ route("mis.stocks.store") }}',
              type: 'POST',
              data: $('#stockstoreform').serialize(),
              headers: {
                  'X-CSRF-TOKEN': '{{csrf_token()}}'
              },
              success: function (response) {
                  if (response.status == 'success') {
                    $('#stockstoreform').trigger('reset');
                    $("#stockItemId").data("selectBoxIt").refresh();
                    dataTable.draw();
                    prodDataTable.draw();
                    prodSummaryTable.draw();
                  }
                  else {
                    alert(response.message)
                  }
              }
          });
      }
    });

    $(document).on('change', '#stockItemId', function () {
        dataTable.draw();
    });

    $(document).on('click', '#btn_stocksearch', function () {
        dataTable.draw();
    });
  });
  $(document).on('click', '.add-new-row', function() {
      $.ajax({
          url: "{{route('mis.task.getAddParentTaskForm')}}",
          async: false,
          type: 'POST',
          dataType: 'html',
          data: {
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            $('.task-body').prepend(response);
            validateForm();
          }
      });
  });

  $(document).on('click', '.remove-add-tr', function() {
    $(this).closest('.nwrow').remove();
  });

  $(document).on('click', '.add-subtasks-row-btn', function() {
    var element = $(this).closest('tr');
    var id = $(this).data('id');

    if ($(this).closest('tr').children('td:first').children('span').hasClass('row-details-close')) {
      $(this).closest('tr').children('td:first').children().click();

      $.ajax({
          url: "{{route('mis.task.getAddSubTaskForm')}}",
          type: 'POST',
          dataType: 'html',
          data: {
              '_token': '{{csrf_token()}}',
              'id': id
          },
          success: function(response) {
            element.next().children().children().children('tbody').prepend(response);
            validateSubTaskForm();
          }
      });
    } 
    else if($(this).closest('tr').children('td:first').children('span').hasClass('row-details-open')){
      $.ajax({
          url: "{{route('mis.task.getAddSubTaskForm')}}",
          type: 'POST',
          dataType: 'html',
          data: {
              '_token': '{{csrf_token()}}',
              'id': id
          },
          success: function(response) {
            element.next().children().children().children('tbody').prepend(response);
            validateSubTaskForm();
          }
      });
    }
  });

  $(document).on('click', '.remove-child-btn', function() {
    $(this).closest('tr').remove();
  });

  function validateForm()
  {
    $("#mytaskform").validate({
        messages: {
            main_task : {
              required : 'Required'
            },
            assigner : {
              required : 'Required'
            },
            date : {
              required : 'Required'
            },
            deadline : {
              required : 'Required'
            },
            currency : {
              required : 'Required'
            },
            budget : {
              required : 'Required'
            },
            adv_cost : {
              required : 'Required'
            },
            act_cost : {
              required : 'Required'
            },
            status : {
              required : 'Required'
            },
        },
        submitHandler: function(form,event) {
          event.preventDefault();
          var form = $("#mytaskform").closest("form");
          formStoreAjax(form, 'tasks');
        }
    });
  }

  function validateSubTaskForm()
  {
    $("#mysubtaskform").validate();
  }

  jQuery.extend(jQuery.validator.messages, {
      required: "Required",
  });

  $(document).on('click', ' tbody td .row-details', function () {
      if ( $(this).hasClass('row-details-open') )
      {
          /* This row is already open - close it */
          $(this).addClass("row-details-close").removeClass("row-details-open");
          $(this).closest("tr").next().remove();
      }
      else
      {
          $(this).addClass("row-details-open").removeClass("row-details-close");
          let id = $(this).data('id');
          let module_name = $(this).data('module');
          let element = $(this);
          if (module_name == 'tasks') {
            getSubTasksTable(id, element);
          }
          if (module_name == 'stocks') {
            getStockDetailsTable(id, element);
          }
      }
  });

  function getSubTasksTable(id, element) {
      $.ajax({
          url: "{{ route('mis.task.getSubTasksTable') }}",
          type: 'POST',
          async: false,
          dataType: 'html',
          data: {
              'id': id,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            element.closest("tr").after(response);
          }
      });
  }

  function getStockDetailsTable(id, element) {
      $.ajax({
          url: "{{ route('mis.stock.getStockDetailsTable') }}",
          type: 'POST',
          async: false,
          dataType: 'html',
          data: {
              'id': id,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            element.closest("tr").after(response);
          }
      });
  }

  function calculateAmount() {
    var quantity = $('.quantity-class').val();
    var price = $('.price-class').val();
    
    var amount = '';
    if (quantity != '' && price != '') {
      amount = quantity * price;
    }
    $('.amount-class').val(amount);
  }

  
  $(document).on('input', '.quantity-edit-class', function () { 
    quantity = $(this).val();
    price = $(this).closest('td').next().children('input').val();
    var amount = '';
    if (quantity != '' && price != '') {
      amount = quantity * price;
    }
    $(this).closest('td').next().next().children('input').val(amount);
  });

  $(document).on('input', '.price-edit-class', function () { 
    quantity = $(this).closest('td').prev().children('input').val();
    price = $(this).val();
    var amount = '';
    if (quantity != '' && price != '') {
      amount = quantity * price;
    }
    $(this).closest('td').next().children('input').val(amount);
  });

  $(document).on('change', '#taskId', function () {
      var task_id = $(this).val();
      expesnesDataTable.draw();
      response = getSubTask(task_id);
      
      count = Object.keys(response.data).length;
      html = "<option value=''>Sub Task</option>";
      if (count) {
          $.each(response.data, function (key, val) {
              html += '<option value="'+key+'">'+val+'</option>';
          });
      }
      $("#subTaskId").empty().selectBoxIt("refresh");
      $('#subTaskId').append(html);
      $("#subTaskId").selectBoxIt("refresh");
      getSubTasksTotal(task_id);
  });

  function getSubTask(task_id) {
    jsonData = '';
    $.ajax({
        url: "{{ route('mis.task.getSubTasksList') }}",
        type: 'POST',
        dataType: 'json',
        async: false,
        data: {
            'task_id': task_id,
            '_token': '{{csrf_token()}}'
        },
        success: function(response) {
          jsonData = response;
        }
    });
    return jsonData;
  }

  $(document).on('change', '#subTaskId', function () {
      var task_id = $('#taskId').val();
      var sub_task_id = $(this).val();
      expesnesDataTable.draw();
      getSubTasksTotal(task_id, sub_task_id);
  });

  function getSubTasksTotal(task_id, sub_task_id = '')
  {
      $.ajax({
          url: "{{ route('mis.expense.getSubTasksTotal') }}",
          type: 'POST',
          dataType: 'json',
          data: {
              'task_id': task_id,
              'sub_task_id': sub_task_id,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            subtotalsum = '';
            if (response.status == 'success') {
              subtotalsum = 'Total Amount = '+response.total_sum;
            }
            $('.expenseTotalSum').text(subtotalsum);
          }
      });
  }

  $(document).on('click', '.delete-mis-expense', function () {
      var id = $(this).data('id');
      var element = $(this).closest('tr');
      if (confirm("Are you sure you want to delete?")) {
        $.ajax({
            url: "{{ route('mis.expense.delete') }}",
            type: 'POST',
            dataType: 'json',
            data: {
                'id': id,
                '_token': '{{csrf_token()}}'
            },
            success: function(response) {
              if (response.status == 'success') {
                // element.hide('slow', function(){ element.remove(); });
                expesnesDataTable.draw();
                expesnesDataTable.row(element).remove().draw(false);
                dataTable.draw();
              }
            }
        });
      }
  });

  $(document).on('click', '.edit-expense-btn', function () {
      var id = $(this).data('id');
      var element = $(this).closest('tr');
      $.ajax({
          url: "{{ route('mis.expense.edit') }}",
          type: 'POST',
          dataType: 'html',
          data: {
              'id': id,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            element.empty();
            element.html(response);
            tempelement = element.children('td').children('form');
            validateEditForm(tempelement, 'expenses');
          }
      });
  });

  $(document).on('click', '.edit-equipment-btn', function () {
      var id = $(this).data('id');
      var element = $(this).closest('tr');
      $.ajax({
          url: "{{ route('mis.equipment.edit') }}",
          type: 'POST',
          dataType: 'html',
          data: {
              'id': id,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            element.empty();
            element.html(response);
            tempelement = element.children('td').children('form');
            validateEditForm(tempelement, 'equipments');
          }
      });
  });

  $(document).on('change', '.task_list_class', function () {
      var task_id = $(this).val();
      var element = $(this).closest('td').next().children('div').children('select');
      $.ajax({
          url: "{{ route('mis.task.getSubTasksList') }}",
          type: 'POST',
          dataType: 'json',
          data: {
              'task_id': task_id,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            count = Object.keys(response.data).length;
            html = "<option value=''>Sub Task</option>";
            if (count) {
                $.each(response.data, function (key, val) {
                    html += '<option value="'+key+'">'+val+'</option>';
                });
            }
            element.html(html);
          }
      });
  });

  $(document).on('click', '.expense-edit-close', function () {
      var expid = $(this).data('id');
      var element = $(this).closest('form').parent().parent();
      var key = element.data('id');
      $.ajax({
          url: "{{ route('mis.task.expense_edit_close') }}",
          type: 'POST',
          dataType: 'html',
          data: {
              'id': expid,
              'key': key,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            element.html(response);
          }
      });
  });

  $(document).on('click', '.equipment-edit-close', function () {
      var eqpid = $(this).data('id');
      var element = $(this).closest('form').parent().parent();
      var key = element.data('id');
      $.ajax({
          url: "{{ route('mis.equipment.editclose') }}",
          type: 'POST',
          dataType: 'html',
          data: {
              'id': eqpid,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            element.html(response);
          }
      });
  });

  $(document).on('click', '.tool-edit-close', function () {
      var toolid = $(this).data('id');
      var element = $(this).closest('form').parent().parent();
      $.ajax({
          url: "{{ route('mis.tool.editclose') }}",
          type: 'POST',
          dataType: 'html',
          data: {
              'id': toolid,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            element.html(response);
          }
      });
  });

  $(document).on('click', '.cancel-equipment-btn', function () {
      var eqpid = $(this).data('id');
      var element = $(this).closest('tr');
      if (confirm("Are you sure you want to inactive")) {
        $.ajax({
            url: "{{ route('mis.equipment.cancel') }}",
            type: 'POST',
            dataType: 'json',
            data: {
                'id': eqpid,
                '_token': '{{csrf_token()}}'
            },
            success: function(response) {
              if (response.status == 'success') {
                element.remove();
              } 
              else {
                alert(response.message);
              }
            }
        });
      }
  });

  $(document).on('click', '.fileuploadbtn', function () {
    $(this).parent().next().trigger('click');
  });
  
  $(document).on('click', '.edit-tool-btn', function () {
      var id = $(this).data('id');
      var element = $(this).closest('tr');
      $.ajax({
          url: "{{ route('mis.tool.edit') }}",
          type: 'POST',
          dataType: 'html',
          data: {
              'id': id,
              '_token': '{{csrf_token()}}'
          },
          success: function(response) {
            element.empty();
            element.html(response);
            tempelement = element.children('td').children('form');
            validateEditForm(tempelement, 'tools');
          }
      });
  });

  $(document).on('click', '.cancel-tool-btn', function () {
      var id = $(this).data('id');
      var element = $(this).closest('tr');
      if (confirm("Are you sure you want to inactive")) {
        $.ajax({
            url: "{{ route('mis.tool.cancel') }}",
            type: 'POST',
            dataType: 'json',
            data: {
                'id': id,
                '_token': '{{csrf_token()}}'
            },
            success: function(response) {
              if (response.status == 'success') {
                element.remove();
              } 
              else {
                alert(response.message);
              }
            }
        });
      }
  });

  function validateEditForm(formElement, module)
  {
    formElement.validate({
      ignore:'',
      errorPlacement: function(error, element) {
          if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      },
      submitHandler: function(form,event) {
        event.preventDefault()
        var form = formElement.closest("form");
        var formData = new FormData(form[0]);
        $.ajax({
            url: form[0].action,
            type: 'POST',
            dataType: "json",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            success: function (response) {
                if (response.status == 'success') {
                  if (module == 'expenses') {
                    expesnesDataTable.draw();
                    dataTable.draw();
                  }
                  if (module == 'tools') {
                    toolsDataTable.draw();
                  }
                  if (module == 'equipments') {
                    eqipmentsDataTable.draw();
                  }
                  html = `<div class="row-fluid">
                              <div class="span12">
                                  <p class="alert alert-info">${response.message}</p>
                              </div> 
                          </div>`;
                  $('.alert-div').html(html);
                }
                else {
                  html = `<div class="row-fluid">
                              <div class="span12">
                                  <p class="alert alert-info">${response.message}</p>
                              </div> 
                          </div>`;
                  $('.alert-div').html(html);
                }
                $(".alert").fadeTo(2000, 500).slideUp(500, function () {
                    $(".alert").alert('close');
                });
            }
        });
      }
    });
  }

  function formStoreAjax(form, module)
  {
    var formData = new FormData(form[0]);
    $.ajax({
        url: form[0].action,
        type: 'POST',
        dataType: "json",
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
        },
        success: function (response) {
            if (response.status == 'success') {
              if (module == 'tasks') {
                form.trigger('reset');
                tasksDataTable.draw();
              }
              if (module == 'expenses') {
                let task_id = $('#taskId').val();
                let sub_task_id = $('#subTaskId').val();
                refreshExpenseStoreForm();
                expesnesDataTable.draw();
                getSubTasksTotal(task_id, sub_task_id);
                dataTable.draw();
              }
              if (module == 'tools') {
                $('#toolsstoreform').trigger('reset');
                $("#binId").data("selectBoxIt").refresh();
                toolsDataTable.draw();
              }
              if (module == 'equipments') {
                $('#equipmentstoreform').trigger('reset');
                $("#companyId").data("selectBoxIt").refresh();
                $("#fuelId").data("selectBoxIt").refresh();
                eqipmentsDataTable.draw();
              }
              html = `<div class="row-fluid">
                          <div class="span12">
                              <p class="alert alert-info">${response.message}</p>
                          </div> 
                      </div>`;
              $('.alert-div').html(html);
            }
            else {
              html = `<div class="row-fluid">
                          <div class="span12">
                              <p class="alert alert-info">${response.message}</p>
                          </div> 
                      </div>`;
              $('.alert-div').html(html);
            }
            $(".alert").fadeTo(2000, 500).slideUp(500, function () {
                $(".alert").alert('close');
            });
        }
    });
  }

  function refreshExpenseStoreForm()
  {
    $("#expenseItemId").data("selectBoxIt").refresh();
    $("#expenseUnitId").data("selectBoxIt").refresh();
    $("#expenseSupplierId").data("selectBoxIt").refresh();
    $('#expenseInv').val('');
    $('#expenseDateId').val('');
    $('#expenseQuantity').val('');
    $('#expensePrice').val('');
    $('#expenseAmount').val('');
    $('#expenseResp').val('');
    $('#expenseDescription').val('');
  }

  $(document).on('change', '#expenseInvoiceFilterId,#expenseSupplierFilterId,#expenseItemFilterId', function() {
    expesnesDataTable.draw();
  });

  $(document).on('click', '#btn_expensesearch', function() {
    expesnesDataTable.draw();
  });
</script>
<style type="text/css">
  form input[type="file"] {
    display: none;
  }
  #fuelIdSelectBoxItContainer {
      display: none;
  }
  #companyIdSelectBoxItContainer {
      display: none;
  }
  #expenseInvoiceFilterIdSelectBoxItContainer {
      display: none;
  }
  #expenseSupplierFilterIdSelectBoxItContainer {
      display: none;
  }
  #expenseItemFilterIdSelectBoxItContainer {
      display: none;
  }
  #binIdSelectBoxItContainer {
      display: none;
  }
  .select2-dropdown {
      width: auto !important;
  }
</style>
@endsection