@extends('backend.layouts.admin.app')

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('admin.roles.index') }}">Roles</a>
        </li>
        <li class="active">{{$title}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
        
        
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0">
    @include('backend.layouts.alert')
      <!-- Default box -->
      <div class="row">
      <div class="col-md-12">

        <div class="border-top">
            
            <div class="" id="customer-step-1" >
              <form action="{{ $save }}" method="POST" class="form-horizontal form-validate" id="roleForm" enctype="multipart/form-data">
                  @csrf
                  @if($pageData)
                    @method('PUT')
                  @endif
                  <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                  
                      <div class="box-body px-0 form-box-scroll">
                      
                        <div class="row">
                          <div class="col-md-4">
                          <!-- Title -->
                            <div class="form-group">
                                <label for="title" class="control-label">{{ __('app.roles.role_name') }}</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Example: Role Transport Supervisor" value="{{ old('name', $pageData['name'] ?? '') }}">
                                    @if ($errors->has('name'))
                                    <span class="help-block">{{ $errors->first('name') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          
                          <div class="col-md-8">
                          
                            <div class="form-group">
                                <label for="description" class="control-label">{{ __('app.roles.role_description') }}</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="description" class="form-control" id="description" placeholder="Example: Manage Transporters and Drivers" value="{{ old('description', $pageData['description'] ?? '') }}">
                                    @if ($errors->has('description'))
                                    <span class="help-block">{{ $errors->first('description') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          
                          <div class="col-md-12 col-xl-6">

                            <div class="fs-24 fw-semibold text-black mb-3">{{ __('app.roles.assign_permissions') }}</div>
                            @foreach ($groupedPermissions as $module => $actions)
                              <div class="border-top py-3">
                                <div class="row">
                                  <label for="description" class="control-label col-md-3 fw-semibold mb-0">{{ ucfirst($module) }}</label>
                                  <div class="col-md-9">
                                    <div class="row">
                                      @foreach ($actions as $action)
                                        <div class="col-md-3">
                                          <div class="form-check p-0">
                                            <input class="form-check-input checkbox" type="checkbox" name="permissions[]" value="{{ $action['id'] }}" id="perm_{{ $action['id'] }}" {{ (is_array(old('permissions', $rolePermissions ?? [])) && in_array($action['id'], old('permissions', $rolePermissions ?? []))) ? 'checked' : '' }}>
                                            <label class="form-check-label text-black fs-14 fw-400 mb-0" for="perm_{{ $action['id'] }}">
                                              {{ ucfirst($action['action']) }}
                                            </label>
                                          </div>
                                        </div>
                                      @endforeach
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                            <div id="permissions-error"></div>
                            </div>
                        </div>
                      </div>
                      <!-- /.box-body -->
                      <div class="box-footer px-0">
                          <div class="col-sm-12 text-end">
                              <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">{{ __('app.cancel') }}</a>
                              <button type="submit" class="btn btn-primary">{{ $saveBtn }}</button>
                              
                          </div>
                          
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

            
        </div>
      </div>
      <!-- /.box -->

    </section>
    <!-- /.content -->

<script type="text/javascript">

  $(document).ready(function() {
    $.validator.addMethod("atLeastOnePermission", function(value, element) {
        return $('.checkbox[name="permissions[]"]:checked').length > 0;
    }, "Please select at least one permission.");

    $('#roleForm').validate({
        rules: {
            name: { required: true, minlength: 3, maxlength: 50 },
            description: { required: true, maxlength: 500 },
            'permissions[]': { atLeastOnePermission: true }
        },
        messages: {
            name: {
                required: "Please enter role name.",
                minlength: "role name must be at least 3 characters.",
                maxlength: "role name must not exceed 50 characters."
            },
            description: {
                required: "Please enter description.",
                maxlength: "description must not exceed 500 characters."
            }
        },
        errorClass: 'text-danger',
        errorElement: 'span',
        highlight: function(element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "permissions[]") {
                error.appendTo("#permissions-error");
            } else {
                error.insertAfter(element);
            }
        }
    });

    $('#roleForm').on('submit', function(e) {
      e.preventDefault();
      if (!$(this).valid()) return;

      $.ajax({
          url: $(this).attr('action'),
          method: 'POST',
          data: $(this).serialize(),
          success: function(response) {
              if (response.status === 'success') {
                  toastr.success(response.message);
                  setTimeout(function() {
                      window.location.href = "{{ route('admin.roles.index') }}";
                  }, 1500);
              } else {
                  toastr.error(response.message);
              }
          },
          error: function(xhr) {
              if (xhr.status === 422) {
                  var errors = xhr.responseJSON.errors;
                  // Clear previous errors
                  $('.text-danger').remove();
                  $('.is-invalid').removeClass('is-invalid');
                  // Show new errors
                  $.each(errors, function(field, messages) {
                      if (field === 'permissions' || field === 'permissions[]') {
                          $('#permissions-error').html('<span class="text-danger">' + messages[0] + '</span>');
                      } else {
                          var input = $('[name="' + field + '"]');
                          input.addClass('is-invalid');
                          input.after('<span class="text-danger">' + messages[0] + '</span>');
                      }
                  });
              } else {
                    toastr.error('An error occurred. Please try again.');
              }
          }
      });
    });

    // Permission dependency logic
    function updateViewCheckboxes() {
      $('[id^="perm_"]').each(function() {
        var checkbox = $(this);
        var label = checkbox.closest('.form-check').find('label').text().trim().toLowerCase();
        if (label === 'view') {
          var group = checkbox.closest('.row');
          var createChecked = false, editChecked = false, downloadChecked = false;
          group.find('input[type="checkbox"]').each(function() {
            var actionLabel = $(this).closest('.form-check').find('label').text().trim().toLowerCase();
            if (actionLabel === 'create' && $(this).is(':checked')) createChecked = true;
            if (actionLabel === 'edit' && $(this).is(':checked')) editChecked = true;
            if (actionLabel === 'download' && $(this).is(':checked')) downloadChecked = true;
          });
          if (createChecked || editChecked || downloadChecked) {
            checkbox.prop('checked', true);
            checkbox.addClass('force-checked');
          } else {
            checkbox.removeClass('force-checked');
          }
        }
      });
    }

    // Prevent unchecking if force-checked
    $(document).on('click', '.checkbox[name="permissions[]"]', function(e) {
      var label = $(this).closest('.form-check').find('label').text().trim().toLowerCase();
      if (label === 'view' && $(this).hasClass('force-checked')) {
        e.preventDefault();
        return false;
      }
    });

    // On change of any permission checkbox
    $(document).on('change', '.checkbox[name="permissions[]"]', function() {
      updateViewCheckboxes();
    });

    // Initial call on page load
    updateViewCheckboxes();

  });
</script>
@endsection