@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-column-fluid">

    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div class="app-container container-fluid d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                    {{ isset($editUser) ? 'Edit Profile' : 'Add Agent' }}
                </h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                    </li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">{{ isset($editUser) ? 'Edit Profile' : 'Add Agent' }}</li>
                </ul>
            </div>
        </div>
    </div>

    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div class="app-container container-fluid">

            {{-- Toast Success --}}
            @if(session('success'))
                <div id="successToast" class="position-fixed top-0 end-0 p-3" style="z-index: 9999;">
                    <div class="toast show align-items-center text-white bg-success border-0 shadow" role="alert">
                        <div class="d-flex">
                            <div class="toast-body">
                                <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                            </div>
                            <button type="button" class="btn-close btn-close-white me-2 m-auto"
                                    data-bs-dismiss="toast"></button>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Error --}}
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show mb-5">
                    <i class="bi bi-x-circle me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            {{-- Validation Errors --}}
            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show mb-5">
                    <strong>Whoops!</strong> There were some problems with your input.
                    <ul class="mb-0 mt-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="card">
                <div class="card-header border-bottom px-6 pt-6 pb-4">
                    <h5 class="card-title fw-bold text-gray-800 mb-0">
                        {{ isset($editUser) ? 'Edit Profile' : 'Add Agent' }}
                    </h5>
                </div>
                <div class="card-body px-6 py-8">

                    {{--
                    ┌─────────────────────────────────────────────────────┐
                    │  Form action is role-aware:                         │
                    │  • admin  → users.save  (UserManagementController)  │
                    │  • others → profile.update.self (UserProfileController) │
                    └─────────────────────────────────────────────────────┘
                    --}}
                    @php
                        $isAdmin   = auth()->user()->role?->role_name === 'admin';
                        $formAction = $isAdmin ? route('users.save') : route('profile.update.self');
                    @endphp

                    <form method="POST" action="{{ $formAction }}" enctype="multipart/form-data">
                        @csrf
                        @if(isset($editUser))
                            <input type="hidden" name="id" value="{{ $editUser->id }}">
                        @endif

                        {{-- ── Avatar ─────────────────────────────────────────── --}}
                        <div class="mb-8 pb-6 border-bottom">
                            <h6 class="fw-bold text-gray-700 mb-4">Profile Photo</h6>
                            <div class="d-flex align-items-center gap-5">
                                <img id="uploadedAvatar"
                                     src="{{ isset($editUser) && $editUser->user_image ? asset('uploads/' . $editUser->user_image) : 'https://cdn-icons-png.flaticon.com/512/149/149071.png' }}"
                                     alt="avatar"
                                     class="rounded-circle"
                                     style="width:80px;height:80px;object-fit:cover;border:2px solid #e2e8f0;">
                                <div>
                                    <p class="text-muted small mb-2">Recommended dimensions are 400 x 400 pixels.</p>
                                    <label for="upload" class="btn btn-sm btn-danger me-2 mb-0">
                                        Upload
                                        <input type="file" id="upload" name="user_image" class="d-none"
                                               accept="image/png,image/jpeg"
                                               onchange="previewImage(event)">
                                    </label>
                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                            onclick="resetImage()">Remove</button>
                                    <div class="text-muted small mt-2">Allowed JPG, PNG. Max size 800KB.</div>
                                </div>
                            </div>
                        </div>

                        {{-- ── Basic Information ──────────────────────────────── --}}
                        <h6 class="fw-bold text-gray-700 mb-5">Basic Information</h6>
                        <div class="row g-4 mb-8">

                            <div class="col-md-6">
                                <label class="form-label fw-semibold required">Name</label>
                                <input type="text" name="name"
                                       class="form-control @error('name') is-invalid @enderror"
                                       value="{{ old('name', $editUser->name ?? '') }}" required>
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold required">Email</label>
                                <input type="email" name="email"
                                       class="form-control bg-light @error('email') is-invalid @enderror"
                                       value="{{ old('email', $editUser->email ?? '') }}"
                                       readonly>
                                <small class="text-muted">Email cannot be changed after creation.</small>
                                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Phone</label>
                                <input type="text" name="phone"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       value="{{ old('phone', $editUser->profile->phone ?? '') }}">
                                @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            {{-- Password fields only shown when creating a new user (admin only) --}}
                            @if(!isset($editUser) && $isAdmin)
                            <div class="col-md-6">
                                <label class="form-label fw-semibold required">Password</label>
                                <div class="input-group">
                                    <input type="password" id="passwordField" name="password"
                                           class="form-control @error('password') is-invalid @enderror" required>
                                    <button type="button" class="btn btn-outline-secondary"
                                            onclick="togglePwd('passwordField', this)">
                                        <i class="bi bi-eye-slash"></i>
                                    </button>
                                </div>
                                @error('password')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold required">Confirm Password</label>
                                <div class="input-group">
                                    <input type="password" id="confirmPasswordField" name="password_confirmation"
                                           class="form-control" required>
                                    <button type="button" class="btn btn-outline-secondary"
                                            onclick="togglePwd('confirmPasswordField', this)">
                                        <i class="bi bi-eye-slash"></i>
                                    </button>
                                </div>
                            </div>
                            @endif

                        </div>

                        {{-- ── Account Settings  (Admin only) ─────────────────── --}}
                        @if($isAdmin)
                        <h6 class="fw-bold text-gray-700 mb-5">Account Settings</h6>
                        <div class="row g-4 mb-8">

                            <div class="col-md-6">
                                <label class="form-label fw-semibold required">Currency</label>
                                <select name="cur_id" class="form-select">
                                    <option value="">Select An Option</option>
                                    @foreach($currency as $val)
                                        <option value="{{ $val->id }}"
                                            {{ old('cur_id', $editUser->cur_id ?? '') == $val->id ? 'selected' : '' }}>
                                            {{ $val->currency_name }} ({{ $val->c_shortname }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold required">Status</label>
                                <select name="status" class="form-select">
                                    <option value="1" {{ old('status', $editUser->status ?? '1') == '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ old('status', $editUser->status ?? '') == '0' ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold required">Markup Percentage (%)</label>
                                <input type="number" name="markup" step="0.01" min="0"
                                       class="form-control @error('markup') is-invalid @enderror"
                                       value="{{ old('markup', $editUser->markup ?? '') }}" required>
                                @error('markup')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold required">Credit Limit</label>
                                <input type="text" name="credit_limit"
                                       class="form-control @error('credit_limit') is-invalid @enderror"
                                       value="{{ old('credit_limit', $editUser->credit_limit ?? '') }}" required>
                                @error('credit_limit')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                        </div>
                        @endif
                        {{-- ── End Account Settings ────────────────────────────── --}}

                        {{-- ── Address Information ────────────────────────────── --}}
                        <h6 class="fw-bold text-gray-700 mb-5">Address Information</h6>
                        <div class="row g-4 mb-8">

                            <div class="col-md-12">
                                <label class="form-label">Address</label>
                                <input type="text" name="address" class="form-control"
                                    value="{{ old('address', $editUser->profile->address ?? '') }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Country</label>
                                <input type="text" name="country" class="form-control"
                                    value="{{ old('country', $editUser->profile->country ?? '') }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">State</label>
                                <input type="text" name="state" class="form-control"
                                    value="{{ old('state', $editUser->profile->state ?? '') }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">City</label>
                                <input type="text" name="city" class="form-control"
                                    value="{{ old('city', $editUser->profile->city ?? '') }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Postal Code</label>
                                <input type="text" name="postal_code" class="form-control"
                                    value="{{ old('postal_code', $editUser->profile->postal_code ?? '') }}">
                            </div>

                        </div>

                        {{-- ── Submit ──────────────────────────────────────────── --}}
                        <div class="d-flex justify-content-end border-top pt-5">
                            <a href="{{ route('myprofile') }}" class="btn btn-outline-secondary me-3">Cancel</a>
                            <button type="submit" class="btn btn-danger px-6">
                                {{ isset($editUser) ? 'Update Profile' : 'Create Agent' }}
                            </button>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toast = document.getElementById('successToast');
        if (toast) {
            setTimeout(() => {
                toast.style.transition = 'opacity 0.5s';
                toast.style.opacity = '0';
                setTimeout(() => toast.remove(), 500);
            }, 3000);
        }
    });

    function previewImage(event) {
        const reader = new FileReader();
        reader.onload = () => {
            document.getElementById('uploadedAvatar').src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    }

    function resetImage() {
        document.getElementById('uploadedAvatar').src =
            'https://cdn-icons-png.flaticon.com/512/149/149071.png';
        document.getElementById('upload').value = '';
    }

    function togglePwd(inputId, btn) {
        const input = document.getElementById(inputId);
        const icon  = btn.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('bi-eye-slash', 'bi-eye');
        } else {
            input.type = 'password';
            icon.classList.replace('bi-eye', 'bi-eye-slash');
        }
    }
</script>
@endsection