@extends('layout.administrator.index')
@section('title', 'Rules Applied')

@section('style')
  <style media="screen">
  .select2-selection {
    min-height: 34px;
    height: auto !important;
  }
  </style>
@endsection

@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      {{-- <h1>Rules Applied</h1> --}}
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('administrator.dashboard')}}"><i class="fa fa-dashboard"></i> Inicio</a></li>
        <li class="breadcrumb-item"><a href="{{route('administrator.rules.index')}}">Rules</a></li>
        <li class="breadcrumb-item active">Rules Applied</li>
      </ol>
    </section>

    <section class="content">
      @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
          {{session('success')}}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      @endif
      @if(session('danger'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          {{session('danger')}}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      @endif
      <div id="idContentFilter" class="box box-solid bg_dark hide">
        <div class="box-header with-border">
          <div class="row align-items-center">
            <div class="col-12">
              <h4 class="box-title">Busqueda avanzada</h4>
            </div>
          </div>
        </div>
        <div class="box-body">
          <form action="{{route('administrator.rules.index')}}" method="get" files="true" enctype="multipart/form-data">
            @csrf
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="idName" class="control-label">Nombre</label>
                  <input type="text" name="name" class="form-control" id="idName" placeholder="Nombre">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="idState" class="control-label">Estado</label>
                  <select name="state" class="form-control select2" id="idState">
                    <option value="">Todos</option>
                    @foreach (Config::get('constants.active') as $key => $state)
                      <option value="{{$key}}">{{$state['name']}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 text-left">
                <a href="{{route('administrator.receptionists.index')}}" class="btn btn-danger"><i class="fa fa-refresh" aria-hidden="true"></i> Limpiar</a>
              </div>
              <div class="col-md-6 text-right">
                <button type="submit" class="btn btn-info"><i class="fa fa-search" aria-hidden="true"></i> Buscar</button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="box">
        <div class="box-header with-border">
          <div class="row align-items-center">
            <div class="col-6">
              <h4 class="box-title">Rules</h4>
            </div>
            <div class="col-6">
              <div class="box-controls pull-right">
                <div class="box-header-actions">
                    <button type="button" class="btn btn-sm btn-info" id="idBtnFilter"><i class="fa fa-filter"></i> Filtro</button>
                  <a href="javascript:;" class="btn btn-sm btn-success" onclick="openRulesAppliedAdd()"><i class="fa fa-plus"></i> Add Rules</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-body">
          <div class="table-responsive">
            <table class="table table-sm table-hover">
              <thead>
                <tr>
                  <th class="text-center">Customers</th>
                  <th class="text-center">Template</th>
                  {{-- <th class="text-center">Priority</th> --}}
                  <th class="text-center">State</th>
                  {{-- <th class="text-center">Action</th> --}}
                </tr>
              </thead>
              <tbody class="text-center">
                @if (count($applied)>0)
                  @foreach ($applied as $apply)
                    <tr>
                      <td style="vertical-align:middle;" class="font-weight-bold">{{$apply->getCustomer->company}}</td>
                      {{-- <td>
                        <span class="badge badge-dark">{{Config::get('constants.rule_types')[$apply->type]['name']}}</span>
                      </td> --}}
                      <td>
                        <span class="badge badge-dark">{{$apply->getRulesGroup->name}}</span>
                      </td>
                      <td>
                        <span class="badge badge-{{Config::get('constants.states')[$apply->state]['type']}}">{{Config::get('constants.states')[$apply->state]['name']}}</span>
                      </td>
                      {{-- <td>
                        <a href="javascript:;" onclick="openDeleteRules({{$apply->id}})" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>
                      </td> --}}
                    </tr>
                  @endforeach
                @else
                  <tr>
                    <td colspan="6">No se encontraron grupos</td>
                  </tr>
                @endif
              </tbody>
            </table>
          </div>
        </div>
        <div class="box-footer clearfix">
          {{-- Pagination --}}
        </div>
      </div>
    </section>
  </div>

  <!-- MODAL -->
  <div class="modal fade" id="idRulesAppliedAdd" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="idTitleName"></h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form id="idFormAdd" method="post">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="idType" class="control-label">Types *</label>
                  <select class="form-control select2" id="idType" name="type" onchange="templates(this.value)">
                    <option value=""></option>
                    @foreach (Config::get('constants.rule_types') as $key => $type)
                      <option value="{{$key}}">{{$type['name']}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="idTemplate" class="control-label">Template *</label>
                  <select class="form-control select2" id="idTemplate" name="template">
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="idCustomer" class="control-label">Customers *</label>
                  <select class="form-control select2" id="idCustomer" name="customerId" onchange="customerData()">
                    <option value=""></option>
                    @foreach ($customers as $customer)
                      <option value="{{$customer->id}}">{{$customer->company}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <div class="row">
                    <div class="col-md-6">
                      <label for="idAccount" class="control-label">Accounts</label>
                    </div>
                    <div class="col-md-6 text-right">
                      <a href="javascript:;" id="idSelectAllAccount" data-select="false">
                        <small><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>
                      </a>
                    </div>
                  </div>
                  <select class="form-control select2" id="idAccount" name="accounts[]" multiple="multiple">

                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <div class="row">
                    <div class="col-md-6">
                      <label for="idEquipment" class="control-label">Model</label>
                    </div>
                    <div class="col-md-6 text-right">
                      <a href="javascript:;" id="idSelectAllEquipment" data-select="false">
                        <small><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>
                      </a>
                    </div>
                  </div>
                  <select class="form-control hg_select select2" id="idEquipment" name="equipments[]" multiple="multiple">

                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <div class="row">
                    <div class="col-md-6">
                      <label for="idComponentLocation" class="control-label">Component Location</label>
                    </div>
                    <div class="col-md-6 text-right">
                      <a href="javascript:;" id="idSelectAllComponentLocation" data-select="false">
                        <small><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>
                      </a>
                    </div>
                  </div>
                  <select class="form-control hg_select select2" id="idComponentLocation" name="components[]" multiple="multiple">

                  </select>
                </div>
              </div>
            </div>
          </form>
          <br>
          <div class="row">
            <div class="col-md-12">
              <button type="button" onclick="add()" class="btn btn_admin btn-block"><i class="fa fa-floppy-o"></i> Guardar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('js')
  <script type="text/javascript">
    $("#idBtnFilter").click(function() {
      $("#idContentFilter").slideToggle("slow");
    });
  </script>
  <script type="text/javascript">
    /*Account*/
    $('#idSelectAllAccount').on("click", function (e) {
      var lengthV = $('#idAccount > option').length;
      if (lengthV>0) {
        var select = $(this).data("select");
        if (!select) {
          //False
          $("#idAccount > option").prop("selected", true);
          $("#idAccount").trigger("change");
          $(this).data("select", true);
          $(this).html('<small class="text-right"><i class="fa fa-square" aria-hidden="true"></i> Deselect all</small>');
        }else{
          //True
          $("#idAccount > option").prop("selected", false);
          $("#idAccount").trigger("change");
          $(this).data("select", false);
          $(this).html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
        }
        equipments();
      }
    });

    $('#idAccount').on('select2:select', function (e) {
      var lengthOption = $('#idAccount > option').length;
      var lengthSelected = $('#idAccount > option:selected').length;
      if (parseInt(lengthOption) == parseInt(lengthSelected)) {
        $('#idSelectAllAccount').data("select", true);
        $('#idSelectAllAccount').html('<small class="text-right"><i class="fa fa-square" aria-hidden="true"></i> Deselect all</small>');
      }
      equipments();
    });

    $('#idAccount').on('select2:unselect', function (e) {
      equipments();
      $('#idSelectAllAccount').data("select", false);
      $('#idSelectAllAccount').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
    });

    /*Equipment*/
    $('#idSelectAllEquipment').on("click", function (e) {
      var lengthV = $('#idEquipment > option').length;
      if (lengthV>0) {
        var select = $(this).data("select");
        if (!select) {
          //False
          $("#idEquipment > option").prop("selected", true);
          $("#idEquipment").trigger("change");
          $(this).data("select", true);
          $(this).html('<small class="text-right"><i class="fa fa-square" aria-hidden="true"></i> Deselect all</small>');
        }else{
          //True
          $("#idEquipment > option").prop("selected", false);
          $("#idEquipment").trigger("change");
          $(this).data("select", false);
          $(this).html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
        }
        components();
      }
    });

    $('#idEquipment').on('select2:select', function (e) {
      var lengthOption = $('#idEquipment > option').length;
      var lengthSelected = $('#idEquipment > option:selected').length;
      if (parseInt(lengthOption) == parseInt(lengthSelected)) {
        $('#idSelectAllEquipment').data("select", true);
        $('#idSelectAllEquipment').html('<small class="text-right"><i class="fa fa-square" aria-hidden="true"></i> Deselect all</small>');
      }
      components();
    });

    $('#idEquipment').on('select2:unselect', function (e) {
      components();
      $('#idSelectAllEquipment').data("select", false);
      $('#idSelectAllEquipment').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
    });

    /*Component Location*/
    $('#idSelectAllComponentLocation').on("click", function (e) {
      var lengthV = $('#idComponentLocation > option').length;
      if (lengthV>0) {
        var select = $(this).data("select");
        if (!select) {
          //False
          $("#idComponentLocation > option").prop("selected", true);
          $("#idComponentLocation").trigger("change");
          $(this).data("select", true);
          $(this).html('<small class="text-right"><i class="fa fa-square" aria-hidden="true"></i> Deselect all</small>');
        }else{
          //True
          $("#idComponentLocation > option").prop("selected", false);
          $("#idComponentLocation").trigger("change");
          $(this).data("select", false);
          $(this).html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
        }
      }
    });

    $('#idComponentLocation').on('select2:select', function (e) {
      var lengthOption = $('#idComponentLocation > option').length;
      var lengthSelected = $('#idComponentLocation > option:selected').length;
      if (parseInt(lengthOption) == parseInt(lengthSelected)) {
        $('#idSelectAllComponentLocation').data("select", true);
        $('#idSelectAllComponentLocation').html('<small class="text-right"><i class="fa fa-square" aria-hidden="true"></i> Deselect all</small>');
      }
    });

    $('#idComponentLocation').on('select2:unselect', function (e) {
      $('#idSelectAllComponentLocation').data("select", false);
      $('#idSelectAllComponentLocation').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
    });
  </script>
  <script type="text/javascript">
    function openRulesAppliedAdd() {
      $("#idRulesAppliedAdd").modal();
    }

    function templates(id) {
      $("#idTemplate").empty();
      $.ajax({
        type: 'POST',
        url: '/administrator/rules/applied/templates',
        data: {
          'id': id
        },
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){},
        success:function(response){
          if (response.state == 1) {
            $.each(response.data.templates, function( index, item ){
              $("#idTemplate").append('<option value="'+item.id+'">'+item.name+'</option>');
            });
          }
        },
        error: function(xhr){
          swal("Oops!", "Hemos tenido problemas, intenta nuevamenteaa", "warning");
        }
      });
    }

    function customerData() {
      $("#idAccount").empty();
      $("#idEquipment").empty();
      $("#idComponentLocation").empty();

      $('#idSelectAllAccount').data("select", false);
      $('#idSelectAllAccount').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
      $('#idSelectAllEquipment').data("select", false);
      $('#idSelectAllEquipment').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
      $('#idSelectAllComponentLocation').data("select", false);
      $('#idSelectAllComponentLocation').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');

      var formData = new FormData(document.getElementById("idFormAdd"));
      $.ajax({
        type: 'POST',
        url: '/administrator/rules/applied/customer',
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){},
        success:function(response){
          if (response.state == 1) {

            $.each(response.data.accounts, function( index, item ){
              $("#idAccount").append('<option value="'+item.id+'">'+item.name+'</option>');
            });

            $.each(response.data.models, function( index, model ){
              $("#idEquipment").append('<option value="'+model.unit_model+'">'+model.fun_unit_model.name+'</option>');
            });

            $.each(response.data.components, function( index, component ){
              $("#idComponentLocation").append('<option value="'+component.id+'">'+component.name+'</option>');
            });
          }
        },
        error: function(xhr){
          swal("Oops!", "Hemos tenido problemas, intenta nuevamenteaa", "warning");
        }
      });
    }


    function equipments() {
      $("#idEquipment").empty();
      $("#idComponentLocation").empty();

      $('#idSelectAllEquipment').data("select", false);
      $('#idSelectAllEquipment').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');
      $('#idSelectAllComponentLocation').data("select", false);
      $('#idSelectAllComponentLocation').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');

      var formData = new FormData(document.getElementById("idFormAdd"));
      $.ajax({
        type: 'POST',
        url: '/administrator/rules/applied/equipments',
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){},
        success:function(response){
          if (response.state == 1) {
            $.each(response.data.models, function( index, item ){
              $("#idEquipment").append('<option value="'+item.unit_model+'">'+item.fun_unit_model.name+'</option>');
            });

            $.each(response.data.components, function( index, component ){
              $("#idComponentLocation").append('<option value="'+component.id+'">'+component.name+'</option>');
            });
          }
        },
      });
    }

    function components() {
      $("#idComponentLocation").empty();

      $('#idSelectAllComponentLocation').data("select", false);
      $('#idSelectAllComponentLocation').html('<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>');

      var formData = new FormData(document.getElementById("idFormAdd"));
      $.ajax({
        type: 'POST',
        url: '/administrator/rules/applied/components',
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){},
        success:function(response){
          if (response.state == 1) {
            if (response.val == 1) {
              $.each(response.data.components, function( index, item ){
                $("#idComponentLocation").append('<option value="'+item.get_component_location.id+'">'+item.get_component_location.name+'</option>');
              });
            }else {
              $.each(response.data.components, function( index, item ){
                $("#idComponentLocation").append('<option value="'+item.id+'">'+item.name+'</option>');
              });
            }
          }
        },
        error: function(xhr){
          swal("Oops!", "Hemos tenido problemas, intenta nuevamenteaa", "warning");
        }
      });
    }




  </script>
  <script type="text/javascript">
    function add() {
      var formData = new FormData(document.getElementById("idFormAdd"));
      $.ajax({
        type: 'POST',
        url: '/administrator/rules/applied/add',
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){
          $(".content_loading").fadeIn("slow");
        },
        success:function(response){
          $(".content_loading").fadeOut("slow");
          if (response.state == 1) {
            swal({
              title: "Bien!",
              text: response.message,
              type: "success",
            }, function(){
              $(".content_loading").fadeIn("slow");
              location.reload();
            });
          }else if (response.state == 2) {
            swal("Oops!", response.message, "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        },
        error: function(xhr){
          swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
        }
      });
    }

    function openDeleteRules(id, name) {
      swal({
          title: "Estás seguro?",
          text: "La regla sera eliminada!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Si, Eliminar!",
          closeOnConfirm: false
      }, function(){
        deleteRules(id);
      });
    }

    function deleteRules(id) {
      $.ajax({
        type: 'POST',
        url: '/administrator/rules/applied/delete',
        data: {
          "id": id
        },
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){
          $(".content_loading").fadeIn("slow");
        },
        success:function(response){
          $(".content_loading").fadeOut("slow");
          if (response.state == 1) {
            swal({
                title: "Eliminado!",
                text: response.message,
                type: "success",
            }, function(){
              location.reload();
            });
          }else if (response.state == 2) {
            swal("Oops!", response.message, "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        },
        error: function(xhr){
          $(".content_loading").fadeOut("slow");
          swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
        }
      });
    }
  </script>
@endsection