@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-6">
                        <h5 class="card-title mb-0">Proof Media Details</h5>
                    </div>
                    <div class="col-6 text-end">
                        <a href="{{ route('proof-media.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">Media Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="text-center mb-4">
                                    @php
                                        $extension = pathinfo($proofMedia->file_url, PATHINFO_EXTENSION);
                                        $imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];
                                        $videoExtensions = ['mp4', 'mov', 'avi'];
                                    @endphp
                                    
                                    @if(in_array(strtolower($extension), $imageExtensions))
                                        <img src="{{ asset($proofMedia->file_url) }}" 
                                             class="img-fluid rounded" 
                                             alt="Proof Media"
                                             style="max-height: 300px;">
                                    @elseif(in_array(strtolower($extension), $videoExtensions))
                                        <video controls width="100%" style="max-height: 300px;">
                                            <source src="{{ asset($proofMedia->file_url) }}" type="video/{{ $extension }}">
                                            Your browser does not support the video tag.
                                        </video>
                                    @else
                                        <div class="border rounded p-5 text-center">
                                            <i class="fas fa-file fa-5x text-secondary"></i>
                                            <h5 class="mt-3">Document File</h5>
                                            <p class="text-muted">Format: {{ strtoupper($extension) }}</p>
                                        </div>
                                    @endif
                                    
                                    <div class="mt-3">
                                        <a href="{{ asset($proofMedia->file_url) }}" target="_blank" class="btn btn-info">
                                            <i class="fas fa-external-link-alt"></i> Open Original
                                        </a>
                                        <a href="{{ route('proof-media.download', $proofMedia) }}" class="btn btn-success">
                                            <i class="fas fa-download"></i> Download File
                                        </a>
                                    </div>
                                </div>

                                <table class="table table-borderless">
                                    <tr>
                                        <th width="35%" class="text-muted">File Hash:</th>
                                        <td>
                                            <code class="small">{{ $proofMedia->hash }}</code><br>
                                            <small class="text-muted">SHA-256 checksum for duplicate detection</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Source:</th>
                                        <td>
                                            <span class="badge bg-{{ $proofMedia->source == 'whatsapp' ? 'success' : 'primary' }}">
                                                {{ ucfirst($proofMedia->source) }}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Uploaded By:</th>
                                        <td>
                                            @if($proofMedia->uploader)
                                                {{ $proofMedia->uploader->name }}
                                                @if($proofMedia->uploader->email)
                                                    <br><small class="text-muted">{{ $proofMedia->uploader->email }}</small>
                                                @endif
                                            @else
                                                <span class="text-muted">System</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Uploaded At:</th>
                                        <td>{{ $proofMedia->created_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Last Updated:</th>
                                        <td>{{ $proofMedia->updated_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        @canany(['update proof media', 'delete proof media'])
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Actions</h6>
                                </div>
                                <div class="card-body">
                                    <div class="btn-group" role="group">
                                        @can('update proof media')
                                            <a href="{{ route('proof-media.edit', $proofMedia) }}" class="btn btn-warning">
                                                <i class="fas fa-edit"></i> Edit Media
                                            </a>
                                        @endcan
                                        
                                        @can('delete proof media')
                                            <form action="{{ route('proof-media.destroy', $proofMedia) }}" method="POST" 
                                                  style="display: inline;" 
                                                  onsubmit="return confirm('Are you sure you want to delete this proof media?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger">
                                                    <i class="fas fa-trash"></i> Delete Media
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </div>
                            </div>
                        @endcanany
                    </div>

                    <div class="col-md-6">
                        <!-- Checklist Item Info -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">Checklist Item Details</h6>
                            </div>
                            <div class="card-body">
                                <table class="table table-borderless">
                                    <tr>
                                        <th width="40%" class="text-muted">Task Title:</th>
                                        <td>
                                            <a href="{{ route('checklist-items.show', $proofMedia->checklist_item_id) }}" class="text-primary">
                                                {{ $proofMedia->checklistItem->task_title }}
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Checklist:</th>
                                       <td>
                                        <a href="{{ route('checklists.show', $proofMedia->checklistItem->checklist_id) }}" class="text-primary">
                                            {{ $proofMedia->checklistItem->checklist->mosque->name }} -
                                            {{ \Carbon\Carbon::parse($proofMedia->checklistItem->checklist->date)->format('d M Y') }}
                                        </a>
                                    </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Mosque:</th>
                                        <td>
                                            <a href="{{ route('mosques.show', $proofMedia->checklistItem->checklist->mosque_id) }}" class="text-primary">
                                                {{ $proofMedia->checklistItem->checklist->mosque->name }}
                                            </a>
                                            @if($proofMedia->checklistItem->checklist->mosque->location)
                                                <br><small class="text-muted">{{ $proofMedia->checklistItem->checklist->mosque->location }}</small>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Cleaner:</th>
                                        <td>
                                            @if($proofMedia->checklistItem->checklist->cleaner)
                                                {{ $proofMedia->checklistItem->checklist->cleaner->name }}
                                            @else
                                                <span class="text-muted">Not Assigned</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Proof Required:</th>
                                        <td>
                                            @if($proofMedia->checklistItem->proof_required)
                                                <span class="badge bg-success">Yes</span>
                                            @else
                                                <span class="badge bg-secondary">No</span>
                                            @endif
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <!-- Audit Logs -->
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Audit Trail</h6>
                            </div>
                            <div class="card-body">
                                <p class="text-muted">All changes to this proof media are logged for accountability.</p>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> 
                                    Audit logs are automatically recorded for:
                                    <ul class="mt-2 mb-0">
                                        <li>File uploads</li>
                                        <li>Metadata changes</li>
                                        <li>File downloads</li>
                                        <li>Deletion</li>
                                    </ul>
                                </div>
                                <a href="{{ route('audit-logs.index', ['model' => 'proof_media', 'model_id' => $proofMedia->id]) }}" 
                                   class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-history"></i> View Audit Logs
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection