@extends('layouts.app')

@section('content')
<div class="container py-5">
    <!-- Notifications -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <i class="bi bi-x-circle-fill me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <!-- Sidebar -->
        <div class="col-lg-3">
            <div class="card shadow-sm border-0 text-center mb-4">
                <div class="card-body">
                    <img src="{{ $user->profile_picture ? Storage::url($user->profile_picture) : asset('default-avatar.jpg') }}" 
                         alt="User Avatar" 
                         class="rounded-circle shadow mb-3" 
                         style="width: 120px; height: 120px; object-fit: cover;">
                    <h5 class="mb-1">{{ $user->first_name }} {{ $user->last_name }}</h5>
                    <span class="badge bg-primary text-uppercase">{{ ucfirst($user->role) }}</span>

                    <form action="{{ route('user.updateProfilePicture') }}" method="POST" enctype="multipart/form-data" class="mt-3">
                        @csrf
                        <label class="form-label fw-bold small">Upload Profile Picture</label>
                        <div class="input-group">
                            <input type="file" name="profile_picture" class="form-control form-control-sm" accept="image/*" required>
                            <button type="submit" class="btn btn-primary btn-sm">Upload</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-gradient text-white text-center">
                    <h6 class="mb-0">Quick Links</h6>
                </div>
                <div class="list-group list-group-flush">
                    <a href="#profile-info" class="list-group-item list-group-item-action"><i class="bi bi-person me-2"></i>Profile Information</a>
                    <a href="#virtual-phones" class="list-group-item list-group-item-action"><i class="bi bi-telephone me-2"></i>Virtual Phones</a>
                    <a href="#notifications" class="list-group-item list-group-item-action"><i class="bi bi-bell me-2"></i>Notification Settings</a>
                    <a href="#mls-ids" class="list-group-item list-group-item-action"><i class="bi bi-card-list me-2"></i>Manage MLS IDs</a>
                    <a href="#change-email" class="list-group-item list-group-item-action"><i class="bi bi-envelope me-2"></i>Change Email</a>
                    <a href="#change-password" class="list-group-item list-group-item-action"><i class="bi bi-lock me-2"></i>Change Password</a>
                    <a href="#brokerage-settings" class="list-group-item list-group-item-action"><i class="bi bi-building me-2"></i>Brokerage/Team Settings</a>
                    <a href="#office-address" class="list-group-item list-group-item-action"><i class="bi bi-geo me-2"></i>Office Address</a>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-9">
            <!-- Profile Information -->
            <div class="card shadow-sm border-0 mb-4" id="profile-info">
                <div class="card-header bg-gradient text-white">
                    <h6 class="mb-0">Profile Information</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.updateProfile') }}" method="POST" class="row g-3">
                        @csrf
                        <div class="col-md-6">
                            <label for="firstName" class="form-label">First Name</label>
                            <input type="text" class="form-control" id="firstName" name="first_name" value="{{ $user->first_name }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="lastName" class="form-label">Last Name</label>
                            <input type="text" class="form-control" id="lastName" name="last_name" value="{{ $user->last_name }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="phone" class="form-label">Phone</label>
                            <input type="text" class="form-control" id="phone" name="phone" value="{{ $user->phone ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label for="timezone" class="form-label">Timezone</label>
                            <select class="form-select" id="timezone" name="timezone">
                                <option value="Pacific" {{ $user->timezone === 'Pacific' ? 'selected' : '' }}>Pacific</option>
                                <option value="Mountain" {{ $user->timezone === 'Mountain' ? 'selected' : '' }}>Mountain</option>
                                <option value="Central" {{ $user->timezone === 'Central' ? 'selected' : '' }}>Central</option>
                                <option value="Eastern" {{ $user->timezone === 'Eastern' ? 'selected' : '' }}>Eastern</option>
                                <option value="Hawaii" {{ $user->timezone === 'Hawaii' ? 'selected' : '' }}>Hawaii</option>
                                <option value="Alaska" {{ $user->timezone === 'Alaska' ? 'selected' : '' }}>Alaska</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="agentLicense" class="form-label">Agent License #</label>
                            <input type="text" class="form-control" id="agentLicense" name="agent_license" value="{{ $user->agent_license ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label for="stateLicenses" class="form-label">License # for States</label>
                            <input type="text" class="form-control" id="stateLicenses" name="state_licenses" value="{{ $user->state_licenses ?? '' }}">
                            <small class="text-muted">Separate state licenses with commas.</small>
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-gradient w-100">Save Profile</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Virtual Phones Section -->
            <div class="card shadow-sm border-0 mb-4" id="virtual-phones">
                <div class="card-header bg-gradient text-white">
                    <h6 class="mb-0">Virtual Phones</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.updateVirtualPhones') }}" method="POST" enctype="multipart/form-data" class="row g-3">
                        @csrf
                        <div class="col-md-6">
                            <label for="preferredAreaCode" class="form-label">Preferred Area Code</label>
                            <input type="text" class="form-control" id="preferredAreaCode" name="preferred_area_code" value="{{ $user->preferred_area_code ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label for="rodeoAgentPhone" class="form-label">RodeoAgent Phone</label>
                            <input type="text" class="form-control" id="rodeoAgentPhone" name="rodeo_agent_phone" value="{{ $user->rodeo_agent_phone ?? '' }}" readonly style="background-color: #e9ecef; cursor: not-allowed;">
                            <small class="text-muted">This will be used for tracking in marketing campaigns.</small>
                        </div>
                        <div class="col-md-6">
                            <label for="additionalPhone" class="form-label">Additional Phone Number</label>
                            <input type="text" class="form-control" id="additionalPhone" name="additional_phone" value="{{ $user->additional_phone ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label for="voicemailFile" class="form-label">Voicemail File</label>
                            <input type="file" class="form-control" id="voicemailFile" name="voicemail_file">
                            <small class="text-muted">You can upload or record a voicemail file.</small>
                            @if($user->voicemail_file)
                                <audio controls class="mt-2">
                                    <source src="{{ asset('storage/' . $user->voicemail_file) }}" type="audio/mpeg">
                                    Your browser does not support the audio element.
                                </audio>
                            @endif
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-gradient w-100">Save Virtual Phone Settings</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Notifications Section -->
            <div class="card shadow-sm border-0 mb-4" id="notifications">
                <div class="card-header bg-gradient text-white">
                    <h6 class="mb-0">Notification Settings</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.updateNotifications') }}" method="POST" class="row g-3">
                        @csrf
                        <div class="col-md-12">
                            <p>Choose where to receive notifications:</p>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="notify_email" id="notifyEmail" value="1" {{ $user->notify_email ? 'checked' : '' }}>
                                <label class="form-check-label" for="notifyEmail">Email: {{ $user->email }}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="notify_phone" id="notifyPhone" value="1" {{ $user->notify_phone ? 'checked' : '' }}>
                                <label class="form-check-label" for="notifyPhone">Phone: {{ $user->phone }}</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-gradient w-100">Save Notification Settings</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Manage MLS IDs Section -->
            <div class="card shadow-sm border-0 mb-4" id="mls-ids">
                <div class="card-header bg-gradient text-white">
                    <h6 class="mb-0">Manage MLS IDs</h6>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>MLS Name</th>
                                <th>MLS ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($user->mls_ids ?? [] as $mls)
                                <tr>
                                    <td>{{ $mls->name }}</td>
                                    <td>{{ $mls->id }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="2" class="text-center text-muted">No MLS IDs assigned yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Change Email Section -->
            <div class="card shadow-sm border-0 mb-4" id="change-email">
                <div class="card-header bg-gradient text-white">
                    <h6 class="mb-0">Change Email Address</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.changeEmail') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="currentEmail" class="form-label">Current Email</label>
                            <input type="email" class="form-control" id="currentEmail" value="{{ $user->email }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="newEmail" class="form-label">New Email</label>
                            <input type="email" class="form-control" id="newEmail" name="new_email" required>
                        </div>
                        <button type="submit" class="btn btn-gradient w-100">Change Email</button>
                    </form>
                </div>
            </div>

            <!-- Change Password Section -->
            <div class="card shadow-sm border-0 mb-4" id="change-password">
                <div class="card-header bg-gradient text-white">
                    <h6 class="mb-0">Change Password</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.changePassword') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="currentPassword" class="form-label">Current Password</label>
                            <input type="password" class="form-control" id="currentPassword" name="current_password" required>
                        </div>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">New Password</label>
                            <input type="password" class="form-control" id="newPassword" name="new_password" required>
                        </div>
                        <div class="mb-3">
                            <label for="confirmPassword" class="form-label">Confirm Password</label>
                            <input type="password" class="form-control" id="confirmPassword" name="confirm_password" required>
                        </div>
                        <button type="submit" class="btn btn-gradient w-100">Change Password</button>
                    </form>
                </div>
            </div>

            <!-- Brokerage/Team Settings Section -->
            <div class="card shadow-sm border-0 mb-4" id="brokerage-settings">
                <div class="card-header bg-gradient text-white">
                    <h6 class="mb-0">Brokerage/Team Settings</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.updateBrokerageSettings') }}" method="POST" class="row g-3">
                        @csrf
                        <div class="col-md-6">
                            <label for="brokerageName" class="form-label" 
                                   data-bs-toggle="tooltip" 
                                   title="If you have changed brokerages, please notify us at support@rodeoagent.com and your MLS immediately.">
                                Brokerage Name
                            </label>
                            <input type="text" class="form-control" id="brokerageName" name="brokerage_name" 
                                   value="{{ $brokerage->name ?? '' }}" 
                                   @if(!auth()->user()->isAdmin()) 
                                       readonly 
                                       style="background-color: #e9ecef; cursor: not-allowed;" 
                                   @endif>
                        </div>
                        <div class="col-md-6">
                            <label for="brokerageLicense" class="form-label">Brokerage License #</label>
                            <input type="text" class="form-control" id="brokerageLicense" name="brokerage_license" value="{{ $brokerage->license ?? '' }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="brokerageTimezone" class="form-label">Brokerage Timezone</label>
                            <select class="form-select" id="brokerageTimezone" name="brokerage_timezone">
                                <option value="Pacific" {{ $brokerage->timezone === 'Pacific' ? 'selected' : '' }}>Pacific</option>
                                <option value="Mountain" {{ $brokerage->timezone === 'Mountain' ? 'selected' : '' }}>Mountain</option>
                                <option value="Central" {{ $brokerage->timezone === 'Central' ? 'selected' : '' }}>Central</option>
                                <option value="Eastern" {{ $brokerage->timezone === 'Eastern' ? 'selected' : '' }}>Eastern</option>
                                <option value="Hawaii" {{ $brokerage->timezone === 'Hawaii' ? 'selected' : '' }}>Hawaii</option>
                                <option value="Alaska" {{ $brokerage->timezone === 'Alaska' ? 'selected' : '' }}>Alaska</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="teamName" class="form-label">Team Name</label>
                            <input type="text" class="form-control" id="teamName" name="team_name" value="{{ $brokerage->team_name ?? '' }}">
                        </div>
                        <div class="col-md-12">
                            <label for="brokerageLogo" class="form-label">Brokerage Logo</label>
                            <input type="file" class="form-control" id="brokerageLogo" name="brokerage_logo" accept="image/*">
                            <small class="text-muted">Upload your brokerage logo (JPEG, PNG).</small>
                            @if($user->brokerage_logo)
                                <div class="mt-3">
                                    <img src="{{ Storage::url($user->brokerage_logo) }}" alt="Brokerage Logo" style="max-width: 150px; height: auto;" class="shadow-sm">
                                </div>
                            @endif
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-gradient w-100">Save Brokerage Settings</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Office Address Section -->
            <div class="card shadow-sm border-0 mb-4" id="office-address">
                <div class="card-header bg-gradient text-white">
                    <h6 class="mb-0">Office Address</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.updateOfficeAddress') }}" method="POST" class="row g-3">
                        @csrf
                        <div class="col-md-6">
                            <label for="streetAddress" class="form-label">Street Address</label>
                            <input type="text" class="form-control" id="streetAddress" name="street_address" value="{{ $user->street_address ?? '' }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="city" class="form-label">City</label>
                            <input type="text" class="form-control" id="city" name="city" value="{{ $user->city ?? '' }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="state" class="form-label">State</label>
                            <input type="text" class="form-control" id="state" name="state" value="{{ $user->state ?? '' }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="zip" class="form-label">Zip Code</label>
                            <input type="text" class="form-control" id="zip" name="zip" value="{{ $user->zip ?? '' }}" required>
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-gradient w-100">Update Data</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Enable Bootstrap tooltips
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>

<style>
    body {
        background-color: #f8f9fa;
    }
    .card {
        border-radius: 12px;
    }
    .card-header {
        background: linear-gradient(135deg, #4caf50, #388e3c);
        color: white;
    }
    .btn-gradient {
        background: linear-gradient(135deg, #4caf50, #388e3c);
        color: white;
        border: none;
    }
    .btn-gradient:hover {
        background: linear-gradient(135deg, #388e3c, #2e7d32);
    }
</style>
@endsection