@extends('layout.template')
@section('title', 'Cambiar de Contraseña')
@section('content')
    <div class="content-body">
        <div class="container-fluid">
            <!-- row -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Cambiar de Contraseña</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" id="alert-container">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" id="alert-container">
                        <strong>{{ session('error') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="col-xl-12 col-xxl-12 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('cambiarContrasenaPost') }}" method="post" id="cambiarContrasenaForm">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4 mb-3 col-md-12">
                                        <label class="form-label" for="current_password">Contraseña actual</label>
                                        <div class="input-group pass-group">
                                            <input type="password" name="current_password" id="current_password" class="form-control pass-input" required>
                                            <span class="input-group-text pass-handle"><i class=" ri-eye-off-line"></i><i class=" ri-eye-line"></i></span>
                                        </div>
                                        @error('current_password')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-lg-4 mb-3 col-md-12">
                                        <label class="form-label" for="new_password">Nueva contraseña (mínimo 6 caracteres)</label>
                                        <div class="input-group pass-group">
                                            <input type="password" name="new_password" id="new_password" class="form-control pass-input" minlength="6" required>
                                            <span class="input-group-text pass-handle"><i class=" ri-eye-off-line"></i><i class=" ri-eye-line"></i></span>
                                        </div>
                                        @error('new_password')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-lg-4 mb-3 col-md-12">
                                        <label class="form-label" for="new_password_confirmation">Confirmar contraseña</label>
                                        <div class="input-group pass-group">
                                            <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control pass-input" minlength="6" required>
                                            <span class="input-group-text pass-handle"><i class=" ri-eye-off-line"></i><i class=" ri-eye-line"></i></span>
                                        </div>
                                        @error('new_password_confirmation')<div class="text-danger">{{ $message }}</div> @enderror
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3">
                                        <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#confirmModal">Guardar nueva contraseña</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Confirm Modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Confirmar Cambio de Contraseña</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ¿Estás seguro de que deseas guardar  nueva contraseña?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="document.getElementById('cambiarContrasenaForm').submit();">Sí, Guardar</button>
                </div>
            </div>
        </div>
    </div>
@endsection