@extends('admin.layouts.app')

@push('css')
    <!-- Scripts -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- JS Color for Appearence (color_primary, color_secondary) -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/jscolor@2.4.5/jscolor.min.js"></script> --}}

@endpush

@section('content')

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Cambiar Configuracion</h4>
            </div>
        </div>
    </div>
		        <form action="{{ route('admin.processChangeSetting') }}" method='post' enctype="multipart/form-data">    	
		            @csrf		            

		            <!-- Campo de Nombre -->
		            <div class="mb-3">
		                <label for="name">Nombre</label>
		                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $admin->name) }}" required>
		                @error('name')
		                    <span class="invalid-feedback" role="alert">
		                        <strong>{{ $message }}</strong>
		                    </span>
		                @enderror
		                <small class="form-text text-muted">Ingrese el nombre completo del administrador.</small>
		            </div>

		            <!-- Campo de Correo Electronico -->
		            <div class="mb-3">
		                <label for="email">Correo Electronico</label>
		                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email', $admin->email) }}" required>
		                @error('email')
		                    <span class="invalid-feedback" role="alert">
		                        <strong>{{ $message }}</strong>
		                    </span>
		                @enderror
		                <small class="form-text text-muted">Proporcione una direccion de correo electronico valida.</small>
		            </div>


								<!-- Campo de Rol -->
		            <div class="mb-3">
		                <label for="role">Rol</label>
		                <select class="form-select @error('role') is-invalid @enderror" id="role" name="role" required>
		                    <option value="1" {{ $admin->role == '1' ? 'selected' : '' }}>Usuario</option>
		                    <option value="2" {{ $admin->role == '2' ? 'selected' : '' }}>Administrador</option>
		                </select>
		                @error('role')
		                    <span class="invalid-feedback" role="alert">
		                        <strong>{{ $message }}</strong>
		                    </span>
		                @enderror
		                <small class="form-text text-muted">Seleccione el rol adecuado para este usuario.</small>
		            </div>

		            <!-- Campo de Estado -->
								<div class="mb-3">
								    <label for="field_status">Estado</label>
								    <select name="status" id="field_status" class="form-select">
								        <option value="1" {{ $admin->status == 1 ? 'selected' : '' }}>Activo</option>
								        <option value="0" {{ $admin->status == 0 ? 'selected' : '' }}>Inactivo</option>
								    </select>
								    <small class="form-text text-muted">Seleccione el estado del administrador.</small>
								</div>

		            <!-- Campo de Imagen con Vista Previa -->
		            <div class="mb-3">
		                <label for="image" class="form-label">Imagen de Perfil</label>
		                <input type="file" name="image" id="image" class="form-control">
		                @if ($admin->image)
		                    <img src="{{ asset('profile_pic/thumb/' . $admin->image) }}" class="img-fluid mt-4" alt="{{ $admin->name }}">
		                @else
		                    <img src="{{ asset('assets/images/default-profile.png') }}" class="img-fluid mt-4" alt="Imagen por Defecto">
		                @endif
		                <small class="form-text text-muted">Suba una nueva imagen de perfil si desea actualizarla.</small>
		            </div>

		            <button type="submit" class="btn btn-primary">Actualizar</button>
		        </form>            


        <!-- /.card -->
    
@endsection

@section('customJs')
	<script type="text/javascript">

        //$("#changePasswordForm").submit(function(event){
        $("#changePasswordForm").submit(function(e){

            //event.preventDefault();
            e.preventDefault();

            $("button[type=submit]").prop('disabled', true);

            $.ajax({
                url: '{{ route("admin.processChangePassword") }}',
                type: 'post',
                data: $(this).serializeArray(),
                dataType: 'json',
                success: function(response){

                    $("button[type=submit]").prop('disabled', false);

                    if (response["status"] == true) {

                        window.location.href = "{{ route('admin.showChangePasswordForm')}}";

                        $("#old_password").removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback').html("");

                        $("#new_password").removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback').html("");

                        $("#confirm_password").removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback').html("");

                    } else {

                        var errors = response['errors'];

                        if(errors["old_password"]) {
                            $("#old_password").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['old_password']);
                        } else {
                            $("#old_password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
                        }

                        if(errors["new_password"]) {
                            $("#new_password").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['new_password']);
                        } else {
                            $("#new_password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
                        }

                        if(errors["confirm_password"]) {
                            $("#confirm_password").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['confirm_password']);
                        } else {
                            $("#confirm_password").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
                        }
                    }

                }, error: function(jqXHR, exception){
                    console.log("Something Went Wrong");
                }
            });

        });

	</script>
@endsection