@extends('portal.layout')
@section('title', 'Regulatory Watches')

@section('content')
<div style="max-width:900px;margin:0 auto;padding:32px 24px;">

    <div style="margin-bottom:28px;">
        <div style="display:inline-flex;align-items:center;gap:6px;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);padding:4px 12px;border-radius:20px;font-size:11px;color:#fb923c;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase;">
            <i data-lucide="bell" style="width:12px;height:12px;"></i> Regulatory Watch
        </div>
        <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">Regulatory Watches</h1>
        <p style="font-size:13px;color:var(--text-secondary);">Get notified when regulations change in zones or areas you're tracking.</p>
    </div>

    @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    {{-- Create Watch --}}
    <div class="card" style="padding:20px;margin-bottom:24px;">
        <div style="font-size:13px;font-weight:600;margin-bottom:14px;">Create New Watch</div>
        <form method="POST" action="{{ route('portal.watches.store') }}">
            @csrf
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;">
                <div>
                    <label class="form-label">Watch Name</label>
                    <input type="text" name="name" class="form-input" placeholder="e.g. Mumbai R1 Zone" required>
                </div>
                <div>
                    <label class="form-label">Zone ID (optional)</label>
                    <input type="number" name="filters[zone_id]" class="form-input" placeholder="Zone ID">
                </div>
                <div>
                    <label class="form-label">City ID (optional)</label>
                    <input type="number" name="filters[city_id]" class="form-input" placeholder="City ID">
                </div>
                <button type="submit" class="btn btn-primary" style="height:38px;">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i> Create
                </button>
            </div>
        </form>
    </div>

    {{-- Watches List --}}
    @if($watches->count())
    <div style="display:grid;gap:8px;">
        @foreach($watches as $watch)
        <div class="card" style="padding:14px 16px;display:flex;align-items:center;gap:14px;">
            <div style="width:36px;height:36px;background:rgba(249,115,22,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i data-lucide="bell" style="width:16px;height:16px;color:#f97316;"></i>
            </div>
            <div style="flex:1;min-width:0;">
                <div style="font-size:13px;font-weight:600;">{{ $watch->name }}</div>
                <div style="font-size:11px;color:var(--text-secondary);">
                    {{ $watch->notifications_count }} notifications
                    @if($watch->unread_count > 0)
                    <span class="badge badge-red" style="margin-left:4px;">{{ $watch->unread_count }} unread</span>
                    @endif
                </div>
            </div>
            <a href="{{ route('portal.watches.notifications', $watch) }}" class="btn btn-secondary" style="padding:6px 12px;font-size:11px;">
                View Alerts
            </a>
            <form method="POST" action="{{ route('portal.watches.destroy', $watch) }}" onsubmit="return confirm('Delete this watch?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-secondary" style="padding:6px 10px;color:#ef4444;">
                    <i data-lucide="trash-2" style="width:12px;height:12px;"></i>
                </button>
            </form>
        </div>
        @endforeach
    </div>
    @else
    <div class="card" style="padding:40px;text-align:center;">
        <i data-lucide="bell-off" style="width:36px;height:36px;color:var(--text-muted);margin-bottom:12px;"></i>
        <div style="font-size:15px;font-weight:600;margin-bottom:6px;">No Watches Yet</div>
        <div style="font-size:13px;color:var(--text-secondary);">Create a watch above to track regulatory changes.</div>
    </div>
    @endif
</div>
@endsection