@extends('user.layouts.app')

@section('content')
    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            <h4 class="mb-3 mb-md-0">Settings</h4>
        </div>
        <div class="d-flex align-items-center flex-wrap text-nowrap">

        </div>
    </div>

    <ul class="nav nav-tabs" id="settingsTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="workspace-tab" data-bs-toggle="tab" data-bs-target="#workspace" type="button" role="tab" aria-controls="workspace" aria-selected="true">
                <i class="me-1 icon-md" data-feather="grid"></i>Workspace
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <a href="{{ route('user.setting.teammates') }}" class="nav-link" id="teammates-tab">
                <i class="me-1 icon-md" data-feather="users"></i>Teammates
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="profile-tab" href="{{ route('user.setting.profile') }}">
                <i class="me-1 icon-md" data-feather="user"></i>Profile
            </a>
        </li>
    </ul>

    <div class="tab-content border border-top-0 p-3" id="settingsTabsContent">
            <div class="tab-pane fade show active" id="workspace" role="tabpanel" aria-labelledby="workspace-tab">
                <form method="POST" action="{{ route('user.setting.workspace.update') }}" enctype="multipart/form-data">
                    @csrf
                    @method('POST')

                    <div class="mb-4">
                        <h4>Workspace image</h4>
                        <p class="text-muted">You can upload your own IMG or keep the default.</p>
                        <div class="d-flex align-items-center">
                            <img src="{{ $workspace->avatar ? Storage::url($workspace->avatar) : asset('assets/images/default-workspace.png') }}" alt="Workspace Image" style="width: 80px; height: 80px; border-radius: 8px; margin-right: 20px;">
                            <div>
                                <input type="file" name="image" id="image" class="d-none" accept="image/*">
                                <label for="image" class="btn btn-primary">Upload image</label>
                            </div>
                        </div>
                        @error('image')
                        <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <h4>Theme color</h4>
                        <p class="text-muted">Change the color of your dashboard. It will be applied to all workspace users.</p>
                        <div class="d-flex gap-2">
                            @foreach(['#000000', '#6c757d', '#dc3545', '#e83e8c', '#6f42c1', '#007bff', '#17a2b8', '#28a745', '#fd7e14'] as $color)
                                <label class="color-swatch" style="background-color: {{ $color }}; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid {{ $workspace->theme_color === $color ? '#007bff' : 'transparent' }};">
                                    <input type="radio" name="theme_color" value="{{ $color }}" class="d-none" {{ $workspace->theme_color === $color ? 'checked' : '' }}>
                                </label>
                            @endforeach
                        </div>
                        @error('theme_color')
                        <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <h4>Basic information</h4>
                        <p class="text-muted">You can change the basic information.</p>
                        <div class="mb-3">
                            <label class="form-label">Workspace name</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $workspace->name) }}" placeholder="Workspace name">
                            @error('name')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Workspace time zone</label>
                            <select name="time_zone" class="form-select">
                                @foreach(timezone_identifiers_list() as $tz)
                                    <option value="{{ $tz }}" {{ $workspace->time_zone === $tz ? 'selected' : '' }}>{{ $tz }} ({{ \Carbon\Carbon::now($tz)->format('P') }})</option>
                                @endforeach
                            </select>
                            @error('time_zone')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Save changes</button>
                </form>

                <div class="mt-4">
                    <form method="POST" action="{{ route('user.setting.workspace.destroy') }}" onsubmit="return confirm('Are you sure you want to delete this workspace? This action cannot be undone.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-link text-danger p-0">Delete workspace</button>
                    </form>
                </div>
            </div>
        </div>
@endsection
@section('scripts')
    <script>
        // Handle color swatch selection
        document.querySelectorAll('.color-swatch').forEach(swatch => {
            swatch.addEventListener('click', () => {
                document.querySelectorAll('.color-swatch').forEach(s => {
                    s.style.border = '2px solid transparent';
                    s.querySelector('input').checked = false;
                });
                swatch.style.border = '2px solid #007bff';
                swatch.querySelector('input').checked = true;
            });
        });
    </script>
@endsection