@extends('layouts.admin_app')

@section('content')

    @if(Session::has('success_message'))
        <div class="alert alert-success alert-dismissible fade show">
            {!! session('success_message') !!}
            <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card">
        <div class="card-header bg-white border-bottom">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Failed Form Logs</h4>
                <div class="text-muted small">
                    Total: <strong>{{ $logs->total() }}</strong> logs
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th>ID</th>
                            <th>Form</th>
                            <th>Reporter Details</th>                            
                            <th>Error</th>
                            <th>Created At</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($logs as $log)
                            <tr>
                                <td class="align-middle">
                                    <span class="badge badge-secondary">{{ $log->id }}</span>
                                </td>
                                <td class="align-middle">
                                    <div class="font-weight-bold">{{ $log->form->name ?? 'N/A' }}</div>
                                    <small class="text-muted">Form ID: {{ $log->form_id }}</small>
                                </td>
                            
                                <td>
                                    <div class="font-weight-bold">location id{{ $log->location_id ?? 'N/A' }}</div>
                                    <small class="text-muted">{{ $log->location->trading_name ?? 'N/A' }}</small>
                                    <div class="font-weight-bold">user id{{ $log->user_id ?? 'N/A' }}</div>
                                    <small class="text-muted"> {{ $log->user->name ?? 'N/A' }}</small>

                                </td>
                                <td class="align-middle" style="max-width: 500px;">
                                    <div class="text-danger" title="{{ $log->error }}">
                                        {{ Str::limit($log->error, 150) }}
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="font-weight-bold">{{ $log->created_at->format('M d, Y') }}</div>
                                    <small class="text-muted">{{ $log->created_at->format('h:i A') }}</small>
                                    <div>
                                        <small class="badge badge-light">{{ $log->created_at->diffForHumans() }}</small>
                                    </div>
                                </td>
                                <td class="align-middle text-center">
                                    <button type="button" 
                                            class="btn btn-info btn-sm view-log-btn" 
                                            data-log-id="{{ $log->id }}"
                                            data-toggle="modal" 
                                            data-target="#viewLogModal">
                                        <i class="fas fa-eye"></i> View
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($logs->hasPages())
                <div class="card-footer bg-white border-top py-3">
                    <div class="row align-items-center">
                        <div class="col-md-6 mb-2 mb-md-0">
                            <p class="text-muted mb-0 small">
                                Showing <strong>{{ $logs->firstItem() }}</strong> to <strong>{{ $logs->lastItem() }}</strong> of <strong>{{ $logs->total() }}</strong> logs
                            </p>
                        </div>
                        <div class="col-md-6">
                            <nav>
                                <ul class="pagination pagination-sm justify-content-end mb-0">
                                    @if ($logs->onFirstPage())
                                        <li class="page-item disabled">
                                            <span class="page-link">&laquo;</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $logs->previousPageUrl() }}">&laquo;</a>
                                        </li>
                                    @endif

                                    @php
                                        $currentPage = $logs->currentPage();
                                        $lastPage = $logs->lastPage();
                                        $start = max(1, $currentPage - 2);
                                        $end = min($lastPage, $currentPage + 2);
                                    @endphp

                                    @if($start > 1)
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $logs->url(1) }}">1</a>
                                        </li>
                                        @if($start > 2)
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        @endif
                                    @endif

                                    @for ($i = $start; $i <= $end; $i++)
                                        @if ($i == $currentPage)
                                            <li class="page-item active">
                                                <span class="page-link">{{ $i }}</span>
                                            </li>
                                        @else
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $logs->url($i) }}">{{ $i }}</a>
                                            </li>
                                        @endif
                                    @endfor

                                    @if($end < $lastPage)
                                        @if($end < $lastPage - 1)
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        @endif
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $logs->url($lastPage) }}">{{ $lastPage }}</a>
                                        </li>
                                    @endif

                                    @if ($logs->hasMorePages())
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $logs->nextPageUrl() }}">&raquo;</a>
                                        </li>
                                    @else
                                        <li class="page-item disabled">
                                            <span class="page-link">&raquo;</span>
                                        </li>
                                    @endif
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="modal fade" id="viewLogModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Log Details</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalContent">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                        <p class="mt-3">Loading log details...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('styles')
<style>
    .copy-btn { color: #007bff; transition: color 0.2s; cursor: pointer; }
    .copy-btn:hover { color: #0056b3; }
    .copy-btn.copied { color: #28a745; }
</style>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('.view-log-btn').on('click', function() {
        const logId = $(this).data('log-id');
        
        $('#modalContent').html(`
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <p class="mt-3">Loading log details...</p>
            </div>
        `);
        
        $.ajax({
            url: '{{ route("fail_form_logs.show", ":id") }}'.replace(':id', logId),
            method: 'GET',
            success: function(response) {
                $('#modalContent').html(response);
            },
            error: function(xhr) {
                $('#modalContent').html(`
                    <div class="alert alert-danger">
                        <h5>Error Loading Log</h5>
                        <p>Failed to load log details. Please try again.</p>
                    </div>
                `);
            }
        });
    });
});

function copyToClipboard(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    
    event.target.classList.add('copied');
    setTimeout(() => {
        event.target.classList.remove('copied');
    }, 1000);
}
</script>
@endsection