@extends('layouts.theme_selector')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-sm border-0">
                    <div class="card-header border-bottom d-flex align-items-center py-3"
                        style="background-color: var(--bs-body-tertiary);">
                        <a href="{{ route('ApiUsersIndex') }}" class="text-body-emphasis me-3">
                            <i class="bi bi-arrow-left-circle fs-4"></i>
                        </a>
                        <h5 class="mb-0 text-body-emphasis fw-bold">
                            <i class="bi bi-pencil-square me-2"></i>
                            Editar Usuario API
                        </h5>
                    </div>

                    <div class="card-body p-4">
                        @include('layouts.alerts.error')
                        @include('layouts.alerts.success')

                        <form action="{{ route('ApiUsersUpdate', $user->id) }}" method="post" id="editUserForm">
                            @csrf

                            <div class="row mb-4">
                                <div class="col-auto">
                                    <div class="avatar-circle-lg">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                </div>
                                <div class="col">
                                    <h4 class="mb-1">{{ $user->name }}</h4>
                                    <span class="text-body-secondary">
                                        <i class="bi bi-clock me-1"></i>
                                        Creado: {{ $user->created_at ? $user->created_at->format('d/m/Y H:i') : 'N/A' }}
                                    </span>
                                </div>
                                <div class="col-auto">
                                    @if($user->activo == 1)
                                        <span class="badge bg-success-subtle text-success px-3 py-2 fs-6">
                                            <i class="bi bi-check-circle me-1"></i>Activo
                                        </span>
                                    @else
                                        <span class="badge bg-danger-subtle text-danger px-3 py-2 fs-6">
                                            <i class="bi bi-x-circle me-1"></i>Inactivo
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <hr class="my-4">

                            <div class="row">
                                <div class="col-12 mb-4">
                                    <label for="name" class="form-label fw-bold">
                                        <i class="bi bi-person me-1 text-primary"></i>
                                        Nombre completo
                                    </label>
                                    <input type="text"
                                        class="form-control form-control-lg @error('name') is-invalid @enderror" id="name"
                                        name="name" value="{{ old('name', $user->name) }}" required autofocus>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-8 mb-4">
                                    <label for="email" class="form-label fw-bold">
                                        <i class="bi bi-envelope me-1 text-primary"></i>
                                        Email
                                    </label>
                                    <input type="email"
                                        class="form-control form-control-lg @error('email') is-invalid @enderror" id="email"
                                        name="email" value="{{ old('email', $user->email) }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4 mb-4">
                                    <label for="codigo" class="form-label fw-bold">
                                        <i class="bi bi-hash me-1 text-primary"></i>
                                        Código Prod. Largo
                                    </label>
                                    <input type="text"
                                        class="form-control form-control-lg @error('codigo') is-invalid @enderror"
                                        id="codigo" name="codigo" value="{{ old('codigo', $user->config->codigo ?? '') }}"
                                        required>
                                    @error('codigo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="alert alert-secondary border-0 shadow-sm mb-4">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <i class="bi bi-key me-2"></i>
                                        <strong>Contraseña</strong>
                                        <span class="text-body-secondary ms-2">Para cambiar la contraseña, usa el botón del
                                            listado</span>
                                    </div>
                                    <a href="{{ route('ApiUsersIndex') }}" class="btn btn-outline-danger btn-sm">
                                        <i class="bi bi-key me-1"></i>
                                        Cambiar Contraseña
                                    </a>
                                </div>
                            </div>

                            <hr class="my-4">

                            <div class="d-flex justify-content-between">
                                <a href="{{ route('ApiUsersIndex') }}" class="btn btn-outline-secondary px-4">
                                    <i class="bi bi-arrow-left me-1"></i>
                                    Volver
                                </a>
                                <button type="submit" class="btn btn-primary btn-lg px-5 shadow-sm">
                                    <i class="bi bi-check-lg me-2"></i>
                                    Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#editUserForm').on('submit', function () {
                $(this).find('button[type="submit"]')
                    .prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Guardando...');
            });
        });
    </script>

    <style>
        .avatar-circle-lg {
            width: 60px;
            height: 60px;
            background-color: #125368;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 24px;
        }

        .bg-success-subtle {
            background-color: rgba(25, 135, 84, 0.15) !important;
        }

        .bg-danger-subtle {
            background-color: rgba(220, 53, 69, 0.15) !important;
        }

        .form-control:focus {
            border-color: #1c93b9;
            box-shadow: 0 0 0 0.2rem rgba(28, 147, 185, 0.25);
        }

        .btn-primary {
            background-color: #125368;
            border: none;
        }

        .btn-primary:hover {
            background-color: #0d3d4d;
        }
    </style>
@endpush