@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">Edit Verification</h5>
                    </div>
                    <div class="col-6 text-end">
                        <a href="{{ route('verifications.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                @can('update verifications')
                    <form action="{{ route('verifications.update', $verification) }}" method="POST" id="verificationForm">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="checklist_id" class="form-label">Checklist *</label>
                                <select class="form-control @error('checklist_id') is-invalid @enderror" 
                                        id="checklist_id" name="checklist_id" required>
                                    <option value="">Select Checklist</option>
                                    @foreach($checklists as $checklist)
                                        <option value="{{ $checklist->id }}" 
                                            {{ old('checklist_id', $verification->checklist_id) == $checklist->id ? 'selected' : '' }}>
                                            {{ $checklist->mosque->name }} - {{ \Carbon\Carbon::parse($checklist->date)->format('d M Y') }}
                                            ({{ ucfirst(strtolower(str_replace('_', ' ', $checklist->status))) }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('checklist_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="moulvi_id" class="form-label">Moulvi *</label>
                                <select class="form-control @error('moulvi_id') is-invalid @enderror" 
                                        id="moulvi_id" name="moulvi_id" required>
                                    <option value="">Select Moulvi</option>
                                    @foreach($moulvis as $moulvi)
                                        <option value="{{ $moulvi->id }}" 
                                            {{ old('moulvi_id', $verification->moulvi_id) == $moulvi->id ? 'selected' : '' }}>
                                            {{ $moulvi->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('moulvi_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="approve_status" class="form-label">Status *</label>
                                <select class="form-control @error('approve_status') is-invalid @enderror" 
                                        id="approve_status" name="approve_status" required>
                                    @foreach($statuses as $key => $label)
                                        <option value="{{ $key }}" 
                                            {{ old('approve_status', $verification->approve_status) == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('approve_status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- KPI Scores Section -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">KPI Scores (1-10)</h6>
                                <small class="text-muted">Rate each category from 1 (Poor) to 10 (Excellent)</small>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    @foreach($kpiCategories as $key => $label)
                                        <div class="col-md-3 mb-3">
                                            <label for="kpi_{{ $key }}" class="form-label">{{ $label }}</label>
                                            @php
                                                $existingScore = $verification->kpi_score_json[$key] ?? null;
                                            @endphp
                                            <select class="form-control kpi-score" 
                                                    id="kpi_{{ $key }}" 
                                                    name="kpi_score[{{ $key }}]">
                                                <option value="">Select Score</option>
                                                @for($i = 1; $i <= 10; $i++)
                                                    <option value="{{ $i }}" 
                                                        {{ old('kpi_score.' . $key, $existingScore) == $i ? 'selected' : '' }}>
                                                        {{ $i }}
                                                    </option>
                                                @endfor
                                            </select>
                                        </div>
                                    @endforeach
                                </div>
                                
                                <!-- KPI Summary -->
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <div class="alert alert-info">
                                            <div class="row text-center">
                                                <div class="col-md-4">
                                                    <h5 class="mb-1" id="totalScore">
                                                        {{ $verification->kpi_score_json['total_score'] ?? 0 }}
                                                    </h5>
                                                    <small class="text-muted">Total Score</small>
                                                </div>
                                                <div class="col-md-4">
                                                    <h5 class="mb-1" id="averageScore">
                                                        {{ isset($verification->kpi_score_json['average_score']) ? number_format($verification->kpi_score_json['average_score'], 2) : '0.00' }}
                                                    </h5>
                                                    <small class="text-muted">Average Score</small>
                                                </div>
                                                <div class="col-md-4">
                                                    <h5 class="mb-1" id="categoriesScored">
                                                        @php
                                                            $scoredCount = 0;
                                                            if ($verification->kpi_score_json) {
                                                                foreach($kpiCategories as $key => $label) {
                                                                    if (isset($verification->kpi_score_json[$key])) {
                                                                        $scoredCount++;
                                                                    }
                                                                }
                                                            }
                                                        @endphp
                                                        {{ $scoredCount }}
                                                    </h5>
                                                    <small class="text-muted">Categories Scored</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Comments -->
                        <div class="mb-3">
                            <label for="comments" class="form-label">Comments</label>
                            <textarea class="form-control @error('comments') is-invalid @enderror" 
                                      id="comments" name="comments" rows="4" 
                                      placeholder="Enter any comments or feedback...">{{ old('comments', $verification->comments) }}</textarea>
                            @error('comments')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Update Verification
                            </button>
                            <a href="{{ route('verifications.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                @else
                    <div class="alert alert-danger">
                        <i class="fas fa-ban"></i> You don't have permission to update verifications.
                    </div>
                @endcan
            </div>
        </div>
    </div>
@endsection

@push('script')
<script>
$(document).ready(function() {
    // Calculate KPI scores
    function calculateKPI() {
        let totalScore = 0;
        let categoriesScored = 0;
        
        $('.kpi-score').each(function() {
            let score = $(this).val();
            if (score && score !== '') {
                totalScore += parseInt(score);
                categoriesScored++;
            }
        });
        
        $('#totalScore').text(totalScore);
        $('#categoriesScored').text(categoriesScored);
        
        if (categoriesScored > 0) {
            let averageScore = totalScore / categoriesScored;
            $('#averageScore').text(averageScore.toFixed(2));
        } else {
            $('#averageScore').text('0.00');
        }
    }
    
    // Initial calculation
    calculateKPI();
    
    // Recalculate when scores change
    $('.kpi-score').on('change', function() {
        calculateKPI();
    });
});
</script>
@endpush