@extends('layouts.app')

@push('style')
  
 
 
  <style>
  .bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgb(213 213 213) !important;
}

.btn {
    color: #ffffff;
    background-color: #cd2424;
    border: 1px solid transparent;
 
}
       
      </style>
  @endpush


@section('content')
    @if (session('message'))
        <div class="px-4 my-2">
            <div class="alert alert-success" role="alert">
                {!! session('message') !!}
            </div>
        </div>
    @endif
    @if (session('error'))
        <div class="px-4 my-2">
            <div class="mr-4 alert alert-danger" role="alert">
                {!! session('error') !!}
            </div>
        </div>
    @endif

    

    <div class="row p-4 pb-0  mx-0  rounded-3 border shadow-lg text-left">

    <h1>{{ __('applabels.User') }} </h1>
    
    <form id="formuser" class="needs-validation" novalidate >
    <div class="mb-1">
        <div class="row g-5">
            <div class="col-2 form-group">
                <label class="form-label"><b>{{ __('applabels.APIID') }}</b> </label>
                <input name="api_user_id" class="form-control d-none" readonly id="api_user_id" value="" />
            </div>
            
            <div class="col-2 form-group">
                <label class="form-label" for="username"><b>{{ __('applabels.Username') }}</b> </label>
                <input name="username" class="form-control" id="username" value="" pattern="^[a-zA-Z0-9_]+$" required/>
                <div class="invalid-feedback">
                Username must be alphanumeric and can include underscores, but no spaces or special characters.
                </div>
            </div>
            <div class="col-4 form-group">
               
                    <label class="form-label" for="name"><b>{{ __('applabels.Name') }}</b> </label>
                 
                    <input name="name" class="form-control   item" id="name" value="" required/>
                    <div class="invalid-feedback">
                    Please provide a Name
                </div>
                 
            </div>
            
           
            <div class="col-4 form-group">
                <label class="form-label" for="email"><b>{{ __('applabels.Email') }}</b> </label>
                <input name="email" class="form-control" id="email" value="" required/>
                <div class="invalid-feedback">
                Please enter a valid email address (e.g., user@example.com).
                    </div>
            </div>
        </div>
        <div class="row mt-4 g-0 bg-secondary bg-gradient">
            <div class="col-1"></div>
            <div class="col-4 form-group">
                <div  class="p-2 flex-grow-1">
                <label   class="form-label"><b>{{ __('applabels.User Status') }}</b></label><br/>
                    <input type="checkbox"  class="btn-check" name="authorized"  id="authorized" checked>  
                    <label for="authorized" class="btn btn-outline-success">{{ __('applabels.Active') }}</label>
                 
                    
                </div>
            </div>
            <div class="col-4 form-group">
                <div  class="p-2 flex-grow-1">
                    
                        <label for="app_levels_id"  class="form-label"><b>{{ __('applabels.Access Level') }}</b></label>
                            <select name="app_levels_id" id="app_levels_id" class="form-control"  required>
                                <option value="">{{ __('applabels.Select Level') }}</option>
                                @foreach ($appLevels as $level)
                                    <option value="{{ $level->id }}">{{ $level->name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                         required
                    </div>
                    <div class="input-group mb-3"></div>
                </div>
            </div>
        </div>
        <div class="row mt-4 g-0">
            <div class="form-group col-8">
                <label class="form-label"><b>{{ __('applabels.SocialMedia') }}</b> </label>
                
             @foreach($socialMedia as $media )

                
                <div class="d-flex justify-content-start">
                   <div  class="p-2 col-2">
                        <i class="fa-brands fa-{{ isset($media) ? strtolower($media->name) : '' }}">  </i> {{ $media->name }}
                    </div>
                    <div class="p-2">
                          <input type="checkbox" class="checkboxClass" name="socialMedia[]" value="{{ $media->id }}" />                        
                    </div>
                    <div  class="p-2 flex-grow-1">
                        <div class="input-group mb-3">
                        <span class="input-group-text" id="token1">{{ __('applabels.Token') }}</span>
                            <input type="text" class="form-control" selected name="token[]" id="token[]"  />                                
                        </div>
                    </div>
                </div>
              
            @endforeach

                
                  
                 
            </div> 
             
        </div>

            
        
        
        <!-- button type="button" class="mt-2 btn btn-secondary" onclick="clearForm()">Limpar</button -->
        <div class="row align-items-end flex-column">
            <hr class="col-3 col-md-12 mb-0">
            <div class="ml-auto col-1">
                <button type="button" class="mt-2 btn btn-primary" id="submit"  name="submit">{{ __('applabels.Save') }}</button>
            </div>
        </div>
    </div>
 
  
</form>
</div>
  
    
   

    @push('scripts')
    <script type="text/javascript">
         

        
        $(document).ready(function() {

            $("#submit").on("click", function() {

                if (!$(formuser)[0].checkValidity()){
                    //Validate Form
                    $(formuser)[0].reportValidity();
                     event.preventDefault()
                     event.stopPropagation()
                     
                }
                
                $(formuser).addClass('was-validated');
                var formData   = $(formuser).serializeArray(); //serialize

                console.log (formData);
                
                $.ajax({
                    url: "{!! url('/auth/users/save') !!}",
                    type: "post",
                    data: formData,
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        window.location = "{!! url('/auth/users/list') !!}"

                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });


            })


            $("#authorized").on("click", function() {
               
                if(this.checked){
                    $(this).next().text("{{ __('applabels.Active') }}");
                } else {
                    $(this).next().text("{{ __('applabels.Inactive') }}");
                }
            });
        });
    </script>
    
    @endpush

@endsection