@extends('layouts.app')

@section('title', $inspection->title)

@section('content')
<div class="min-h-screen pb-20 bg-gradient-to-b from-emerald-50 to-white">
    <!-- Header -->
    <div class="bg-white border-b border-slate-200 px-4 py-4 sticky top-0 z-10">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <a href="{{ route('app.inspections.index') }}" class="p-1 -ml-1">
                    <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                </a>
                <div>
                    <h1 class="text-lg font-bold text-slate-900">{{ $inspection->title }}</h1>
                    <p class="text-xs text-slate-500">{{ $inspection->site->name }}</p>
                </div>
            </div>
            <span class="px-3 py-1 text-xs font-medium rounded-full {{ $inspection->status === 'done' ? 'bg-emerald-100 text-emerald-700' : ($inspection->status === 'in_progress' ? 'bg-blue-100 text-blue-700' : 'bg-amber-100 text-amber-700') }}">
                {{ ucfirst(str_replace('_', ' ', $inspection->status)) }}
            </span>
        </div>
    </div>

    <div class="px-4 py-6 space-y-4">
        <!-- Description -->
        @if($inspection->description)
            <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4">
                <h3 class="text-sm font-semibold text-slate-700 mb-2 flex items-center space-x-1.5">
                    <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
                    </svg>
                    <span>Description</span>
                </h3>
                <p class="text-sm text-slate-600 whitespace-pre-wrap">{{ $inspection->description }}</p>
            </div>
        @endif

        <!-- Admin Section (if admin uploaded photos/notes) -->
        @php
            $adminPhotos = $inspection->photos->filter(fn($p) => $p->user->role === 'admin');
            $adminNotes = $inspection->notes->filter(fn($n) => $n->user->role === 'admin');
        @endphp
        @if($adminPhotos->count() > 0 || $adminNotes->count() > 0)
            <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4">
                <h3 class="text-sm font-semibold text-slate-900 mb-3 flex items-center space-x-2">
                    <div class="w-6 h-6 rounded bg-indigo-100 flex items-center justify-center">
                        <svg class="w-3 h-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                        </svg>
                    </div>
                    <span>Admin Instructions</span>
                </h3>
                @if($adminPhotos->count() > 0)
                    <div class="mb-3">
                        <p class="text-xs text-slate-500 mb-2">Reference Photos:</p>
                        <div class="grid grid-cols-3 gap-2">
                            @foreach($adminPhotos as $photo)
                                <a href="{{ Storage::url($photo->path) }}" target="_blank" class="aspect-square rounded-lg overflow-hidden bg-slate-100">
                                    <img src="{{ Storage::url($photo->path) }}" alt="{{ $photo->caption }}" class="w-full h-full object-cover">
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
                @if($adminNotes->count() > 0)
                    <div class="space-y-2">
                        @foreach($adminNotes as $note)
                            <div class="bg-indigo-50 rounded-lg p-3 border-l-4 border-indigo-500">
                                <p class="text-sm text-slate-700">{{ $note->note }}</p>
                                <p class="text-xs text-slate-500 mt-1">{{ $note->user->name }}</p>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif

        <!-- Upload Photo -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4" x-data="{ photoPreview: null, uploading: false }">
            <h3 class="text-sm font-semibold text-slate-900 mb-3 flex items-center space-x-1.5">
                <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                <span>Upload Photo</span>
            </h3>
            <form method="POST" action="{{ route('app.inspections.photos.store', $inspection) }}" enctype="multipart/form-data" @submit="uploading = true">
                @csrf
                <div class="space-y-3">
                    <div>
                        <input 
                            type="file" 
                            name="photo" 
                            accept="image/*" 
                            capture="environment" 
                            required 
                            @change="
                                const file = $event.target.files[0];
                                if (file) {
                                    const reader = new FileReader();
                                    reader.onload = (e) => photoPreview = e.target.result;
                                    reader.readAsDataURL(file);
                                }
                            "
                            class="hidden"
                            id="photoInput"
                        >
                        <label for="photoInput" class="block w-full py-3 px-4 border-2 border-dashed border-slate-300 rounded-lg text-center cursor-pointer hover:border-emerald-500 transition-colors">
                            <svg class="w-8 h-8 text-slate-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <p class="text-sm font-medium text-slate-600">Tap to take photo</p>
                            <p class="text-xs text-slate-400 mt-1">or select from gallery</p>
                        </label>
                        <div x-show="photoPreview" class="mt-3">
                            <img :src="photoPreview" alt="Preview" class="w-full rounded-lg">
                        </div>
                    </div>
                    <input 
                        type="text" 
                        name="caption" 
                        placeholder="Add a caption (optional)" 
                        class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm"
                    >
                    <button 
                        type="submit" 
                        :disabled="uploading"
                        class="w-full py-3 bg-emerald-600 text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
                    >
                        <svg x-show="uploading" class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span x-text="uploading ? 'Uploading...' : 'Upload Photo'"></span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Add Note -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4" x-data="{ submitting: false }">
            <h3 class="text-sm font-semibold text-slate-900 mb-3 flex items-center space-x-1.5">
                <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
                <span>Add Note</span>
            </h3>
            <form method="POST" action="{{ route('app.inspections.notes.store', $inspection) }}" @submit="submitting = true">
                @csrf
                <textarea 
                    name="note" 
                    rows="4" 
                    required 
                    placeholder="Enter your note..." 
                    class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm resize-none mb-3"
                ></textarea>
                <button 
                    type="submit" 
                    :disabled="submitting"
                    class="w-full py-3 bg-emerald-600 text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
                >
                    <svg x-show="submitting" class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span x-text="submitting ? 'Adding...' : 'Add Note'"></span>
                </button>
            </form>
        </div>

        <!-- Your Photos -->
        @php
            $cleanerPhotos = $inspection->photos->filter(fn($p) => $p->user->role === 'cleaner');
        @endphp
        @if($cleanerPhotos->count() > 0)
            <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4">
                <h3 class="text-sm font-semibold text-slate-900 mb-3 flex items-center space-x-1.5">
                    <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    <span>Your Photos ({{ $cleanerPhotos->count() }})</span>
                </h3>
                <div class="grid grid-cols-3 gap-2">
                    @foreach($cleanerPhotos as $photo)
                        <a href="{{ Storage::url($photo->path) }}" target="_blank" class="aspect-square rounded-lg overflow-hidden bg-slate-100">
                            <img src="{{ Storage::url($photo->path) }}" alt="{{ $photo->caption }}" class="w-full h-full object-cover">
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Your Notes -->
        @php
            $cleanerNotes = $inspection->notes->filter(fn($n) => $n->user->role === 'cleaner');
        @endphp
        @if($cleanerNotes->count() > 0)
            <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4">
                <h3 class="text-sm font-semibold text-slate-900 mb-3 flex items-center space-x-1.5">
                    <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    <span>Your Notes ({{ $cleanerNotes->count() }})</span>
                </h3>
                <div class="space-y-3">
                    @foreach($cleanerNotes as $note)
                        <div class="bg-emerald-50 rounded-lg p-3 border-l-4 border-emerald-500">
                            <p class="text-sm text-slate-700 whitespace-pre-wrap">{{ $note->note }}</p>
                            <p class="text-xs text-slate-500 mt-2">{{ $note->created_at->format('M d, Y H:i') }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Complete Inspection Button -->
        @if($inspection->status !== 'done')
            <form method="POST" action="{{ route('app.inspections.complete', $inspection) }}" x-data="{ submitting: false }" @submit="submitting = true">
                @csrf
                <button 
                    type="submit" 
                    :disabled="submitting"
                    class="w-full py-4 bg-emerald-600 text-white rounded-xl font-semibold hover:bg-emerald-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 shadow-md"
                >
                    <svg x-show="!submitting" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <svg x-show="submitting" class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span x-text="submitting ? 'Completing...' : 'Mark as Complete'"></span>
                </button>
            </form>
        @endif
    </div>
</div>

@include('app.partials.bottom-nav')
@endsection