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

@section('style')
  <style media="screen">
    .checkbox_list{
      padding: 20px;
    }
  </style>
@endsection

@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      {{-- <h1>Permisos</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 active">Permisos</li>
      </ol>
    </section>

    <section class="content">
      <form id="form_permisos" action="javascript:savePermits()">
        <div class="row">
          <div class="col-md-8">
            <div class="box">
              <div class="box-header with-border">
                <div class="row">
                  <div class="col-md-12">
                    <h4 class="box-title">Permisos</h4>
                  </div>
                </div>
              </div>
              <div class="box-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idRole" class="control-label">Roles</label>
                      <select class="form-control select2" id="idRole" onchange="selectModule()">
                        <option value="">Selecciona un rol</option>
                        @foreach ($roles as $role)
                          <option value="{{$role->id}}">{{$role->name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idModule" class="control-label">Modulos</label>
                      <select class="form-control select2" id="idModule" onchange="selectModule()">
                        <option value="">Selecciona un modulo</option>
                        @foreach ($modules as $module)
                          <option value="{{$module->id}}">{{$module->name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="box">
              <div class="box-header with-border">
                <div class="row">
                  <div class="col-md-12">
                    <h4 class="box-title">Acciones</h4>
                  </div>
                </div>
              </div>
              <div class="box-body">
                <div class="row">
                  <div class="col-md-12">
                    <div class="checkbox_list" id="actionsChecked">
                      {{-- <div class="row">
                        <div class="col-md-12">
                          <input type="checkbox" id="md_checkbox_31" class="filled-in chk-col-green" checked />
                					<label for="md_checkbox_31">Crear</label>
                        </div>
                      </div> --}}
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <button type="submit" class="btn btn-dark btn-block">Asignar Permiso</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </section>
    <section class="content">
      <form id="form_permisos" action="javascript:savePermits()">
        <div class="row">
          <div class="col-md-8">
            <div class="box">
              <div class="box-header with-border">
                <div class="row">
                  <div class="col-md-12">
                    <h4 class="box-title">Configurar Reporte</h4>
                  </div>
                </div>
              </div>
              <div class="box-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idClient" class="control-label">Cliente</label>
                      <select class="form-control select2" required id="idClient" onchange="loadReportConfig()">
                        <option value="">Selecciona un cliente</option>
                        @foreach ($customers as $role)
                          <option value="{{$role->id}}">{{$role->company}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="idSystemType" class="control-label">Tipo de Sistema</label>
                      <select class="form-control select2" required id="idSystemType" onchange="loadReportConfig()">
                        <option value="">Selecciona un tipo de Sistema</option>
                        @foreach ($systemTypes as $module)
                          <option value="{{$module->id}}">{{$module->name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="box">
              <div class="box-header with-border">
                <div class="row">
                  <div class="col-md-12">
                    <h4 class="box-title">Acciones</h4>
                  </div>
                </div>
              </div>
              <div class="box-body">
                <div class="row">
                  <div class="col-md-12">
                    <div class="checkbox_list_report">
                      <div class="row">
                        <div class="col-md-12">
                          <input type="checkbox" id="chk_tablas" value="1" class="filled-in chk-col-green" />
                          <label for="chk_tablas">Tablas</label>
                        </div>
                        <div class="col-md-12">
                          <input type="checkbox" id="chk_graficas" value="2" class="filled-in chk-col-green" />
                          <label for="chk_graficas">Gráficas</label>
                        </div>
                        {{--  <div class="col-md-12">
                          <input type="checkbox" id="chk_resultados" checked value="3" class="filled-in chk-col-green" />
                          <label for="chk_resultados">Resultados</label>
                        </div>  --}}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <button type="button" class="btn btn-dark btn-block" onclick="saveReportConfigs()">
                      Guardar Configuración
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </section>
  </div>
@endsection

@section('js')
  <script type="text/javascript">
    function selectModule() {
      var roles = $('#idRole').val();
      var modules = $('#idModule').val();
      if ((roles != "") && (modules != "")) {
        $("#actionsChecked").empty();
        var data = {
          "roles": roles,
          "modules": modules
        }
        $.ajax({
          url: "/administrator/permits/search",
          data: data,
          type: 'post',
          dataType: 'json',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function () {},
          success: function(response){
            $.each(response.data, function(i, item){
              if (item.checked == 1) {
                $("#actionsChecked").append('<div class="row">'+
                  '<div class="col-md-12">'+
                    '<input type="checkbox" name="checkedIdAction" id="actionId_'+item.id+'" value="'+item.id+'" class="filled-in chk-col-green" checked />'+
                    '<label for="actionId_'+item.id+'">'+item.name+'</label>'+
                  '</div>'+
                '</div>');
              }else{
                $("#actionsChecked").append('<div class="row">'+
                  '<div class="col-md-12">'+
                    '<input type="checkbox" name="checkedIdAction" id="actionId_'+item.id+'" value="'+item.id+'" class="filled-in chk-col-green" />'+
                    '<label for="actionId_'+item.id+'">'+item.name+'</label>'+
                  '</div>'+
                '</div>');
              }
            });
          },
          error: function(xhr){
            $('#loader_content').addClass('d-none');
          }
        });
      }
    }
  </script>
  <script type="text/javascript">
    function savePermits() {
      var idRole = $('#idRole').val();
      var idModule = $('#idModule').val();
      var actions = $('input:checkbox[name=checkedIdAction]:checked').map(function() {
        return this.value; // obtienes el valor de todos los checkboxes
      }).get();
      var data = {
        "idRole": idRole,
        "idModule": idModule,
        "actions": actions
      }
      $.ajax({
        url: "/administrator/permits/save",
        data: data,
        type: 'post',
        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: "Bien!",
              text: response.message,
              type: "success",
            }, function(){
              // selectModule();
            });
          }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");
          // location.reload();
        }
      });
    }


    function saveReportConfigs() {
      let customer = $('#idClient').val();
      let system = $('#idSystemType').val();

      let actions = $('.checkbox_list_report input:checked').map(function () {
        return $(this).val();
      }).get();

      if (!customer) {
        swal("Oops!", "Selecciona un cliente", "warning");
        return;
      }

      if (!system) {
        swal("Oops!", "Selecciona un tipo de sistema", "warning");
        return;
      }

      if (actions.length === 0) {
        swal("Oops!", "Selecciona al menos una opción", "warning");
        return;
      }

      $.ajax({
        url: "/administrator/permits/report/save",
        type: "POST",
        data: {
          customer: customer,
          system: system,
          actions: actions
        },
        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("Bien!", response.message, "success");

            // limpiar checks
            $('.checkbox_list_report input').prop('checked', false);

          } else {
            swal("Oops!", response.message, "warning");
          }
        },
        error: function () {
          $(".content_loading").fadeOut("slow");
          swal("Error", "No se pudo guardar", "error");
        }
      });
    }

    function loadReportConfig() {
      let customer = $('#idClient').val();
      let system   = $('#idSystemType').val();

      // solo ejecuta si ambos están seleccionados
      if (!customer || !system) return;

      $.ajax({
        url: "/administrator/permits/report/search",
        type: "POST",
        data: {
          customer: customer,
          system: system
        },
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {

          // limpiar todos los checks primero
          $('.checkbox_list_report input').prop('checked', false);

          if (response.state == 1 && response.data) {

            let actions = response.data.configuration;

            // marcar los que vienen de BD
            actions.forEach(function (item) {
              $('.checkbox_list_report input[value="' + item + '"]').prop('checked', true);
            });
          }
        },
        error: function () {
          console.log("Error al consultar configuración");
        }
      });
    }

    $('#chk_resultados').on('click', function(e) {
      e.preventDefault(); // bloquea el click
    });
  </script>
@endsection