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

@push('css')
@include('frontEnd.layouts.customer.partials.cp-styles')
@endpush

@section('content')
<div class="cp-wrap">

    <div class="cp-nav">
        <a href="{{ route('home') }}"><i class="fa-solid fa-house"></i> Home</a>
        <span>/</span>
        <a href="{{ route('customer.account') }}">Your Account</a>
        <span>/</span>
        <strong>Change Password</strong>
    </div>

    <div class="cp-tabs">
        <a href="{{ route('customer.account') }}" class="cp-tab"><i class="fa-solid fa-gauge-high"></i> Dashboard</a>
        <a href="{{ route('customer.orders') }}" class="cp-tab"><i class="fa-solid fa-box"></i> Your Orders</a>
        <a href="{{ route('customer.profile_edit') }}" class="cp-tab active"><i class="fa-solid fa-shield-halved"></i> Security</a>
    </div>

    <div class="cp-card" style="max-width:500px;">
        <div class="cp-card-head">
            <h3>Change Your Password</h3>
        </div>
        <div style="padding:30px;">
            <form action="{{ route('customer.password_update') }}" method="POST">
                @csrf
                <div style="margin-bottom:20px;">
                    <label class="cp-form-label">Current Password</label>
                    <input type="password" name="old_password" required
                           class="cp-form-input {{ $errors->has('old_password') ? 'is-invalid' : '' }}"
                           placeholder="Enter current password">
                    @error('old_password') <div style="font-size:12px;color:var(--amz-price);margin-top:5px;">{{ $message }}</div> @enderror
                </div>
                <div style="margin-bottom:20px;">
                    <label class="cp-form-label">New Password</label>
                    <input type="password" name="new_password" required
                           class="cp-form-input {{ $errors->has('new_password') ? 'is-invalid' : '' }}"
                           placeholder="At least 6 characters">
                    @error('new_password') <div style="font-size:12px;color:var(--amz-price);margin-top:5px;">{{ $message }}</div> @enderror
                </div>
                <div style="margin-bottom:30px;">
                    <label class="cp-form-label">Confirm New Password</label>
                    <input type="password" name="confirm_password" required
                           class="cp-form-input {{ $errors->has('confirm_password') ? 'is-invalid' : '' }}"
                           placeholder="Repeat new password">
                    @error('confirm_password') <div style="font-size:12px;color:var(--amz-price);margin-top:5px;">{{ $message }}</div> @enderror
                </div>
                <button type="submit" class="cp-btn cp-btn-primary" style="padding:14px; border-radius:50px; width:100%;">
                    Update Password
                </button>
            </form>
        </div>
    </div>

</div>
@endsection
