@extends('layouts.app')

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Account</div>
            <h2 class="page-title">Settings</h2>
        </div>
    </div>
@endsection

@section('content')
@php $isNative = (auth()->user()->source ?? 'native') !== 'workspace'; @endphp

<div class="card">
    <div class="row g-0">
        <div class="col-12 col-md-3 border-end">
            <div class="card-body">
                <h4 class="subheader">Account settings</h4>
                <div class="list-group list-group-transparent" role="tablist">
                    <a href="#my-account" class="list-group-item list-group-item-action active" data-bs-toggle="list" role="tab">My Account</a>
                    <a href="#interface-settings" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab">Interface Settings</a>
                    @if ($isNative)
                        <a href="#danger-zone" class="list-group-item list-group-item-action text-danger" data-bs-toggle="list" role="tab">Delete Account</a>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-12 col-md-9 d-flex flex-column">
            <div class="card-body">
                @if (session('status') && session('status') !== 'password-updated')
                    <div class="alert alert-success">{{ session('status') }}</div>
                @endif

                <div class="tab-content">
                    {{-- My Account --}}
                    <div class="tab-pane active show" id="my-account" role="tabpanel">
                        <h2 class="mb-4">My Account</h2>

                        <h3 class="card-title">Profile Details</h3>
                        @php
                            $avatarInitials = collect(explode(' ', $user->name ?? ''))->filter()
                                ->map(fn ($w) => mb_substr($w, 0, 1))->take(2)->implode('');
                            $avatarImageUrl = $user->avatar ? asset('storage/' . $user->avatar) : null;
                        @endphp
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <span class="avatar avatar-xl" style="background-size:cover;background-position:center;
                                    {{ $avatarImageUrl ? "background-image:url('$avatarImageUrl');color:transparent;" : '' }}">
                                    {{ $avatarImageUrl ? '' : strtoupper($avatarInitials) }}
                                </span>
                            </div>
                            <div class="col-auto">
                                <form method="POST" action="{{ route('profile.avatar.update') }}" enctype="multipart/form-data" id="avatarForm" class="d-inline-block">
                                    @csrf @method('patch')
                                    <input type="file" name="avatar" id="avatarInput" accept="image/*" class="d-none"
                                           onchange="document.getElementById('avatarForm').submit();">
                                    <label for="avatarInput" class="btn" style="cursor:pointer;">Change Avatar</label>
                                </form>
                            </div>
                            @if ($user->avatar)
                                <div class="col-auto">
                                    <form method="POST" action="{{ route('profile.avatar.destroy') }}" class="d-inline-block">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-ghost-danger">Delete Avatar</button>
                                    </form>
                                </div>
                            @endif
                        </div>

                        @php $timezones = collect(\DateTimeZone::listIdentifiers()); @endphp
                        <h3 class="card-title mt-4">Edit Profile</h3>
                        <form method="post" action="{{ route('profile.update') }}">
                            @csrf @method('patch')
                            <div class="row g-3 align-items-end">
                                <div class="col-md">
                                    <div class="form-label">Name</div>
                                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                           value="{{ old('name', $user->name) }}" required>
                                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md">
                                    <div class="form-label">Email</div>
                                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                           value="{{ old('email', $user->email) }}" required>
                                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md">
                                    <div class="form-label">Timezone</div>
                                    <select name="timezone" class="form-select">
                                        @foreach($timezones as $tz)
                                            <option value="{{ $tz }}" {{ old('timezone', $user->timezone ?? config('app.timezone')) == $tz ? 'selected' : '' }}>{{ $tz }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-auto">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </form>

                        @if ($isNative)
                            <h3 class="card-title mt-4">Password</h3>
                            <form method="post" action="{{ route('password.update') }}">
                                @csrf @method('put')
                                <div class="row g-3 align-items-end">
                                    <div class="col-md">
                                        <div class="form-label">Current Password</div>
                                        <input type="password" name="current_password" class="form-control @error('current_password', 'updatePassword') is-invalid @enderror">
                                        @error('current_password', 'updatePassword')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md">
                                        <div class="form-label">New Password</div>
                                        <input type="password" name="password" class="form-control @error('password', 'updatePassword') is-invalid @enderror">
                                        @error('password', 'updatePassword')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md">
                                        <div class="form-label">Confirm Password</div>
                                        <input type="password" name="password_confirmation" class="form-control">
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary">Set new password</button>
                                    @if (session('status') === 'password-updated')
                                        <span class="text-success ms-2">Saved.</span>
                                    @endif
                                </div>
                            </form>
                        @else
                            <div class="alert alert-info mt-4">
                                <i class="ti ti-info-circle me-1"></i>
                                You're signed in as a workspace user — your password is managed in the Worklance workspace.
                            </div>
                        @endif
                    </div>

                    {{-- Interface Settings --}}
                    <div class="tab-pane" id="interface-settings" role="tabpanel">
                        @livewire('interface-settings')
                    </div>

                    {{-- Danger zone --}}
                    @if ($isNative)
                        <div class="tab-pane" id="danger-zone" role="tabpanel">
                            <h2 class="mb-4 text-danger">Delete Account</h2>
                            <p class="text-secondary">Once your account is deleted, all its data is permanently erased. Enter your password to confirm.</p>
                            <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">
                                <i class="ti ti-trash me-1"></i> Delete my account
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@if ($isNative)
    <div class="modal modal-blur fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="post" action="{{ route('profile.destroy') }}">
                    @csrf @method('delete')
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm Account Deletion</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-status bg-danger"></div>
                    <div class="modal-body">
                        <div class="text-center py-3">
                            <i class="ti ti-alert-triangle text-danger" style="font-size:2.5rem;"></i>
                            <h3 class="mt-2">Are you sure?</h3>
                            <div class="text-secondary">This action cannot be undone.</div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Password</label>
                            <input type="password" name="password" class="form-control @error('password', 'userDeletion') is-invalid @enderror" placeholder="Enter your password">
                            @error('password', 'userDeletion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Delete Account</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endif
@endsection