@extends('layouts.app')

@section('title', 'Blasting Approval')
@section('subtitle', 'Manage blasting operation approvals')

@section('content')
<div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('safety.blasting-control') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Blasting Control
        </a>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
        </div>
    @endif

    <!-- Operation Details -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-bomb text-red-600 mr-2"></i>
            Operation Details
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
                <label class="text-sm font-medium text-gray-500">Operation Code</label>
                <p class="text-sm text-gray-900">{{ $operation->operation_code }}</p>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-500">Blast Zone</label>
                <p class="text-sm text-gray-900">{{ $operation->blast_zone }}</p>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-500">Status</label>
                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                    {{ $operation->status === 'initiated' ? 'bg-yellow-100 text-yellow-800' : 
                       ($operation->status === 'ready_to_execute' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800') }}">
                    {{ ucfirst($operation->status) }}
                </span>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-500">Safety Officer</label>
                <p class="text-sm text-gray-900">{{ $operation->safetyOfficer->full_name ?? 'Not assigned' }}</p>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-500">Supervisor</label>
                <p class="text-sm text-gray-900">{{ $operation->supervisor->full_name ?? 'Not assigned' }}</p>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-500">Created</label>
                <p class="text-sm text-gray-900">{{ $operation->created_at->format('M d, Y H:i') }}</p>
            </div>
        </div>
    </div>

    <!-- Approval Status -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-clipboard-check text-purple-600 mr-2"></i>
            Approval Status
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Blast Manager Approval -->
            <div class="border rounded-lg p-4 {{ $approvals->where('approval_level', 'blast_manager')->first()?->status === 'approved' ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                <div class="flex items-center justify-between mb-2">
                    <h4 class="font-medium text-gray-900">Blast Manager</h4>
                    @if($approvals->where('approval_level', 'blast_manager')->first())
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $approvals->where('approval_level', 'blast_manager')->first()->status_badge_color }}">
                            {{ ucfirst($approvals->where('approval_level', 'blast_manager')->first()->status) }}
                        </span>
                    @else
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                            Pending
                        </span>
                    @endif
                </div>
                @if($approvals->where('approval_level', 'blast_manager')->first())
                    <p class="text-sm text-gray-600">
                        {{ $approvals->where('approval_level', 'blast_manager')->first()->approver->full_name }}
                    </p>
                    @if($approvals->where('approval_level', 'blast_manager')->first()->approval_notes)
                        <p class="text-xs text-gray-500 mt-1">
                            {{ $approvals->where('approval_level', 'blast_manager')->first()->approval_notes }}
                        </p>
                    @endif
                @else
                    <p class="text-sm text-gray-500">No approval request created</p>
                @endif
            </div>

            <!-- Safety Manager Approval -->
            <div class="border rounded-lg p-4 {{ $approvals->where('approval_level', 'safety_manager')->first()?->status === 'approved' ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                <div class="flex items-center justify-between mb-2">
                    <h4 class="font-medium text-gray-900">Safety Manager</h4>
                    @if($approvals->where('approval_level', 'safety_manager')->first())
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $approvals->where('approval_level', 'safety_manager')->first()->status_badge_color }}">
                            {{ ucfirst($approvals->where('approval_level', 'safety_manager')->first()->status) }}
                        </span>
                    @else
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                            Pending
                        </span>
                    @endif
                </div>
                @if($approvals->where('approval_level', 'safety_manager')->first())
                    <p class="text-sm text-gray-600">
                        {{ $approvals->where('approval_level', 'safety_manager')->first()->approver->full_name }}
                    </p>
                    @if($approvals->where('approval_level', 'safety_manager')->first()->approval_notes)
                        <p class="text-xs text-gray-500 mt-1">
                            {{ $approvals->where('approval_level', 'safety_manager')->first()->approval_notes }}
                        </p>
                    @endif
                @else
                    <p class="text-sm text-gray-500">No approval request created</p>
                @endif
            </div>

            <!-- Mine Manager Approval -->
            <div class="border rounded-lg p-4 {{ $approvals->where('approval_level', 'mine_manager')->first()?->status === 'approved' ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                <div class="flex items-center justify-between mb-2">
                    <h4 class="font-medium text-gray-900">Mine Manager</h4>
                    @if($approvals->where('approval_level', 'mine_manager')->first())
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $approvals->where('approval_level', 'mine_manager')->first()->status_badge_color }}">
                            {{ ucfirst($approvals->where('approval_level', 'mine_manager')->first()->status) }}
                        </span>
                    @else
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                            Pending
                        </span>
                    @endif
                </div>
                @if($approvals->where('approval_level', 'mine_manager')->first())
                    <p class="text-sm text-gray-600">
                        {{ $approvals->where('approval_level', 'mine_manager')->first()->approver->full_name }}
                    </p>
                    @if($approvals->where('approval_level', 'mine_manager')->first()->approval_notes)
                        <p class="text-xs text-gray-500 mt-1">
                            {{ $approvals->where('approval_level', 'mine_manager')->first()->approval_notes }}
                        </p>
                    @endif
                @else
                    <p class="text-sm text-gray-500">No approval request created</p>
                @endif
            </div>
        </div>

        <!-- Overall Status -->
        <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
            <div class="flex items-center justify-between">
                <div>
                    <h4 class="font-medium text-blue-900">Overall Approval Status</h4>
                    <p class="text-sm text-blue-700">
                        {{ $approvals->where('status', 'approved')->count() }}/3 approvals completed
                    </p>
                </div>
                @if($approvals->where('status', 'approved')->count() >= 3)
                    <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800">
                        Ready to Execute
                    </span>
                @else
                    <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-yellow-100 text-yellow-800">
                        Awaiting Approvals
                    </span>
                @endif
            </div>
        </div>
    </div>

    <!-- Create Approval Requests -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-plus text-green-600 mr-2"></i>
            Create Approval Requests
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Blast Manager Request -->
            <div class="border rounded-lg p-4">
                <h4 class="font-medium text-gray-900 mb-3">Blast Manager</h4>
                @if($approvals->where('approval_level', 'blast_manager')->first())
                    <p class="text-sm text-gray-500">Request already exists</p>
                @else
                    <form method="POST" action="{{ route('safety.blasting.approval.create', $operation->operation_code) }}">
                        @csrf
                        <input type="hidden" name="approval_level" value="blast_manager">
                        <select name="approver_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Blast Manager</option>
                            @foreach($blastManagers as $manager)
                                <option value="{{ $manager->id }}">{{ $manager->full_name }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="mt-2 w-full px-3 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                            Create Request
                        </button>
                    </form>
                @endif
            </div>

            <!-- Safety Manager Request -->
            <div class="border rounded-lg p-4">
                <h4 class="font-medium text-gray-900 mb-3">Safety Manager</h4>
                @if($approvals->where('approval_level', 'safety_manager')->first())
                    <p class="text-sm text-gray-500">Request already exists</p>
                @else
                    <form method="POST" action="{{ route('safety.blasting.approval.create', $operation->operation_code) }}">
                        @csrf
                        <input type="hidden" name="approval_level" value="safety_manager">
                        <select name="approver_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Safety Manager</option>
                            @foreach($safetyManagers as $manager)
                                <option value="{{ $manager->id }}">{{ $manager->full_name }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="mt-2 w-full px-3 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                            Create Request
                        </button>
                    </form>
                @endif
            </div>

            <!-- Mine Manager Request -->
            <div class="border rounded-lg p-4">
                <h4 class="font-medium text-gray-900 mb-3">Mine Manager</h4>
                @if($approvals->where('approval_level', 'mine_manager')->first())
                    <p class="text-sm text-gray-500">Request already exists</p>
                @else
                    <form method="POST" action="{{ route('safety.blasting.approval.create', $operation->operation_code) }}">
                        @csrf
                        <input type="hidden" name="approval_level" value="mine_manager">
                        <select name="approver_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Mine Manager</option>
                            @foreach($mineManagers as $manager)
                                <option value="{{ $manager->id }}">{{ $manager->full_name }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="mt-2 w-full px-3 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
                            Create Request
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>

    <!-- Approval Actions -->
    @if($approvals->count() > 0)
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fas fa-cogs text-orange-600 mr-2"></i>
                Approval Actions
            </h3>
            
            <div class="space-y-4">
                @foreach($approvals as $approval)
                    <div class="border rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <div>
                                <h4 class="font-medium text-gray-900">{{ $approval->approval_level_display }}</h4>
                                <p class="text-sm text-gray-600">{{ $approval->approver->full_name }}</p>
                            </div>
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $approval->status_badge_color }}">
                                {{ ucfirst($approval->status) }}
                            </span>
                        </div>

                        @if($approval->status === 'pending' && auth()->user()->hasRole($approval->approval_level))
                            <!-- Approval Form -->
                            <form method="POST" action="{{ route('safety.blasting.approval.approve', $approval) }}" class="mb-3">
                                @csrf
                                <div class="mb-3">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Approval Notes</label>
                                    <textarea name="approval_notes" rows="2" 
                                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-green-500 focus:border-green-500"
                                              placeholder="Enter approval notes..."></textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Safety Checks</label>
                                    <div class="space-y-2">
                                        <label class="flex items-center">
                                            <input type="checkbox" name="safety_checks[]" value="personnel_clear" class="mr-2">
                                            <span class="text-sm text-gray-700">Personnel Clear</span>
                                        </label>
                                        <label class="flex items-center">
                                            <input type="checkbox" name="safety_checks[]" value="equipment_verified" class="mr-2">
                                            <span class="text-sm text-gray-700">Equipment Verified</span>
                                        </label>
                                        <label class="flex items-center">
                                            <input type="checkbox" name="safety_checks[]" value="weather_conditions" class="mr-2">
                                            <span class="text-sm text-gray-700">Weather Conditions</span>
                                        </label>
                                    </div>
                                </div>
                                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                                    <i class="fas fa-check mr-2"></i>
                                    Approve
                                </button>
                            </form>

                            <!-- Rejection Form -->
                            <form method="POST" action="{{ route('safety.blasting.approval.reject', $approval) }}">
                                @csrf
                                <div class="mb-3">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Rejection Reason</label>
                                    <textarea name="rejection_reason" rows="2" required
                                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-red-500 focus:border-red-500"
                                              placeholder="Enter rejection reason..."></textarea>
                                </div>
                                <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
                                    <i class="fas fa-times mr-2"></i>
                                    Reject
                                </button>
                            </form>
                        @elseif($approval->status === 'approved')
                            <div class="text-sm text-green-600">
                                <i class="fas fa-check-circle mr-1"></i>
                                Approved on {{ $approval->approved_at->format('M d, Y H:i') }}
                                @if($approval->approval_notes)
                                    <p class="text-gray-600 mt-1">{{ $approval->approval_notes }}</p>
                                @endif
                            </div>
                        @elseif($approval->status === 'rejected')
                            <div class="text-sm text-red-600">
                                <i class="fas fa-times-circle mr-1"></i>
                                Rejected on {{ $approval->rejected_at->format('M d, Y H:i') }}
                                @if($approval->rejection_reason)
                                    <p class="text-gray-600 mt-1">{{ $approval->rejection_reason }}</p>
                                @endif
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>
@endsection