@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

@extends('layouts.customer-dashboard')

@section('title', 'Profile Settings')

   {{-- Breadcrumb --}}
@section('breadcrumb')
<div class="breadcrumb-bar breadcrumb-bg-04 text-center">
    <h2 class="breadcrumb-title mb-2">Settings</h2>
    <nav>
        <ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item">
                <a href="{{ url('/') }}"><i class="isax isax-home5"></i></a>
            </li>
            <li class="breadcrumb-item active">Security Settings</li>
        </ol>
    </nav>
</div>
@endsection



{{-- Dashboard Content --}}
@section('dashboard-content')

                <!-- Profile Settings -->
                
                    <div class="card settings mb-0">
                        <div class="card-header">
                            <h6>Settings</h6>
                        </div>
                        <div class="card-body pb-1">
                            <div class="settings-link d-flex align-items-center flex-wrap">
                                <a href="profile-settings.html"><i class="isax isax-user-octagon me-2"></i>Profile
                                    Settings</a>
                                <a href="security-settings.html" class="active ps-3"><i
                                        class="isax isax-shield-tick me-2"></i>Security</a>
                                <a href="notification-settings.html"><i
                                        class="isax isax-notification me-2"></i>Notifications</a>
                                <a href="integration-settings.html" class="pe-3"><i
                                        class="isax isax-hierarchy me-2"></i>Integrations</a>
                            </div>

                            <!-- Security Content -->
                            <div class="row gy-2">
                                
                                <div class="col-lg-6 d-flex">
                                    <div class="security-content flex-fill">
                                        <div class="d-flex align-items-center justify-content-between flex-wrap">
                                            <h6 class="fs-14 mb-1">Password</h6>
                                            <a href="#" class="btn btn-primary btn-xs mb-1"
                                                data-bs-toggle="modal"
                                                data-bs-target="#changePassword">
                                                Change
                                                </a>
                                        </div>
                                        <p class="fs-14 text-gray-6 fw-normal">
                                            Last Changed {{ Auth::user()->updated_at->format('d M Y, h:i A') }}
                                        </p>
                                    </div>
                                </div>
                               
                            </div>
                            <!-- /Security Content-->
                        </div>
                    </div>
             
                <!-- /Profile Settings -->
          
    


            <!-- Change password -->
            <div class="modal fade" id="changePassword" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5>Change Password</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                       <form action="{{ route('customer.change.password') }}" method="POST">
                            @csrf

                            <div class="modal-body pb-0">

                                <!-- Current Password -->
                                <div class="mb-3">
                                    <label class="form-label">
                                        Current Password <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon">
                                        <span class="input-icon-addon">
                                            <i class="isax isax-lock"></i>
                                        </span>
                                        <input type="password" name="current_password"
                                            class="form-control pass-input" required>
                                        <span class="input-icon-addon toggle-password">
                                            <i class="isax isax-eye-slash"></i>
                                        </span>
                                    </div>
                                </div>

                                <!--  Auto Generate Button -->
                                <div class="text-end mb-2">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-primary"
                                            id="autoGeneratePassword">
                                        Auto Generate Password
                                    </button>
                                </div>

                                <!-- New Password -->
                                <div class="mb-3">
                                    <label class="form-label">
                                        New Password <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon">
                                        <span class="input-icon-addon">
                                            <i class="isax isax-lock"></i>
                                        </span>
                                        <input type="password"
                                            id="new_password"
                                            name="new_password"
                                            class="form-control pass-input"
                                            required>
                                        <span class="input-icon-addon toggle-password">
                                            <i class="isax isax-eye-slash"></i>
                                        </span>
                                    </div>
                                </div>

                                <!-- Confirm Password -->
                                <div class="mb-3">
                                    <label class="form-label">
                                        Confirm Password <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-icon">
                                        <span class="input-icon-addon">
                                            <i class="isax isax-lock"></i>
                                        </span>
                                        <input type="password"
                                            id="confirm_password"
                                            name="new_password_confirmation"
                                            class="form-control pass-input"
                                            required>
                                        <span class="input-icon-addon toggle-password">
                                            <i class="isax isax-eye-slash"></i>
                                        </span>
                                    </div>
                                </div>

                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                                    Cancel
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    Update Password
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
            <!-- Change password -->

            

@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const btn = document.getElementById('autoGeneratePassword');

    if (btn) {
        btn.addEventListener('click', function () {

            fetch("{{ route('password.generate') }}")
                .then(response => response.json())
                .then(data => {
                    document.getElementById('new_password').value = data.password;
                    document.getElementById('confirm_password').value = data.password;
                });

        });
    }

});
</script>
@endpush