@extends('admin.layout.app')

@section('title', 'Lịch sử thay đổi Avatar')

@section('content')
    <div class="container-fluid py-3 {{ Auth::check() && Auth::user()->is_layout_two == 1 ? 'mt-2 p-0' : '' }}">

        <div class="row mb-2">
            <div class="col-12 col-md-4 mt-1">
                <form action="{{ route('data.avatar_history') }}" method="GET" class="w-100">
                    @csrf

                    <div class="d-flex gap-1 w-100">
                        <input type="text" class="form-control" name="name" placeholder="Nhập tên user"
                            value="{{ request('name') }}" style="min-width: 0;">

                        <button type="submit" class="btn btn-primary btn-avatar-history" style="white-space: nowrap;">
                            <i class="fa fa-search" aria-hidden="true"></i>
                            Tìm kiếm
                        </button>

                        <a href="{{ route('data.avatar_history') }}" class="btn btn-gray btn-avatar-history"
                            style="white-space: nowrap;">
                            <i class="fa fa-refresh" aria-hidden="true"></i>
                            Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>
        <!-- Table -->
        <div class="card shadow-sm border-0">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped mb-0" style="font-size: 0.88rem;">
                        <thead class="thead-dark">
                            <tr>
                                <th class=""><i class="fas fa-user mr-1"></i> Người thực hiện</th>
                                <th class=""><i class="fas fa-mobile-alt mr-1"></i> Tên App</th>
                                <th class=""><i class="fas fa-folder-open mr-1"></i> Subfolder</th>
                                <th class=""><i class="fas fa-server mr-1"></i> Domain API</th>
                                <th class=" text-center"><i class="fas fa-clock mr-1"></i> Thời gian</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($histories as $index => $h)
                                <tr>

                                    <td class="align-middle">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle bg-gradient-primary text-white d-flex align-items-center justify-content-center mr-2"
                                                style="width: 32px; height: 32px; font-size: 0.75rem; font-weight: bold; flex-shrink: 0; background: linear-gradient(135deg,#4e73df,#224abe);">
                                                {{ strtoupper(substr($h->user_name ?? '?', 0, 1)) }}
                                            </div>
                                            <div>
                                                <div class="font-weight-bold text-dark" style="line-height: 1.2;">
                                                    {{ $h->user_name ?? '—' }}
                                                </div>
                                                @if ($h->user)
                                                    <small class="text-muted">{{ $h->user->email ?? '' }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="align-middle">
                                        <span class="badge  border px-2 py-1 font-weight-bold"
                                            style="font-family: monospace;color:black">
                                            {{ $h->app_name }}
                                        </span>
                                    </td>
                                    <td class="align-middle">
                                        <span class="text-secondary" style="font-family: monospace; font-size: 0.82rem;">
                                            {{ $h->subfolder }}
                                        </span>
                                    </td>
                                    <td class="align-middle">
                                        @php
                                            $domainColor = match (true) {
                                                str_contains($h->target_domain, 'lvtglobal.site') => 'badge-primary',
                                                str_contains($h->target_domain, 'lvtglobal.tech') => 'badge-success',
                                                str_contains($h->target_domain, 'lvt-api-site') => 'badge-info',
                                                str_contains($h->target_domain, 'lvt-api-tech')
                                                    => 'badge-warning text-dark',
                                                default => 'badge-secondary',
                                            };
                                        @endphp
                                        <span class="badge {{ $domainColor }} px-2 py-1" style="font-size: 0.78rem;">
                                            {{ $h->target_domain }}
                                        </span>
                                    </td>
                                    <td class="align-middle text-center text-nowrap">
                                        <div class="font-weight-bold text-dark" style="font-size: 0.82rem;">
                                            {{ $h->created_at->format('d/m/Y') }}
                                        </div>
                                        <small class="text-muted">{{ $h->created_at->format('H:i:s') }}</small>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5 text-muted">
                                        <i class="fas fa-inbox fa-3x mb-3 d-block opacity-50"></i>
                                        Chưa có bản ghi lịch sử nào.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if ($histories->hasPages())
                <div class="card-footer bg-white border-top py-3 d-flex justify-content-between align-items-center">
                    <small class="text-muted">
                        Hiển thị {{ $histories->firstItem() }}–{{ $histories->lastItem() }} / {{ $histories->total() }}
                        bản ghi
                    </small>
                    <div>
                        {{ $histories->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            @endif
        </div>

    </div>
@endsection