@extends('layouts.app')

@section('title', 'Recent Registry Changes - Healthcare Directory')

@section('content')
<!-- Hero Section -->
<div class="relative overflow-hidden rounded-2xl bg-white border border-[#D8DDE0] border-l-8 border-[#005EB8] px-6 py-8 sm:px-10 sm:py-10 shadow-sm mb-8">
    <div class="relative max-w-4xl flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl text-[#002F6C]">
                Registry Recent Changes Tracker
            </h1>
            <p class="mt-3 text-base text-[#212B32] leading-relaxed">
                Monitor and audit modifications, deregistrations, and fresh additions to healthcare providers and locations within the CQC database over a specified timeframe.
            </p>
        </div>
        <!-- Medical theme decoration -->
        <div class="hidden lg:block shrink-0 bg-[#F0F4F5] p-4 rounded-full border border-[#D8DDE0]">
            <svg class="w-12 h-12 text-[#005EB8]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
        </div>
    </div>
</div>

<!-- Date/Range Filters and Configuration -->
<div class="bg-white border border-[#D8DDE0] rounded-2xl p-6 shadow-sm mb-8">
    <h2 class="text-base font-bold text-[#002F6C] mb-4 flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-[#005EB8]">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
        Timeframe Registry Auditor
    </h2>

    <form action="{{ route('changes.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
        <!-- Entity Type Selector -->
        <div class="flex flex-col gap-1.5">
            <label for="type" class="text-xs font-bold text-[#4c6272]">Audited Registry Type</label>
            <select name="type" id="type" class="w-full bg-white border border-[#D8DDE0] rounded-xl px-3.5 py-2 text-sm text-[#212B32] focus:outline-none focus:border-[#005EB8] focus:ring-1 focus:ring-[#005EB8]/20 transition">
                <option value="location" {{ $type === 'location' ? 'selected' : '' }}>Locations</option>
                <option value="provider" {{ $type === 'provider' ? 'selected' : '' }}>Providers</option>
            </select>
        </div>

        <!-- Start Date -->
        <div class="flex flex-col gap-1.5">
            <label for="startDate" class="text-xs font-bold text-[#4c6272]">Start Date</label>
            <input type="date" name="startDate" id="startDate" value="{{ $formattedStartDate }}" class="w-full bg-white border border-[#D8DDE0] rounded-xl px-3.5 py-2 text-sm text-[#212B32] focus:outline-none focus:border-[#005EB8] focus:ring-1 focus:ring-[#005EB8]/20 transition">
        </div>

        <!-- End Date -->
        <div class="flex flex-col gap-1.5">
            <label for="endDate" class="text-xs font-bold text-[#4c6272]">End Date</label>
            <input type="date" name="endDate" id="endDate" value="{{ $formattedEndDate }}" class="w-full bg-white border border-[#D8DDE0] rounded-xl px-3.5 py-2 text-sm text-[#212B32] focus:outline-none focus:border-[#005EB8] focus:ring-1 focus:ring-[#005EB8]/20 transition">
        </div>

        <!-- Actions -->
        <div>
            <button type="submit" class="w-full bg-[#005EB8] hover:bg-[#002F6C] text-white font-bold text-sm rounded-xl py-2 px-4 shadow-sm transition duration-200 cursor-pointer h-[38px]">
                Search Changes
            </button>
        </div>
    </form>

    <!-- Quick Presets -->
    <div class="mt-4 pt-4 border-t border-[#E8EDEE] flex flex-wrap items-center gap-3">
        <span class="text-xs text-[#4c6272] font-bold uppercase tracking-wider">Date Presets:</span>
        <a href="{{ route('changes.index', ['type' => $type, 'startDate' => now()->subDays(7)->toDateString(), 'endDate' => now()->toDateString()]) }}" class="text-xs bg-[#F0F4F5] hover:bg-[#E8EDEE] text-[#005EB8] font-bold px-3 py-1.5 rounded-lg border border-[#D8DDE0] transition">
            Last 7 Days
        </a>
        <a href="{{ route('changes.index', ['type' => $type, 'startDate' => now()->subDays(14)->toDateString(), 'endDate' => now()->toDateString()]) }}" class="text-xs bg-[#F0F4F5] hover:bg-[#E8EDEE] text-[#005EB8] font-bold px-3 py-1.5 rounded-lg border border-[#D8DDE0] transition">
            Last 14 Days
        </a>
        <a href="{{ route('changes.index', ['type' => $type, 'startDate' => now()->subDays(30)->toDateString(), 'endDate' => now()->toDateString()]) }}" class="text-xs bg-[#F0F4F5] hover:bg-[#E8EDEE] text-[#005EB8] font-bold px-3 py-1.5 rounded-lg border border-[#D8DDE0] transition">
            Last 30 Days
        </a>
    </div>
</div>

<!-- Errors or Warnings -->
@if($error)
    <div class="rounded-2xl border border-rose-500/25 bg-rose-50 p-5 mb-8 text-[#DA291C] flex items-start gap-4 shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 text-[#DA291C] shrink-0">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
        </svg>
        <div class="flex flex-col gap-1.5">
            <h3 class="font-bold text-[#DA291C] text-base">Auditing System Status</h3>
            <p class="text-sm leading-relaxed text-[#212B32]">{{ $error }}</p>
        </div>
    </div>
@endif

<!-- Results Grid -->
@if($paginator && $paginator->count() > 0)
    <div class="bg-white border border-[#D8DDE0] rounded-2xl p-6 sm:p-8 shadow-sm mb-8">
        <div class="flex justify-between items-center mb-6 border-b border-[#E8EDEE] pb-3">
            <h3 class="text-sm font-bold text-[#002F6C] uppercase tracking-wider flex items-center gap-2">
                Changed ID Registry Logs
                <span class="inline-flex rounded-full bg-[#005eb8]/10 text-[#005eb8] px-2 py-0.5 text-xs font-mono font-bold">Total: {{ $paginator->total() }}</span>
            </h3>
            <span class="text-xs text-[#4c6272] font-semibold">Page {{ $paginator->currentPage() }} of {{ $paginator->lastPage() }}</span>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            @foreach($paginator as $id)
                <div class="bg-[#F0F4F5] border border-[#E8EDEE] p-4 rounded-xl flex items-center justify-between hover:border-[#a1b5be] transition group shadow-sm">
                    <div class="flex flex-col gap-1 min-w-0">
                        <span class="text-[9px] text-[#4c6272] uppercase font-mono tracking-wider font-bold">{{ $type }} ID</span>
                        <span class="font-mono text-sm text-[#212B32] font-bold group-hover:text-[#005EB8] transition truncate">{{ $id }}</span>
                    </div>
                    
                    @php
                        $route = $type === 'location' ? 'locations.show' : 'providers.show';
                    @endphp
                    <a href="{{ route($route, ['id' => $id]) }}" class="inline-flex items-center justify-center h-8 w-8 rounded bg-white text-[#005EB8] hover:bg-[#005EB8] hover:text-white border border-[#D8DDE0] transition">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                        </svg>
                    </a>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-8 pagination-container">
            {{ $paginator->links() }}
        </div>
    </div>
@elseif($paginator)
    <div class="text-center bg-white border border-[#D8DDE0] rounded-2xl p-12 mb-8 shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-[#4c6272] mx-auto mb-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.602 10.602Z" />
        </svg>
        <h3 class="text-lg font-bold text-[#002F6C] mb-2">No Changes Found</h3>
        <p class="text-sm text-[#4c6272] max-w-md mx-auto">
            No registry changes were found in the CQC database for the specified date range. Try broadening the search parameters.
        </p>
    </div>
@endif
@endsection