@extends('layouts.app')

@section('title', 'Palm Profiles - Admin Panel')
@section('page_title', 'Palm Profiles')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
<style>
    .rotate {
        animation: rotation 1.5s infinite linear;
    }
    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Palm Profiles</h5>
            </div>
            <div class="card-body table-border-style">
                <div class="table-responsive">
                    <table id="palmProfilesTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Sr. No.</th>
                                <th>Full Name</th>
                                <th>Gender</th>
                                <th>App User</th>
                                <th>Created Date</th>
                                <th>Tokens (In / Out / Total)</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($palmProfiles as $profile)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $profile->first_name }} {{ $profile->last_name }}</td>
                                <td>
                                    <x-badge type="gender" :value="$profile->gender" />
                                </td>
                                <td>
                                    @if($profile->user)
                                        <a href="{{ route('app-users.show', $profile->user->uuid) }}">
                                            {{ $profile->user->name }}
                                        </a>
                                    @else
                                        <span class="text-muted">Unknown User</span>
                                    @endif
                                </td>
                                <td><x-date-display :date="$profile->created_at" /></td>
                                <td>
                                    <span class="badge badge-light-primary" title="Input Tokens">In: {{ number_format($profile->input_tokens ?? 0) }}</span>
                                    <span class="badge badge-light-info" title="Output Tokens">Out: {{ number_format($profile->output_tokens ?? 0) }}</span>
                                    <span class="badge badge-light-success font-weight-bold" title="Total Tokens">Total: {{ number_format($profile->total_tokens ?? 0) }}</span>
                                </td>
                                <td>
                                    <button class="btn btn-info btn-sm view-palm-profile" data-uuid="{{ $profile->uuid }}">
                                        <i class="feather icon-eye"></i> View
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reusable View Modal Placeholder -->
<div class="modal fade" id="palmProfileViewModal" tabindex="-1" role="dialog" aria-labelledby="palmProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" id="modalContentPlaceholder">
            <!-- AJAX will inject view-modal content here -->
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#palmProfilesTable').DataTable({
            pageLength: 10,
            order: [[0, 'asc']],
            columnDefs: [{
                targets: [6],
                searchable: false,
                orderable: false
            }]
        });

        // Dynamic view details loader
        $(document).on('click', '.view-palm-profile', function() {
            var uuid = $(this).data('uuid');
            $('#modalContentPlaceholder').html(
                '<div class="modal-body text-center p-5">' +
                '<i class="feather icon-loader rotate text-primary" style="font-size: 32px;"></i>' +
                '<p class="mt-2 text-muted">Retrieving profile detail...</p>' +
                '</div>'
            );
            $('#palmProfileViewModal').modal('show');
            
            $.ajax({
                url: "{{ url('palm-profiles') }}/" + uuid,
                type: "GET",
                dataType: "json",
                success: function(response) {
                    if (response.success) {
                        $('#modalContentPlaceholder').html(response.html);
                    } else {
                        $('#modalContentPlaceholder').html(
                            '<div class="modal-body text-center p-5">' +
                            '<i class="feather icon-alert-triangle text-danger" style="font-size: 32px;"></i>' +
                            '<p class="mt-2 text-danger">Failed to load palm profile details.</p>' +
                            '<button type="button" class="btn btn-secondary btn-sm mt-3" data-dismiss="modal">Close</button>' +
                            '</div>'
                        );
                    }
                },
                error: function(xhr, status, error) {
                    $('#modalContentPlaceholder').html(
                        '<div class="modal-body text-center p-5">' +
                        '<i class="feather icon-alert-triangle text-danger" style="font-size: 32px;"></i>' +
                        '<p class="mt-2 text-danger">Error fetching data: ' + error + '</p>' +
                        '<button type="button" class="btn btn-secondary btn-sm mt-3" data-dismiss="modal">Close</button>' +
                        '</div>'
                    );
                }
            });
        });
    });
</script>
@endsection