@props(['palmProfile'])

<div class="modal-header">
    <h5 class="modal-title" id="palmProfileModalLabel">Palm Profile: {{ $palmProfile->first_name }} {{ $palmProfile->last_name }}</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="row">
        <!-- Profile Info -->
        <div class="col-md-7">
            <table class="table table-bordered table-sm">
                <tr>
                    <th width="150" class="bg-light">UUID</th>
                    <td><code>{{ $palmProfile->uuid }}</code></td>
                </tr>
                <tr>
                    <th class="bg-light">Full Name</th>
                    <td><strong>{{ $palmProfile->first_name }} {{ $palmProfile->last_name }}</strong></td>
                </tr>
                <tr>
                    <th class="bg-light">Gender</th>
                    <td>
                        <x-badge type="gender" :value="$palmProfile->gender" />
                    </td>
                </tr>
                <tr>
                    <th class="bg-light">Birth Date</th>
                    <td>{{ $palmProfile->birth_date ? \Carbon\Carbon::parse($palmProfile->birth_date)->format('j F, Y') : 'N/A' }}</td>
                </tr>
                <tr>
                    <th class="bg-light">Birth Time</th>
                    <td>{{ $palmProfile->birth_time ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <th class="bg-light">Birth Place</th>
                    <td>{{ $palmProfile->birth_place ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <th class="bg-light">Analysis Status</th>
                    <td>
                        <x-badge type="status" :value="$palmProfile->status" />
                    </td>
                </tr>
                @if($palmProfile->status_message)
                <tr>
                    <th class="bg-light">Status Message</th>
                    <td><span class="text-muted">{{ $palmProfile->status_message }}</span></td>
                </tr>
                @endif
                @if($palmProfile->status_timestamp)
                <tr>
                    <th class="bg-light">Status Timestamp</th>
                    <td><x-date-display :date="$palmProfile->status_timestamp" /></td>
                </tr>
                @endif
                <tr>
                    <th class="bg-light">Token Usage</th>
                    <td>
                        <span class="badge badge-light-primary mr-1">Input: {{ number_format($palmProfile->input_tokens ?? 0) }}</span>
                        <span class="badge badge-light-info mr-1">Output: {{ number_format($palmProfile->output_tokens ?? 0) }}</span>
                        <span class="badge badge-light-success font-weight-bold">Total: {{ number_format($palmProfile->total_tokens ?? 0) }}</span>
                    </td>
                </tr>
                <tr>
                    <th class="bg-light">Created At</th>
                    <td><x-date-display :date="$palmProfile->created_at" /></td>
                </tr>
                <tr>
                    <th class="bg-light">Updated At</th>
                    <td><x-date-display :date="$palmProfile->updated_at" /></td>
                </tr>
            </table>
        </div>
        
        <!-- Hand Images -->
        <div class="col-md-5 text-center">
            <div class="row">
                <div class="col-6 mb-3">
                    <h6 class="font-weight-bold mb-2">Left Hand</h6>
                    <x-image-preview :src="$palmProfile->left_hand_image_url" alt="Left Hand" />
                </div>
                <div class="col-6 mb-3">
                    <h6 class="font-weight-bold mb-2">Right Hand</h6>
                    <x-image-preview :src="$palmProfile->right_hand_image_url" alt="Right Hand" />
                </div>
            </div>
        </div>
    </div>

    <!-- Collapsible JSON Analysis -->
    <div class="row mt-3">
        <div class="col-12">
            <div class="card shadow-none border mb-0">
                <div class="card-header p-2 bg-light d-flex justify-content-between align-items-center" id="jsonHeading">
                    <h6 class="mb-0 text-dark font-weight-bold">
                        <i class="feather icon-file-text mr-1 text-primary"></i> Palm Analysis Report
                    </h6>
                    <button class="btn btn-link btn-sm p-0 font-weight-bold" type="button" data-toggle="collapse" data-target="#jsonCollapse" aria-expanded="false" aria-controls="jsonCollapse">
                        Toggle Details
                    </button>
                </div>

                <div id="jsonCollapse" class="collapse" aria-labelledby="jsonHeading">
                    <div class="card-body bg-dark text-white p-3 rounded-bottom" style="max-height: 250px; overflow-y: auto;">
                        @if($palmProfile->palm_analysis_json)
                            <pre class="m-0"><code class="text-success">{{ json_encode($palmProfile->palm_analysis_json, JSON_PRETTY_PRINT) }}</code></pre>
                        @else
                            <span class="text-muted">No Analysis Data Available</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>