@extends('adminlte::page')

@section('title', 'Profile')

@section('content_header')
    <h1><i class="fas fa-user-circle"></i> My Profile</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-md-4">
            <!-- Profile Image Card -->
            <div class="card card-primary card-outline">
                <div class="card-body box-profile">
                    <div class="text-center">
                        <img class="profile-user-img img-fluid img-circle" 
                             id="profile-image"
                             src="{{ $user->profile_photo ? asset('storage/' . $user->profile_photo) : asset('vendor/adminlte/dist/img/avatar5.png') }}" 
                             alt="User profile picture"
                             style="width: 150px; height: 150px; object-fit: cover;">
                    </div>

                    <h3 class="profile-username text-center">{{ $user->name }}</h3>

                    <p class="text-muted text-center">{{ $user->email }}</p>

                    <form id="photoForm" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="profile_photo">Change Profile Photo</label>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="profile_photo" name="profile_photo" accept="image/*">
                                    <label class="custom-file-label" for="profile_photo">Choose file</label>
                                </div>
                            </div>
                            <small class="form-text text-muted">Max size: 2MB (jpg, jpeg, png, gif)</small>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">
                            <i class="fas fa-upload"></i> Upload Photo
                        </button>
                    </form>
                </div>
            </div>

            <!-- Account Info -->
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Account Information</h3>
                </div>
                <div class="card-body">
                    <strong><i class="fas fa-calendar mr-1"></i> Member Since</strong>
                    <p class="text-muted">{{ $user->created_at->format('d M Y') }}</p>
                    <hr>
                    <strong><i class="fas fa-check-circle mr-1"></i> Email Status</strong>
                    <p class="text-muted">
                        @if($user->email_verified_at)
                            <span class="badge badge-success">Verified</span>
                        @else
                            <span class="badge badge-warning">Not Verified</span>
                        @endif
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <!-- Update Profile Card -->
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Update Profile Information</h3>
                </div>
                <form id="profileForm">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="name">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ $user->name }}" required>
                            <span class="text-danger error-message" id="error-name"></span>
                        </div>
                        <div class="form-group">
                            <label for="email">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="email" name="email" value="{{ $user->email }}" required>
                            <span class="text-danger error-message" id="error-email"></span>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Update Profile
                        </button>
                    </div>
                </form>
            </div>

            <!-- Change Password Card -->
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title">Change Password</h3>
                </div>
                <form id="passwordForm">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="current_password">Current Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="current_password" name="current_password" required>
                            <span class="text-danger error-message" id="error-current_password"></span>
                        </div>
                        <div class="form-group">
                            <label for="new_password">New Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="new_password" name="new_password" required>
                            <small class="form-text text-muted">Minimum 8 characters</small>
                            <span class="text-danger error-message" id="error-new_password"></span>
                        </div>
                        <div class="form-group">
                            <label for="new_password_confirmation">Confirm New Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="new_password_confirmation" name="new_password_confirmation" required>
                            <span class="text-danger error-message" id="error-new_password_confirmation"></span>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-key"></i> Change Password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <p>Developed By: <strong>Shahril Mohd Isa</strong> | Year: <strong>{{ date('Y') }}</strong></p>
    </footer>
@stop

@section('css')
    <style>
        html, body {
            height: 100%;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .content-wrapper {
            flex: 1;
        }

        footer {
            margin-top: auto;
            border-top: 1px solid #e0e0e0;
            padding: 20px 0;
            text-align: center;
            color: #999;
            font-size: 0.9rem;
        }

        footer p {
            margin: 0;
        }
    </style>
@stop

@section('js')
    <script>
        // Update Profile
        $('#profileForm').on('submit', function(e) {
            e.preventDefault();
            $('.error-message').text('');

            $.ajax({
                url: "{{ route('profile.update') }}",
                type: 'POST',
                data: $(this).serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $(`#error-${key}`).text(value[0]);
                        });
                    } else {
                        Swal.fire('Error!', 'Something went wrong', 'error');
                    }
                }
            });
        });

        // Update Profile Photo
        $('#photoForm').on('submit', function(e) {
            e.preventDefault();
            
            let formData = new FormData(this);
            
            $.ajax({
                url: "{{ route('profile.updatePhoto') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('#profile-image').attr('src', response.photo_url);
                        $('#photoForm')[0].reset();
                        $('.custom-file-label').text('Choose file');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMsg = '';
                        $.each(errors, function(key, value) {
                            errorMsg += value[0] + '\n';
                        });
                        Swal.fire('Validation Error!', errorMsg, 'error');
                    } else {
                        Swal.fire('Error!', 'Something went wrong', 'error');
                    }
                }
            });
        });

        // Change Password
        $('#passwordForm').on('submit', function(e) {
            e.preventDefault();
            $('.error-message').text('');

            $.ajax({
                url: "{{ route('profile.updatePassword') }}",
                type: 'POST',
                data: $(this).serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('#passwordForm')[0].reset();
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        if (xhr.responseJSON.errors) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                $(`#error-${key}`).text(value[0]);
                            });
                        } else {
                            Swal.fire('Error!', xhr.responseJSON.message, 'error');
                        }
                    } else {
                        Swal.fire('Error!', 'Something went wrong', 'error');
                    }
                }
            });
        });

        // Custom file input label
        $('.custom-file-input').on('change', function() {
            let fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').html(fileName);
        });
    </script>
@stop