@extends('layouts.app')

@section('title', 'Task Report - ' . $task->title)

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">{{ $task->title }}</h4>
            <p class="text-muted mb-0">Task Report & Statistics</p>
        </div>
        <div class="d-flex gap-2">
            @if($isSupportTask)
                <a href="{{ route('tasks.support.show', $task) }}" class="btn btn-outline-secondary">
                    <i class="icon-base ti tabler-arrow-left me-1"></i>
                    Back to Details
                </a>
            @elseif($isPaymentPlanningTask)
                <a href="{{ route('tasks.payment-planning.show', $task) }}" class="btn btn-outline-secondary">
                    <i class="icon-base ti tabler-arrow-left me-1"></i>
                    Back to Details
                </a>
            @elseif($isMarketingTask)
                <a href="{{ route('tasks.digital-marketing.show', $task) }}" class="btn btn-outline-secondary">
                    <i class="icon-base ti tabler-arrow-left me-1"></i>
                    Back to Details
                </a>
            @else
                <a href="{{ route('tasks.index') }}" class="btn btn-outline-secondary">
                    <i class="icon-base ti tabler-arrow-left me-1"></i>
                    Back to Calendar
                </a>
            @endif
        </div>
    </div>

    @include('partials.alerts')

    <!-- Task Information -->
    <div class="card mb-4">
        <div class="card-body bg-label-info">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label text-muted mb-1">Task Title</label>
                    <p class="mb-0 fw-medium">{{ $task->title }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label text-muted mb-1">Department</label>
                    <p class="mb-0">{{ $task->department->name ?? '-' }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label text-muted mb-1">Status</label>
                    <p class="mb-0">
                        <span class="badge bg-label-{{ [
                            \App\Models\Task::STATUS_NOT_STARTED => 'warning',
                            \App\Models\Task::STATUS_IN_PROGRESS => 'info',
                            \App\Models\Task::STATUS_COMPLETED => 'success',
                        ][$task->status] ?? 'primary' }}">
                            {{ ucfirst(str_replace('_', ' ', $task->status)) }}
                        </span>
                    </p>
                </div>
                <div class="col-md-3">
                    <label class="form-label text-muted mb-1">Due Date</label>
                    <p class="mb-0">{{ $task->due_date->format('d M Y') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Call Statistics -->
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <div class="display-6 fw-bold text-primary">{{ $totalCalls }}</div>
                    <p class="text-muted mb-0">Total Calls Made</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <div class="display-6 fw-bold text-success">{{ $callsByUser->count() }}</div>
                    <p class="text-muted mb-0">Unique Callers</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <div class="display-6 fw-bold text-warning">{{ $potentialIssues->count() }}</div>
                    <p class="text-muted mb-0">Potential Issues</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Calls by User -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Calls by User</h5>
        </div>
        <div class="card-body">
            @if($callsByUser->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light bg-label-success">
                            <tr>
                                <th>User Name</th>
                                <th class="text-end">Number of Calls</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($callsByUser as $userName => $callCount)
                                <tr>
                                    <td class="fw-medium">{{ $userName }}</td>
                                    <td class="text-end">
                                        <span class="badge bg-label-primary">{{ $callCount }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-muted text-center py-4 mb-0">No calls recorded yet.</p>
            @endif
        </div>
    </div>

    <!-- Potential Issues -->
    @if($potentialIssues->count() > 0)
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Potential Issues from Calls</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light bg-label-success">
                            <tr>
                                <th>School Name</th>
                                <th>Issue Type</th>
                                <th>Issue Description</th>
                                <th>Called By</th>
                                <th>Call Date</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($potentialIssues as $index => $issue)
                                <tr>
                                    <td class="fw-medium">{{ $issue['school_name'] }}</td>
                                    <td>
                                        @if($issue['issue_type'])
                                            <span class="badge bg-label-info">{{ $issue['issue_type'] }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="text-wrap" style="max-width: 300px;">
                                            {{ $issue['issue_description'] ?? '-' }}
                                        </div>
                                    </td>
                                    <td>{{ $issue['called_by'] ?? '-' }}</td>
                                    <td>{{ $issue['called_date'] ? \Carbon\Carbon::parse($issue['called_date'])->format('d M Y') : '-' }}</td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-sm btn-primary" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#createIssueModal{{ $index }}">
                                            <i class="icon-base ti tabler-plus me-1"></i>
                                            Create Issue
                                        </button>
                                    </td>
                                </tr>

                                <!-- Create Issue Modal -->
                                <div class="modal fade" id="createIssueModal{{ $index }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Create Issue</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <form method="POST" action="{{ route('issues.store') }}">
                                                @csrf
                                                <div class="modal-body">
                                                    <input type="hidden" name="school_id" value="{{ $issue['school_id'] }}">
                                                    <input type="hidden" name="issue_type_id" value="{{ $issue['issue_type_id'] ?? '' }}">
                                                    <input type="hidden" name="status" value="{{ \App\Models\Issue::STATUS_NOT_STARTED }}">
                                                    
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label">School Name</label>
                                                            <input type="text" class="form-control" value="{{ $issue['school_name'] }}" readonly>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Issue Type</label>
                                                            <select name="issue_type_id" class="form-select js-issue-type" required>
                                                                <option value="">Select type</option>
                                                                @foreach($issueTypes as $type)
                                                                    <option value="{{ $type->id }}" 
                                                                            data-min="{{ $type->min_resolution_hours }}" 
                                                                            data-max="{{ $type->max_resolution_hours }}"
                                                                            @selected($issue['issue_type_id'] == $type->id)>
                                                                        {{ $type->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Issue Date <span class="text-danger">*</span></label>
                                                            <input type="text" name="issue_date" class="form-control js-date-picker" 
                                                                   value="{{ now()->format('Y-m-d') }}" required>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Department <span class="text-danger">*</span></label>
                                                            <select name="department_id" class="form-select js-department" required>
                                                                <option value="">Select department</option>
                                                                @foreach($departments as $dept)
                                                                    <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-12">
                                                            <label class="form-label">Description <span class="text-danger">*</span></label>
                                                            <textarea name="description" class="form-control" rows="4" required>{{ $issue['issue_description'] ?? '' }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-primary">Create Issue</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif

    <!-- All Calls List -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">All Calls</h5>
        </div>
        <div class="card-body">
            @if($allCalls->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light bg-label-success">
                            <tr>
                                <th>Call Date</th>
                                <th>Type</th>
                                <th>School Name</th>
                                <th>Called By</th>
                                <th>Call Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($allCalls as $call)
                                <tr>
                                    <td>{{ $call['called_date'] ? \Carbon\Carbon::parse($call['called_date'])->format('d M Y') : '-' }}</td>
                                    <td>
                                        <span class="badge bg-label-info">{{ $call['type'] }}</span>
                                    </td>
                                    <td class="fw-medium">{{ $call['school_name'] }}</td>
                                    <td>{{ $call['called_by'] ?? '-' }}</td>
                                    <td>
                                        @if($call['call_status'])
                                            <span class="badge bg-label-{{ $call['call_status'] === 'Received' ? 'success' : ($call['call_status'] === 'Not Received' ? 'danger' : 'warning') }}">
                                                {{ $call['call_status'] }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-muted text-center py-4 mb-0">No calls recorded for this task.</p>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize date picker if available
        if (typeof flatpickr !== 'undefined') {
            document.querySelectorAll('.js-date-picker').forEach(function(el) {
                flatpickr(el, {
                    dateFormat: 'Y-m-d',
                    defaultDate: el.value || 'today'
                });
            });
        }
    });
</script>
@endpush