@extends('layouts.app')
@section('title', "Profile Details")

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h4 class="card-title mb-1">
                                <i class="mdi mdi-account-circle text-primary"></i>
                                {{ __('profile_page.profile_details') }}
                            </h4>
                            <p class="text-muted mb-0">{{ __('profile_page.manage_profile_desc') }}</p>
                        </div>
                    </div>

                    @include('layouts.partials.flash')

                    <div class="row">
                        <!-- User Information Card -->
                        <div class="col-md-6 mb-4">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0"><i class="mdi mdi-account"></i> {{ __('profile_page.user_information') }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-borderless">
                                            <tr>
                                                <th style="width: 30%">{{ __('common.name') }}</th>
                                                <td>{{ $user->name }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.email') }}</th>
                                                <td>{{ $user->email }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.role') }}</th>
                                                <td>
                                                    <span class="badge badge-primary">{{ ucfirst($user->role ?? 'User') }}</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.member_since') }}</th>
                                                <td>{{ $user->created_at->format('d M Y') }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Change Password Card -->
                        <div class="col-md-6 mb-4">
                            <div class="card border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0"><i class="mdi mdi-lock"></i> {{ __('profile_page.change_password') }}</h5>
                                </div>
                                <div class="card-body">
                                    <form method="POST" action="{{ route('profile.password.update') }}">
                                        @csrf
                                        @method('PATCH')

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

                                        <div class="form-group">
                                            <label for="password" class="form-label">{{ __('profile_page.new_password') }}</label>
                                            <input type="password" name="password" id="password"
                                                   class="form-control @error('password') is-invalid @enderror" required>
                                            @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="text-muted">{{ __('profile_page.password_requirement') }}</small>
                                        </div>

                                        <div class="form-group">
                                            <label for="password_confirmation" class="form-label">{{ __('profile_page.confirm_new_password') }}</label>
                                            <input type="password" name="password_confirmation" id="password_confirmation"
                                                   class="form-control" required>
                                        </div>

                                        <button type="submit" class="btn btn-warning">
                                            <i class="mdi mdi-check"></i> {{ __('profile_page.update_password') }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Customer Details Card (if customer exists) -->
                    @if($customer)
                    <div class="row">
                        <div class="col-12">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="mdi mdi-account-box"></i> Customer Details</h5>
                                </div>
                                <div class="card-body">                                    <form method="POST" action="{{ route('profile.customer.update') }}">
                                        @csrf
                                        @method('PATCH')

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="full_name" class="form-label">{{ __('profile_page.full_name') }}</label>
                                                    <input type="text" name="full_name" id="full_name"
                                                           class="form-control @error('full_name') is-invalid @enderror"
                                                           value="{{ old('full_name', $customer->full_name) }}" required>
                                                    @error('full_name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <div class="form-group">
                                                    <label for="company_name" class="form-label">{{ __('profile_page.company_name') }}</label>
                                                    <input type="text" name="company_name" id="company_name"
                                                           class="form-control @error('company_name') is-invalid @enderror"
                                                           value="{{ old('company_name', $customer->company_name) }}"
                                                           placeholder="Optional company name">
                                                    @error('company_name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <div class="form-group">
                                                    <label for="phone_number" class="form-label">{{ __('profile_page.phone_number') }}</label>
                                                    <input type="text" name="phone_number" id="phone_number"
                                                           class="form-control @error('phone_number') is-invalid @enderror"
                                                           value="{{ old('phone_number', $customer->phone_number) }}"
                                                           placeholder="e.g. +62 812 3456 7890">
                                                    @error('phone_number')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="whatsapp" class="form-label">{{ __('profile_page.whatsapp_number') }}</label>
                                                    <input type="text" name="whatsapp" id="whatsapp"
                                                           class="form-control @error('whatsapp') is-invalid @enderror"
                                                           value="{{ old('whatsapp', $customer->whatsapp) }}"
                                                           placeholder="e.g. +62 812 3456 7890">
                                                    @error('whatsapp')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <div class="form-group">
                                                    <label for="address" class="form-label">{{ __('profile_page.address') }}</label>
                                                    <textarea name="address" id="address"
                                                              class="form-control @error('address') is-invalid @enderror"
                                                              rows="4" placeholder="Enter your full address">{{ old('address', $customer->address) }}</textarea>
                                                    @error('address')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label">Email</label>
                                            <input type="email" class="form-control" value="{{ $customer->email }}" disabled>
                                            <small class="text-muted">Email cannot be changed from this page</small>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label">{{ __('profile_page.point_balance') }}</label>
                                            <input type="text" class="form-control" value="{{ number_format($customer->point_balance ?? 0, 0, ',', '.') }} points" disabled>
                                            <small class="text-muted">Your current loyalty points</small>
                                        </div>

                                        <button type="submit" class="btn btn-success">
                                            <i class="mdi mdi-check"></i> Update Customer Details
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-info">
                                <i class="mdi mdi-information"></i>
                                <strong>No Customer Profile Found</strong><br>
                                You don't have an associated customer profile. Customer details are only available for users with customer accounts.
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Password strength indicator
    $('#password').on('input', function() {
        const password = $(this).val();
        let strength = 0;
        let feedback = '';

        if (password.length >= 8) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/[0-9]/.test(password)) strength++;
        if (/[^A-Za-z0-9]/.test(password)) strength++;

        const strengthBar = $('#password-strength');
        strengthBar.remove(); // Remove existing bar

        let strengthClass = '';
        switch(strength) {
            case 0:
            case 1:
                strengthClass = 'bg-danger';
                feedback = 'Very Weak';
                break;
            case 2:
                strengthClass = 'bg-warning';
                feedback = 'Weak';
                break;
            case 3:
                strengthClass = 'bg-info';
                feedback = 'Fair';
                break;
            case 4:
                strengthClass = 'bg-success';
                feedback = 'Good';
                break;
            case 5:
                strengthClass = 'bg-primary';
                feedback = 'Strong';
                break;
        }

        if (password.length > 0) {
            $(this).after(`
                <div id="password-strength" class="mt-1">
                    <div class="progress" style="height: 4px;">
                        <div class="progress-bar ${strengthClass}" style="width: ${strength * 20}%"></div>
                    </div>
                    <small class="text-muted">Password strength: ${feedback}</small>
                </div>
            `);
        }
    });

    // Confirm password match
    $('#password_confirmation').on('input', function() {
        const password = $('#password').val();
        const confirmation = $(this).val();

        if (confirmation.length > 0) {
            if (password === confirmation) {
                $(this).removeClass('is-invalid').addClass('is-valid');
            } else {
                $(this).removeClass('is-valid').addClass('is-invalid');
            }
        }
    });
});
</script>
@endpush