@extends('layouts.app')

@section('title', __('Workspaces'))
@section('active', 'workspaces')
@section('page_eyebrow', 'Workspaces')
@section('page_heading', __('Workspace Manager'))

@section('content')
  @if (session('status'))
    <div class="rounded-2xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
      {{ session('status') }}
    </div>
  @endif

  <div class="rounded-2xl border border-[#c7d3fc] bg-[#eff3fe] p-6 lg:p-8">
    <div class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
      <div>
        <p class="text-xs font-medium text-[#4f6ef7]">{{ __('Workspace Manager') }}</p>
        <h2 class="mt-2 text-2xl font-bold tracking-tight lg:text-3xl">{{ __('Organize reports by workspace and collection.') }}</h2>
        <p class="mt-2 max-w-2xl text-sm leading-6 text-gray-500">{{ __('Use workspaces for each house, client, or project, then keep room collections inside the right workspace.') }}</p>
      </div>
      <a href="{{ route('inspections.index') }}" data-spa-link class="inline-flex h-11 items-center justify-center rounded-xl bg-[#4f6ef7] px-4 text-sm font-medium text-white hover:bg-[#3d5ce0]">{{ __('New Inspection') }}</a>
    </div>
  </div>

  <div class="grid gap-6 xl:grid-cols-[.8fr_1.2fr]">
    <div class="space-y-6">
      <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
        <h3 class="text-base font-semibold tracking-tight">{{ __('Create Workspace') }}</h3>
        <form method="POST" action="{{ route('workspaces.store') }}" class="mt-4 space-y-3">
          @csrf
          <label class="block">
            <span class="mb-1 block text-xs font-medium text-gray-500">{{ __('Title') }}</span>
            <input name="name" required maxlength="120" placeholder="{{ __('Example: Rumah Melati') }}" class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-3 text-sm outline-none focus:border-[#4f6ef7] focus:bg-white">
          </label>
          <label class="block">
            <span class="mb-1 block text-xs font-medium text-gray-500">{{ __('Description') }}</span>
            <textarea name="description" rows="4" maxlength="1000" placeholder="{{ __('Short note about this house, client, or project') }}" class="w-full rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm outline-none focus:border-[#4f6ef7] focus:bg-white"></textarea>
          </label>
          <label class="block">
            <span class="mb-1 block text-xs font-medium text-gray-500">{{ __('Currency') }}</span>
            <select name="default_currency" class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-3 text-sm outline-none focus:border-[#4f6ef7] focus:bg-white">
              <option value="IDR">Rupiah (IDR)</option>
              <option value="USD">US Dollar (USD)</option>
            </select>
          </label>
          <button type="submit" class="h-10 w-full rounded-xl bg-[#4f6ef7] px-4 text-sm font-medium text-white hover:bg-[#3d5ce0]">{{ __('Save Workspace') }}</button>
        </form>
      </div>

      <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
        <h3 class="text-base font-semibold tracking-tight">{{ __('Move Collection') }}</h3>
        <p class="mt-1 text-sm text-gray-400">{{ __('Move a room/house collection into another workspace without changing its inspection history.') }}</p>
        <form method="POST" action="{{ route('collections.move') }}" class="mt-4 space-y-3">
          @csrf
          <select name="collection_id" required class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-3 text-sm outline-none focus:border-[#4f6ef7] focus:bg-white">
            <option value="">{{ __('Choose collection') }}</option>
            @foreach ($collections as $collection)
              <option value="{{ $collection->id }}">{{ $collection->displayName() }} · {{ $collection->workspace?->name }}</option>
            @endforeach
          </select>
          <select name="workspace_id" required class="h-10 w-full rounded-xl border border-gray-200 bg-gray-50 px-3 text-sm outline-none focus:border-[#4f6ef7] focus:bg-white">
            <option value="">{{ __('Move to workspace') }}</option>
            @foreach ($workspaces as $workspace)
              <option value="{{ $workspace->id }}">{{ $workspace->name }}</option>
            @endforeach
          </select>
          <button type="submit" class="h-10 w-full rounded-xl border border-[#c7d3fc] bg-[#eff3fe] px-4 text-sm font-medium text-[#4f6ef7] hover:bg-white">{{ __('Move Collection') }}</button>
        </form>
      </div>
    </div>

    <div class="space-y-4">
      @forelse ($workspaces as $workspace)
        <article class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
          <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div class="min-w-0">
              <h3 class="truncate text-lg font-bold tracking-tight">{{ $workspace->name }}</h3>
              <p class="mt-1 text-sm leading-6 text-gray-500">{{ $workspace->description ?: __('No description yet.') }}</p>
              <div class="mt-3 flex flex-wrap gap-2 text-xs">
                <span class="rounded-full bg-[#eff3fe] px-2.5 py-1 font-medium text-[#4f6ef7]">{{ __(':collections collections', ['collections' => $workspace->collections_count]) }}</span>
                <span class="rounded-full bg-gray-50 px-2.5 py-1 font-medium text-gray-500">{{ __(':count scans', ['count' => $workspace->inspections_count]) }}</span>
                <span class="rounded-full bg-amber-50 px-2.5 py-1 font-medium text-amber-600">Rp {{ number_format($workspace->estimated_cost_sum ?? 0, 0, ',', '.') }}</span>
              </div>
            </div>
            <div class="flex shrink-0 gap-2">
              <a href="{{ route('inspections.index', ['workspace_id' => $workspace->id]) }}" data-spa-link class="rounded-xl bg-[#4f6ef7] px-3 py-2 text-xs font-medium text-white hover:bg-[#3d5ce0]">{{ __('Open') }}</a>
              <form method="POST" action="{{ route('workspaces.destroy', $workspace) }}" onsubmit="return confirm('{{ __('Delete this workspace and detach its collections?') }}')">
                @csrf
                @method('DELETE')
                <button type="submit" class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs font-medium text-red-600 hover:bg-white">{{ __('Delete') }}</button>
              </form>
            </div>
          </div>

          <details class="mt-5 rounded-xl border border-gray-100 bg-gray-50 p-4">
            <summary class="cursor-pointer text-sm font-semibold">{{ __('Edit workspace') }}</summary>
            <form method="POST" action="{{ route('workspaces.update', $workspace) }}" class="mt-4 grid gap-3 md:grid-cols-2">
              @csrf
              @method('PUT')
              <label>
                <span class="mb-1 block text-xs font-medium text-gray-500">{{ __('Title') }}</span>
                <input name="name" value="{{ $workspace->name }}" required maxlength="120" class="h-10 w-full rounded-xl border border-gray-200 bg-white px-3 text-sm outline-none focus:border-[#4f6ef7]">
              </label>
              <label>
                <span class="mb-1 block text-xs font-medium text-gray-500">{{ __('Currency') }}</span>
                <select name="default_currency" class="h-10 w-full rounded-xl border border-gray-200 bg-white px-3 text-sm outline-none focus:border-[#4f6ef7]">
                  <option value="IDR" @selected($workspace->default_currency === 'IDR')>Rupiah (IDR)</option>
                  <option value="USD" @selected($workspace->default_currency === 'USD')>US Dollar (USD)</option>
                </select>
              </label>
              <label class="md:col-span-2">
                <span class="mb-1 block text-xs font-medium text-gray-500">{{ __('Description') }}</span>
                <textarea name="description" rows="3" maxlength="1000" class="w-full rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm outline-none focus:border-[#4f6ef7]">{{ $workspace->description }}</textarea>
              </label>
              <div class="md:col-span-2">
                <button type="submit" class="rounded-xl bg-[#4f6ef7] px-4 py-2 text-sm font-medium text-white hover:bg-[#3d5ce0]">{{ __('Update Workspace') }}</button>
              </div>
            </form>
          </details>

          <div class="mt-5 overflow-x-auto">
            <table class="w-full text-left text-sm">
              <thead class="text-xs uppercase text-gray-400">
                <tr>
                  <th class="px-3 py-3">{{ __('Collection') }}</th>
                  <th class="px-3 py-3">{{ __('Type') }}</th>
                  <th class="px-3 py-3">{{ __('Scans') }}</th>
                  <th class="px-3 py-3">{{ __('Cost') }}</th>
                  <th class="px-3 py-3 text-right">{{ __('Action') }}</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-100">
                @forelse ($workspace->collections as $collection)
                  <tr>
                    <td class="px-3 py-3">
                      <p class="font-medium">{{ $collection->displayName() }}</p>
                      <p class="mt-0.5 text-xs text-gray-400">{{ $collection->property_address ?: __('No address') }}</p>
                    </td>
                    <td class="px-3 py-3">{{ Str::headline($collection->collection_type) }}</td>
                    <td class="px-3 py-3">{{ $collection->inspections_count }}</td>
                    <td class="px-3 py-3">Rp {{ number_format($collection->inspections_sum_estimated_cost ?? 0, 0, ',', '.') }}</td>
                    <td class="px-3 py-3 text-right">
                      <div class="flex justify-end gap-2">
                        <a href="{{ route('inspections.index', ['workspace_id' => $workspace->id, 'collection_id' => $collection->id]) }}" data-spa-link class="rounded-lg border border-gray-200 px-2 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50">{{ __('Open') }}</a>
                        <form method="POST" action="{{ route('collections.destroy', $collection) }}" onsubmit="return confirm('{{ __('Delete this collection? Inspection history will stay saved.') }}')">
                          @csrf
                          @method('DELETE')
                          <button type="submit" class="rounded-lg border border-red-200 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50">{{ __('Delete') }}</button>
                        </form>
                      </div>
                    </td>
                  </tr>
                @empty
                  <tr><td colspan="5" class="px-3 py-8 text-center text-sm text-gray-400">{{ __('No collections yet.') }}</td></tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </article>
      @empty
        <div class="rounded-2xl border border-dashed border-gray-200 bg-white p-8 text-center text-sm text-gray-400">{{ __('No workspaces yet.') }}</div>
      @endforelse
    </div>
  </div>
@endsection
