@extends('layouts.reseller')

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

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0">Reseller Profile</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('reseller.settings.profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group 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', auth()->user()->name) }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="email" class="form-label">Email Address *</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                       id="email" name="email" value="{{ old('email', auth()->user()->email) }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="mobile" class="form-label">Mobile Number *</label>
                                <input type="text" class="form-control @error('mobile') is-invalid @enderror" 
                                       id="mobile" name="mobile" value="{{ old('mobile', auth()->user()->mobile) }}" required>
                                @error('mobile')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="company_name" class="form-label">Company Name *</label>
                                <input type="text" class="form-control @error('company_name') is-invalid @enderror" 
                                       id="company_name" name="company_name" 
                                       value="{{ old('company_name', auth()->user()->reseller->company_name) }}" required>
                                @error('company_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="address" class="form-label">Company Address</label>
                        <textarea class="form-control @error('address') is-invalid @enderror" 
                                  id="address" name="address" rows="3">{{ old('address', auth()->user()->reseller->address) }}</textarea>
                        @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="logo" class="form-label">Company Logo</label>
                                <input type="file" class="form-control @error('logo') is-invalid @enderror file-upload-preview" 
                                       id="logo" name="logo" accept="image/*"
                                       data-preview="#logoPreview">
                                @error('logo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Recommended size: 200x60 pixels. Max file size: 2MB.
                                </small>
                                
                                @if(auth()->user()->reseller->logo)
                                <div class="mt-2">
                                    <img src="{{ asset('storage/' . auth()->user()->reseller->logo) }}" 
                                         id="logoPreview" class="img-thumbnail" style="max-height: 60px;">
                                </div>
                                @else
                                <div class="mt-2">
                                    <img src="#" id="logoPreview" class="img-thumbnail d-none" style="max-height: 60px;">
                                </div>
                                @endif
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="theme_color" class="form-label">Theme Color</label>
                                <input type="color" class="form-control @error('theme_color') is-invalid @enderror" 
                                       id="theme_color" name="theme_color" 
                                       value="{{ old('theme_color', auth()->user()->reseller->theme_color) }}">
                                @error('theme_color')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    This color will be used in your subdomain theme
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="footer_text" class="form-label">Footer Text</label>
                        <textarea class="form-control @error('footer_text') is-invalid @enderror" 
                                  id="footer_text" name="footer_text" rows="2"
                                  placeholder="Enter footer text for your subdomain">{{ old('footer_text', auth()->user()->reseller->footer_text) }}</textarea>
                        @error('footer_text')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">
                            This text will appear in the footer of your subdomain
                        </small>
                    </div>

                    <hr>

                    <h6 class="mb-3">Subdomain Information</h6>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Subdomain</label>
                                <input type="text" class="form-control" 
                                       value="{{ auth()->user()->reseller->subdomain }}.smsgateway.com" readonly>
                                <small class="form-text text-muted">
                                    Your custom subdomain URL
                                </small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Commission Rate</label>
                                <input type="text" class="form-control" 
                                       value="{{ auth()->user()->reseller->commission_rate }}%" readonly>
                                <small class="form-text text-muted">
                                    Your commission rate on user SMS
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Profile Information</h6>
                        <ul class="mb-0">
                            <li>Your profile information will be visible to your users</li>
                            <li>Logo and theme color will be used in your subdomain</li>
                            <li>Subdomain and commission rate cannot be changed</li>
                            <li>Keep your contact information up to date</li>
                        </ul>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('reseller.dashboard') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Update Profile
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Change Password -->
        <div class="card shadow mt-4">
            <div class="card-header bg-warning text-white py-3">
                <h5 class="mb-0">Change Password</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('reseller.settings.password.update') }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="current_password" class="form-label">Current Password *</label>
                                <div class="input-group">
                                    <input type="password" class="form-control @error('current_password') is-invalid @enderror" 
                                           id="current_password" name="current_password" required>
                                    <button type="button" class="btn btn-outline-secondary toggle-password" 
                                            data-target="current_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('current_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="new_password" class="form-label">New Password *</label>
                                <div class="input-group">
                                    <input type="password" class="form-control @error('new_password') is-invalid @enderror" 
                                           id="new_password" name="new_password" required>
                                    <button type="button" class="btn btn-outline-secondary toggle-password" 
                                            data-target="new_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('new_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="new_password_confirmation" class="form-label">Confirm Password *</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" 
                                           id="new_password_confirmation" name="new_password_confirmation" required>
                                    <button type="button" class="btn btn-outline-secondary toggle-password" 
                                            data-target="new_password_confirmation">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Important:</strong> Use a strong password with at least 8 characters including uppercase, lowercase, numbers, and symbols.
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-key me-2"></i>Change Password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Toggle password visibility
    $('.toggle-password').click(function() {
        const target = $(this).data('target');
        const input = $('#' + target);
        const icon = $(this).find('i');
        
        if (input.attr('type') === 'password') {
            input.attr('type', 'text');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            input.attr('type', 'password');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });

    // File upload preview
    $('.file-upload-preview').change(function() {
        const input = $(this);
        const preview = $(this).data('preview');
        const file = input[0].files[0];
        
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $(preview).attr('src', e.target.result).removeClass('d-none');
            }
            reader.readAsDataURL(file);
        }
    });
});
</script>
@endpush