@extends('backend.app')

@section('title', 'Change Email')

@push('style')
<style>
    .email-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }

    .email-card .card-header {
        background: transparent;
        border-bottom: 1px solid #eee;
        padding: 20px 25px;
    }

    .email-card .card-body {
        padding: 30px 25px;
    }

    .form-label {
        font-weight: 600;
        margin-bottom: 6px;
    }

    .form-control {
        height: 45px;
        border-radius: 8px;
    }

    .btn-main {
        background: #DA8661;
        border: none;
        color: white;
        padding: 10px 22px;
        border-radius: 8px;
        font-weight: 500;
    }

    .btn-main:hover {
        background: #c87552;
        color: white;
    }

    .page-subtitle {
        color: #777;
        font-size: 14px;
        margin-top: 5px;
    }

    .alert {
        border-radius: 8px;
    }
</style>
@endpush


@section('content')
<div class="app-content content">
    <div class="container-fluid">

        <div class="row justify-content-center">
            <div class="col-lg-5">

                <div class="card email-card">

                    {{-- Header --}}
                    <div class="card-header">
                        <h4 class="mb-1">Change Email Address</h4>
                        <p class="page-subtitle mb-0">
                            Update your email securely by confirming your password.
                        </p>
                    </div>

                    <div class="card-body">

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

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

                        {{-- Form --}}
                        <form method="POST" action="{{ route('profile.email.change.send') }}">
                            @csrf

                            <div class="mb-4">
                                <label class="form-label">Current Password</label>
                                <input type="password"
                                       name="password"
                                       class="form-control"
                                       placeholder="Enter your current password"
                                       required>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">New Email Address</label>
                                <input type="email"
                                       name="new_email"
                                       class="form-control"
                                       placeholder="Enter your new email"
                                       required>
                            </div>

                            <button class="btn btn-main w-100">
                                Request Email Change
                            </button>
                        </form>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
@endsection