@extends('layouts.admin')

@section('title', trans('admin.Profile'))
@section('page-title', trans('admin.Profile'))
@section('page-subtitle', trans('admin.Manage your account information'))

@section('content')

<section class="dpage active">
    <div class="page-head"><div><h2>{{ trans('admin.Profile') }}</h2><p>{{ trans('admin.Manage your account information') }}</p></div></div>

    <div class="card card-pad" style="margin-bottom:16px;">
        <div class="profile-head">
            <div class="p-avatar-lg">
                <img src="{{ $data->getImage() }}" alt="{{ $data->name }}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">
                <div class="edit-dot" onclick="document.getElementById('avatarFile').click()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20l3.5-1L19 7.5a1.8 1.8 0 000-2.5l-1-1a1.8 1.8 0 00-2.5 0L4 15.5z"/></svg></div>
            </div>
            <div>
                <h3 style="font-size:20px;">{{ $data->name }}</h3>
                <div class="role-badge">
                    @if($data->super)
                        ⚡ {{ trans('admin.Super admin') }} · {{ trans('admin.full access') }}
                    @else
                        ⚡ {{ $data->getRole() ?: ucfirst($data->type) }}
                    @endif
                </div>
            </div>
        </div>

        <form id="profileForm">
            @csrf
            <div class="form-grid">
                <div class="field"><label>{{ trans('admin.Full name') }}</label><input type="text" name="name" id="profName" value="{{ $data->name }}"></div>
                <div class="field"><label>{{ trans('admin.Email') }}</label><input type="email" name="email" id="profEmail" value="{{ $data->email }}"></div>
                <div class="field"><label>{{ trans('admin.Phone') }}</label><input type="tel" name="phone" id="profPhone" value="{{ $data->phone }}"></div>
                <div class="field"><label>{{ trans('admin.Title') }}</label><input type="text" name="title" id="profTitle" value="{{ $data->title }}"></div>
                <div class="field full"><label>{{ trans('admin.Bio') }}</label><textarea name="bio" id="profBio">{{ $data->bio }}</textarea></div>
            </div>
            <div class="hint" id="profileErrors" style="color:var(--red);margin-top:10px;"></div>
            <div style="margin-top:18px;display:flex;gap:10px;">
                <button type="submit" class="btn btn-primary" id="profileSubmitBtn">{{ trans('admin.Save changes') }}</button>
            </div>
        </form>
    </div>

    <form id="avatarForm" action="{{ route('dashboard.upload.image') }}" method="POST" enctype="multipart/form-data" style="display:none;">
        @csrf
        <input type="file" name="image" id="avatarFile" accept="image/*" onchange="document.getElementById('avatarForm').submit()">
    </form>

    <div class="card card-pad">
        <h3 style="font-size:15px;margin-bottom:6px;">{{ trans('admin.Change password') }}</h3>
        <form id="passwordForm">
            @csrf
            <div class="form-grid" style="margin-top:14px;">
                <div class="field full"><label>{{ trans('admin.Current password') }}</label><input type="password" name="current_password" id="currentPassword" placeholder="••••••••"></div>
                <div class="field"><label>{{ trans('admin.New password') }}</label><input type="password" name="password" id="newPassword" placeholder="••••••••"></div>
                <div class="field"><label>{{ trans('admin.Confirm new password') }}</label><input type="password" name="password_confirmation" id="confirmPassword" placeholder="••••••••"></div>
            </div>
            <div class="hint" id="passwordErrors" style="color:var(--red);margin-top:10px;"></div>
            <div style="margin-top:16px;"><button type="submit" class="btn btn-soft" id="passwordSubmitBtn">{{ trans('admin.Update password') }}</button></div>
        </form>
    </div>

    {{-- <div class="card" style="margin-top:16px;">
        <div class="card-head"><h3>{{ trans('admin.Activity logs') }}</h3></div>
        <div class="table-wrap">
            <table class="table" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{{ trans('admin.Created by') }}</th>
                        <th>{{ trans('admin.Subject') }}</th>
                        <th>{{ trans('admin.Action') }}</th>
                        <th>{{ trans('admin.Created at') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($data->Activity_logs as $log)
                        <tr>
                            <td>{{ $log->id }}</td>
                            <td>{{ $log->causer->name ?? '—' }}</td>
                            <td>{{ $log->subject_type }}</td>
                            <td>{{ trans('admin.' . $log->description) }}</td>
                            <td>{{ $log->created_at }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5">{{ trans('admin.No recent activity') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div> --}}
</section>

@endsection

@section('script')
<script type="text/javascript">
    $('#profileForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#profileSubmitBtn');
        $('#profileErrors').html('');
        $btn.prop('disabled', true);

        $.ajax({
            url: "{{ route('dashboard.profile.update') }}",
            method: 'POST',
            data: $(this).serialize(),
            success: function(){
                dashToast('✓', "{{ trans('admin.success') }}");
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#profileErrors').html(html);
                } else {
                    dashToast('✕', "{{ trans('admin.faild') }}");
                }
            },
            complete: function(){ $btn.prop('disabled', false); }
        });
    });

    $('#passwordForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#passwordSubmitBtn');
        $('#passwordErrors').html('');
        $btn.prop('disabled', true);

        $.ajax({
            url: "{{ route('dashboard.profile.password.update') }}",
            method: 'POST',
            data: $(this).serialize(),
            success: function(){
                dashToast('🔒', "{{ trans('admin.success') }}");
                document.getElementById('passwordForm').reset();
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors || {};
                    var html = xhr.responseJSON.message ? xhr.responseJSON.message + '<br>' : '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#passwordErrors').html(html);
                } else {
                    dashToast('✕', "{{ trans('admin.faild') }}");
                }
            },
            complete: function(){ $btn.prop('disabled', false); }
        });
    });
</script>
@endsection