@extends('customer.dashboard.layout')

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

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <h2 class="mb-1">Profile Settings</h2>
        <p class="text-muted">Manage your account information</p>
    </div>
</div>

<div class="row">
    <!-- Profile Information -->
    <div class="col-md-6 mb-4">
        <div class="content-card">
            <h3 class="h5 mb-4">
                <i class="bi bi-person-circle me-2"></i>Profile Information
            </h3>

            <form method="POST" action="{{ route('customer.profile.update', $subdomain) }}">
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label for="name" class="form-label">Full Name</label>
                    <input type="text"
                           class="form-control @error('name') is-invalid @enderror"
                           id="name"
                           name="name"
                           value="{{ old('name', $customer->name) }}"
                           required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="email" class="form-label">Email Address</label>
                    <input type="email"
                           class="form-control"
                           id="email"
                           value="{{ $customer->email }}"
                           disabled>
                    <small class="text-muted">Email cannot be changed</small>
                </div>

                <div class="mb-3">
                    <label for="phone" class="form-label">Phone Number</label>
                    <input type="tel"
                           class="form-control @error('phone') is-invalid @enderror"
                           id="phone"
                           name="phone"
                           value="{{ old('phone', $customer->phone) }}">
                    @error('phone')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="address_line_1" class="form-label">Address Line 1</label>
                    <input type="text"
                           class="form-control @error('address_line_1') is-invalid @enderror"
                           id="address_line_1"
                           name="address_line_1"
                           value="{{ old('address_line_1', $customer->address_line_1) }}">
                    @error('address_line_1')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="address_line_2" class="form-label">Address Line 2</label>
                    <input type="text"
                           class="form-control @error('address_line_2') is-invalid @enderror"
                           id="address_line_2"
                           name="address_line_2"
                           value="{{ old('address_line_2', $customer->address_line_2) }}">
                    @error('address_line_2')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="city" class="form-label">City</label>
                        <input type="text"
                               class="form-control @error('city') is-invalid @enderror"
                               id="city"
                               name="city"
                               value="{{ old('city', $customer->city) }}">
                        @error('city')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="state" class="form-label">State</label>
                        <input type="text"
                               class="form-control @error('state') is-invalid @enderror"
                               id="state"
                               name="state"
                               value="{{ old('state', $customer->state) }}">
                        @error('state')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="postal_code" class="form-label">Postal Code</label>
                        <input type="text"
                               class="form-control @error('postal_code') is-invalid @enderror"
                               id="postal_code"
                               name="postal_code"
                               value="{{ old('postal_code', $customer->postal_code) }}">
                        @error('postal_code')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="country" class="form-label">Country</label>
                        <input type="text"
                               class="form-control @error('country') is-invalid @enderror"
                               id="country"
                               name="country"
                               value="{{ old('country', $customer->country ?? 'Malaysia') }}">
                        @error('country')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-2"></i>Update Profile
                </button>
            </form>
        </div>
    </div>

    <!-- Change Password -->
    <div class="col-md-6 mb-4">
        <div class="content-card">
            <h3 class="h5 mb-4">
                <i class="bi bi-shield-lock me-2"></i>Change Password
            </h3>

            <form method="POST" action="{{ route('customer.password.update', $subdomain) }}">
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label for="current_password" class="form-label">Current Password</label>
                    <input type="password"
                           class="form-control @error('current_password') is-invalid @enderror"
                           id="current_password"
                           name="current_password"
                           required>
                    @error('current_password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">New Password</label>
                    <input type="password"
                           class="form-control @error('password') is-invalid @enderror"
                           id="password"
                           name="password"
                           required>
                    <small class="text-muted">Minimum 8 characters</small>
                    @error('password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="password_confirmation" class="form-label">Confirm New Password</label>
                    <input type="password"
                           class="form-control"
                           id="password_confirmation"
                           name="password_confirmation"
                           required>
                </div>

                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-key me-2"></i>Change Password
                </button>
            </form>
        </div>

        <!-- Account Information Card -->
        <div class="content-card mt-4">
            <h3 class="h5 mb-3">
                <i class="bi bi-info-circle me-2"></i>Account Information
            </h3>

            <div class="mb-3">
                <strong>Customer ID:</strong>
                <span class="text-muted">#{{ $customer->id }}</span>
            </div>

            <div class="mb-3">
                <strong>Member Since:</strong>
                <span class="text-muted">{{ $customer->created_at->format('F d, Y') }}</span>
            </div>

            <div class="mb-3">
                <strong>Account Type:</strong>
                <span class="badge bg-primary">{{ ucfirst($customer->customer_type) }}</span>
            </div>

            <div class="mb-0">
                <strong>Total Orders:</strong>
                <span class="text-muted">{{ $customer->total_orders }}</span>
            </div>
        </div>
    </div>
</div>
@endsection