@extends('layout.admin')
@section('title','Dashboard Projects')

@section('content')
<div class="max-w-7xl mx-auto mt-2 px-0">

  {{-- Flash --}}
  @if(session('success'))
    <div class="mb-4 rounded-lg border border-green-200 bg-green-50 text-green-800 px-4 py-3 flex items-center gap-2">
      <i class="fa-solid fa-check-circle"></i>
      <span>{{ session('success') }}</span>
    </div>
  @endif

  {{-- Header: Title + actions --}}
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
    <div>
      <h2 class="text-2xl font-black tracking-tight text-slate-800">Dashboard Projects</h2>
      <p class="text-slate-500 text-sm">প্রজেক্টগুলো অন/অফ, এডিট, ডিলিট ও সোর্ট অর্ডার ম্যানেজ করুন।</p>
    </div>

    <div class="flex items-center gap-2">
      <a href="{{ route('admin.dashboard-projects.create') }}"
         class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-4 py-2 shadow-sm">
        <i class="fa-solid fa-plus"></i> Add Project
      </a>
    </div>
  </div>

  {{-- Global Inactive Access --}}
  <div class="mb-4 rounded-2xl border border-slate-200 bg-white shadow-sm p-4">
    <form action="{{ route('admin.dashboard-projects.inactive-global') }}" method="POST" class="flex flex-col sm:flex-row sm:items-center gap-3">
      @csrf
      <label class="flex items-center gap-2 font-semibold text-slate-700">
        <input type="checkbox" name="inactive_global_allow" value="1" {{ !empty($inactiveGlobalAllow) ? 'checked' : '' }}>
        Inactive ইউজার সব প্রজেক্টে কাজ করতে পারবে (Global)
      </label>
      <button class="inline-flex items-center gap-2 rounded-lg bg-slate-800 hover:bg-slate-900 text-white font-semibold px-4 py-2">
        <i class="fa-solid fa-floppy-disk"></i> Save
      </button>
    </form>
    <div class="mt-2 text-xs text-slate-500">
      ON করলে সব প্রজেক্টে ইনএক্টিভ ইউজার ভেরিফাইডের মতো কাজ করতে পারবে। OFF করলে প্রতিটি প্রজেক্টের “Allow Inactive User” সেটিং ফলো করবে।
    </div>
  </div>

  {{-- Table/Card wrapper --}}
  <div class="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
    {{-- Top toolbar --}}
    <div class="p-3 sm:p-4 flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between border-b border-slate-200">
      <div class="flex items-center gap-2 text-sm text-slate-600">
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-slate-100">
          <i class="fa-solid fa-layer-group text-slate-500"></i>
          {{ number_format($projects->count()) }} total
        </span>
      </div>

      <div class="flex items-center gap-2">
        <div class="hidden sm:block text-xs text-slate-400">Tip: click gradient to preview 🎨</div>
      </div>
    </div>

    {{-- Desktop table --}}
    <div class="hidden md:block overflow-auto">
      <table class="min-w-full text-sm">
        <thead class="bg-slate-50 text-slate-700 text-xs uppercase tracking-wider sticky top-0 z-10 border-b border-slate-200">
          <tr>
            <th class="text-left px-4 py-3 font-semibold">#</th>
            <th class="text-left px-4 py-3 font-semibold">Project</th>
            <th class="text-left px-4 py-3 font-semibold">Icon</th>
            <th class="text-left px-4 py-3 font-semibold">Gradient</th>
            <th class="text-left px-4 py-3 font-semibold">Link</th>
            <th class="text-left px-4 py-3 font-semibold">Inactive Allowed</th>
            <th class="text-left px-4 py-3 font-semibold">Status</th>
            <th class="text-left px-4 py-3 font-semibold">Sort</th>
            <th class="text-right px-4 py-3 font-semibold">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          @forelse($projects as $i => $p)
            <tr class="hover:bg-slate-50/50 transition">
              <td class="px-4 py-3 text-slate-500">{{ $i+1 }}</td>

              <td class="px-4 py-3">
                <div class="font-semibold text-slate-800">{{ $p->title }}</div>
                <div class="text-xs text-slate-500">ID: #{{ $p->id }}</div>
              </td>

              <td class="px-4 py-3">
                <div class="inline-flex items-center gap-2">
                  <i class="{{ $p->icon }} text-lg text-slate-700"></i>
                  <code class="text-xs text-slate-500">{{ $p->icon }}</code>
                </div>
              </td>

              <td class="px-4 py-3">
                <div class="flex items-center gap-2">
                  <button type="button" class="w-12 h-5 rounded-full border border-slate-200 shadow-sm"
                          style="background:linear-gradient(90deg,{{ $p->start_color }},{{ $p->end_color }})"
                          title="{{ $p->start_color }} → {{ $p->end_color }}">
                  </button>
                  <span class="text-xs text-slate-500">
                    <span class="font-mono">{{ $p->start_color }}</span>
                    <span class="mx-1">→</span>
                    <span class="font-mono">{{ $p->end_color }}</span>
                  </span>
                </div>
              </td>

              <td class="px-4 py-3">
                <a href="{{ $p->link }}" target="_blank" class="text-blue-600 hover:underline break-all">
                  {{ $p->link }}
                </a>
              </td>

              <td class="px-4 py-3">
                @if($p->allowed_for_inactive)
                  <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5">
                    <i class="fa-solid fa-check-circle"></i> Yes
                  </span>
                @else
                  <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 text-slate-700 border border-slate-200 px-2 py-0.5">
                    <i class="fa-regular fa-circle"></i> No
                  </span>
                @endif
              </td>

              <td class="px-4 py-3">
                <form action="{{ route('admin.dashboard-projects.toggle', $p) }}" method="POST">
                  @csrf @method('PATCH')
                  <button
                    class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-white font-semibold shadow-sm
                           {{ $p->is_active ? 'bg-emerald-600 hover:bg-emerald-700' : 'bg-slate-500 hover:bg-slate-600' }}">
                    <i class="fa-solid {{ $p->is_active ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
                    {{ $p->is_active ? 'Active' : 'Inactive' }}
                  </button>
                </form>
              </td>

              <td class="px-4 py-3">
                <span class="inline-flex items-center justify-center w-10 h-8 rounded-md border border-slate-200 bg-slate-50 text-slate-700 font-semibold">
                  {{ $p->sort_order }}
                </span>
              </td>

              <td class="px-4 py-3">
                <div class="flex items-center justify-end gap-2">
                  <a href="{{ route('admin.dashboard-projects.edit', $p) }}"
                     class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white shadow-sm">
                    <i class="fa-solid fa-pen-to-square"></i> Edit
                  </a>

                  <form action="{{ route('admin.dashboard-projects.destroy', $p) }}" method="POST"
                        onsubmit="return confirm('Delete this project?')">
                    @csrf @method('DELETE')
                    <button
                      class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-rose-600 hover:bg-rose-700 text-white shadow-sm">
                      <i class="fa-solid fa-trash-can"></i> Delete
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="9" class="px-4 py-10 text-center text-slate-500">
                <i class="fa-regular fa-face-smile-beam text-2xl mb-2 block"></i>
                No projects found.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    {{-- Mobile cards --}}
    <div class="md:hidden divide-y divide-slate-100">
      @forelse($projects as $i => $p)
        <div class="p-4">
          <div class="flex items-start justify-between">
            <div>
              <div class="flex items-center gap-2">
                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-slate-100 text-slate-600 text-xs">{{ $i+1 }}</span>
                <h3 class="font-bold text-slate-800">{{ $p->title }}</h3>
              </div>
              <div class="mt-1 text-xs text-slate-500">ID: #{{ $p->id }}</div>
            </div>
            <i class="{{ $p->icon }} text-xl text-slate-600"></i>
          </div>

          <div class="mt-3 grid grid-cols-2 gap-3 text-sm">
            <div class="col-span-2">
              <div class="text-xs text-slate-500 mb-1">Gradient</div>
              <div class="flex items-center gap-2">
                <span class="w-12 h-5 rounded-full border border-slate-200 shadow-sm"
                      style="background:linear-gradient(90deg,{{ $p->start_color }},{{ $p->end_color }})"></span>
                <span class="text-xs text-slate-500 font-mono">{{ $p->start_color }} → {{ $p->end_color }}</span>
              </div>
            </div>

            <div class="col-span-2">
              <div class="text-xs text-slate-500 mb-1">Link</div>
              <a href="{{ $p->link }}" target="_blank" class="text-blue-600 break-all">{{ $p->link }}</a>
            </div>

            <div>
              <div class="text-xs text-slate-500 mb-1">Inactive Allowed</div>
              @if($p->allowed_for_inactive)
                <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5 text-xs">
                  <i class="fa-solid fa-check-circle"></i> Yes
                </span>
              @else
                <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 text-slate-700 border border-slate-200 px-2 py-0.5 text-xs">
                  <i class="fa-regular fa-circle"></i> No
                </span>
              @endif
            </div>

            <div>
              <div class="text-xs text-slate-500 mb-1">Sort</div>
              <span class="inline-flex items-center justify-center w-10 h-8 rounded-md border border-slate-200 bg-slate-50 text-slate-700 font-semibold">
                {{ $p->sort_order }}
              </span>
            </div>
          </div>

          <div class="mt-4 flex items-center justify-between">
            <form action="{{ route('admin.dashboard-projects.toggle', $p) }}" method="POST">
              @csrf @method('PATCH')
              <button
                class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-white font-semibold shadow-sm
                       {{ $p->is_active ? 'bg-emerald-600 hover:bg-emerald-700' : 'bg-slate-500 hover:bg-slate-600' }}">
                <i class="fa-solid {{ $p->is_active ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
                {{ $p->is_active ? 'Active' : 'Inactive' }}
              </button>
            </form>

            <div class="flex items-center gap-2">
              <a href="{{ route('admin.dashboard-projects.edit', $p) }}"
                 class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white shadow-sm">
                <i class="fa-solid fa-pen-to-square"></i> Edit
              </a>
              <form action="{{ route('admin.dashboard-projects.destroy', $p) }}" method="POST"
                    onsubmit="return confirm('Delete this project?')">
                @csrf @method('DELETE')
                <button class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-rose-600 hover:bg-rose-700 text-white shadow-sm">
                  <i class="fa-solid fa-trash-can"></i> Delete
                </button>
              </form>
            </div>
          </div>
        </div>
      @empty
        <div class="p-6 text-center text-slate-500">No projects found.</div>
      @endforelse
    </div>
  </div>

  {{-- Small helper footer --}}
  <div class="mt-3 text-xs text-slate-400">
    <i class="fa-solid fa-circle-info"></i>
    Icon class uses Font Awesome. Gradient color fields accept any valid CSS color (e.g. <code class="font-mono">#0B5D1E</code>, <code class="font-mono">rgb()</code>, <code class="font-mono">var(--bd-green)</code>).
  </div>
</div>
@endsection
