@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">Create 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('create verifications')
                    <form action="{{ route('verifications.store') }}" method="POST" id="verificationForm">
                        @csrf
                        
                        <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') == $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
                                <!--<small class="text-muted">Only checklists without existing verification are shown</small>-->
                            </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') == $moulvi->id ? 'selected' : '' }}>
                                            {{ $moulvi->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('moulvi_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <!--<small class="text-muted">Only users with 'moulvi' role are shown</small>-->
                            </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') == $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>
                                            <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) == $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">0</h5>
                                                    <small class="text-muted">Total Score</small>
                                                </div>
                                                <div class="col-md-4">
                                                    <h5 class="mb-1" id="averageScore">0.00</h5>
                                                    <small class="text-muted">Average Score</small>
                                                </div>
                                                <div class="col-md-4">
                                                    <h5 class="mb-1" id="categoriesScored">0</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') }}</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> Save 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 create 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();
    });
    
    // Form validation
    $('#verificationForm').on('submit', function(e) {
        let checklistId = $('#checklist_id').val();
        if (!checklistId) {
            e.preventDefault();
            Swal.fire('Error', 'Please select a checklist', 'error');
            return false;
        }
        
        let moulviId = $('#moulvi_id').val();
        if (!moulviId) {
            e.preventDefault();
            Swal.fire('Error', 'Please select a moulvi', 'error');
            return false;
        }
        
        // Check if at least one KPI score is selected
        let hasKpiScore = false;
        $('.kpi-score').each(function() {
            if ($(this).val()) {
                hasKpiScore = true;
                return false; // break loop
            }
        });
        
        if (!hasKpiScore) {
            e.preventDefault();
            Swal.fire({
                title: 'No KPI Scores',
                text: 'You haven\'t entered any KPI scores. Are you sure you want to continue?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Continue Anyway',
                cancelButtonText: 'Add Scores'
            }).then((result) => {
                if (!result.isConfirmed) {
                    e.preventDefault();
                }
            });
        }
    });
});
</script>
@endpush