@extends('frontEnd.layouts.master')
@section('title', 'Security - Change Password')
@section('content')

    <style>
        .customer-section {
            background-color: #f8f9fa;
            padding: 50px 0;
            min-height: 80vh;
        }

        .customer-content {
            background: #fff;
            border-radius: 15px;
            padding: 40px;
            border: none;
            margin: 0 auto;
        }

        /* Header Style */
        .account-title {
            font-weight: 700;
            color: #2B2D42;
            /* Updated to Brand Color */
            margin-bottom: 10px;
        }

        .security-subtitle {
            color: #888;
            font-size: 0.9rem;
            margin-bottom: 30px;
        }

        /* Form Elements */
        .form-label {
            font-weight: 600;
            font-size: 0.85rem;
            color: #444;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .input-group-text {
            background-color: #fcfcfd;
            border: 1px solid #ebedf2;
            border-right: none;
            color: #2B2D42;
            /* Updated to Brand Color for Icons */
            border-radius: 10px 0 0 10px;
        }

        .form-control {
            border: 1px solid #ebedf2;
            border-radius: 0 10px 10px 0;
            padding: 12px 15px;
            background-color: #fcfcfd;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: #2B2D42;
            /* Updated to Brand Color */
            box-shadow: none;
            background-color: #fff;
        }

        .input-group:focus-within .input-group-text {
            border-color: #2B2D42;
            /* Updated to Brand Color */
            background-color: #fff;
        }

        /* Button Updated to Brand Color #2B2D42 */
        .submit-btn {
            background: #2B2D42;
            color: #fff;
            border: none;
            width: 100%;
            padding: 14px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(43, 45, 66, 0.2);
            cursor: pointer;
        }

        .submit-btn:hover {
            background: #1d1e2c;
            /* Slightly Darker */
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(43, 45, 66, 0.3);
        }

        /* Password Toggle Icon */
        .password-toggle {
            cursor: pointer;
            color: #adb5bd;
            transition: color 0.2s;
        }

        .password-toggle:hover {
            color: #2B2D42;
            /* Updated to Brand Color */
        }

        .sticky-top-custom {
            position: -webkit-sticky;
            position: sticky;
            top: 80px;
            z-index: 9;
            height: fit-content;
        }

        @media (max-width: 991px) {
            .sticky-top-custom {
                position: relative;
                top: 0;
            }
        }
    </style>

    <section class="customer-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4 mb-4 sticky-top-custom">
                    <div class="customer-sidebar">
                        @include('frontEnd.layouts.customer.sidebar')
                    </div>
                </div>

                <div class="col-lg-9 col-md-8">
                    <div class="customer-content shadow-sm">
                        <div class="text-center mb-4">
                            <div class="bg-light d-inline-block p-3 rounded-circle mb-3">
                                <i class="bi bi-shield-lock-fill text-primary"
                                    style="font-size: 2rem; color: #E52E8A !important;"></i>
                            </div>
                            <h5 class="account-title">Change Password</h5>
                            <p class="security-subtitle">Ensure your account is using a long, random password to stay
                                secure.</p>
                        </div>

                        <form action="{{ route('customer.password_update') }}" method="POST" data-parsley-validate="">
                            @csrf

                            <div class="mb-4">
                                <label for="old_password" class="form-label">Old Password *</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-unlock"></i></span>
                                    <input type="password" id="old_password"
                                        class="form-control @error('old_password') is-invalid @enderror" name="old_password"
                                        required placeholder="Enter current password">
                                    @error('old_password')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="new_password" class="form-label">New Password *</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-key"></i></span>
                                    <input type="password" id="new_password"
                                        class="form-control @error('new_password') is-invalid @enderror" name="new_password"
                                        required placeholder="Enter new password" data-parsley-minlength="6">
                                    @error('new_password')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="confirm_password" class="form-label">Confirm New Password *</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-check2-circle"></i></span>
                                    <input type="password" id="confirm_password"
                                        class="form-control @error('confirm_password') is-invalid @enderror"
                                        name="confirm_password" required placeholder="Repeat new password"
                                        data-parsley-equalto="#new_password">
                                    @error('confirm_password')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="mt-5">
                                <button type="submit" class="submit-btn">
                                    <i class="bi bi-arrow-repeat me-2"></i> Update Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script src="{{ asset('public/frontEnd/') }}/js/parsley.min.js"></script>
    <script>
        $(document).ready(function () {
            // Optional: Custom Parsley error messages
            window.Parsley.addMessages('en', {
                equalto: 'This password does not match the new password above.'
            });
        });
    </script>
@endpush