@extends('dashboard.layouts.app')
@section('content')
    <div class="container mt-5">
        <!-- Success/Error Messages -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert" id="successAlert">
                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="card shadow-lg border-0 rounded-3">
            <div class="card-header border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-tasks me-2"></i> HR Tasks</h5>
                <a href="{{ request()->is('api/*') ? route('api.tasks.create') : route('tasks.create') }}"
                    class="btn btn-primary btn-sm d-flex align-items-center gap-2">
                    <iconify-icon icon="ic:baseline-plus"></iconify-icon> Add New Task
                </a>
            </div>
            <div class="card-body">
                <div class="accordion mb-4" id="taskFilters">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="filterHeading">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
                                <i class="bi bi-funnel me-2"></i> Advanced Filters
                            </button>
                        </h2>
                        <div id="filterCollapse" class="accordion-collapse collapse" aria-labelledby="filterHeading"
                            data-bs-parent="#taskFilters">
                            <div class="accordion-body">
                                <form method="GET" action="">
                                    <div class="row g-3">

                                        <div class="col-md-3">
                                            <label for="search" class="form-label">Name</label>
                                            <input type="text" name="search" id="search" class="form-control"
                                                placeholder="Enter Name" value="{{ request('search') }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="staff_id" class="form-label">Staff</label>
                                            <select name="staff_id" id="staff_id" class="form-select select2">
                                                <option value="">Select Staff</option>
                                                @foreach ($staffs as $staff)
                                                    <option value="{{ $staff->id }}"
                                                        {{ request('staff_id') == $staff->id ? 'selected' : '' }}>
                                                        {{ $staff->first_name ." ". $staff->last_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="priority" class="form-label">Priority</label>
                                            <select name="priority" id="priority" class="form-select select2">
                                                <option value="">Select Priority</option>
                                                <option value="high"
                                                    {{ request('priority', $task->priority ?? '') == 'high' ? 'selected' : '' }}>
                                                    High</option>
                                                <option value="medium"
                                                    {{ request('priority', $task->priority ?? '') == 'medium' ? 'selected' : '' }}>
                                                    Medium</option>
                                                <option value="low"
                                                    {{ request('priority', $task->priority ?? '') == 'low' ? 'selected' : '' }}>
                                                    Low</option>
                                            </select>
                                        </div>


                                        <div class="col-md-3">
                                            <label for="status" class="form-label">Status</label>
                                            <select name="status" id="status" class="form-select select2">
                                                <option value="">Select Status</option>
                                                <option value="open"
                                                    {{ request('status', $task->status ?? '') == 'open' ? 'selected' : '' }}>
                                                    Open</option>
                                                <option
                                                    value="hold"{{ request('status', $task->status ?? '') == 'hold' ? 'selected' : '' }}>
                                                    Hold</option>
                                                <option
                                                    value="closed"{{ request('status', $task->status ?? '') == 'closed' ? 'selected' : '' }}>
                                                    Closed</option>
                                            </select>
                                        </div>
                                        </br>
                                        
                                        @if(optional(optional($staff)->department)->slug != "marketing")
                                        <div class="col-md-3">
                                            <label for="task_type" class="form-label">Task Type</label>
                                            <select class="form-select select2" id="task_type" name="task_type">
                                                <option value="">Select plan type</option>
                                                <option value="Report"
                                                    {{ request('task_type', $task->task_type ?? '') == 'Report' ? 'selected' : '' }}>
                                                    Report</option>
                                                <option value="Meeting"
                                                    {{ request('task_type', $task->task_type ?? '') == 'Meeting' ? 'selected' : '' }}>
                                                    Meeting</option>
                                                <option value="Training"
                                                    {{ request('task_type', $task->task_type ?? '') == 'Training' ? 'selected' : '' }}>
                                                    Training</option>
                                                <option value="Follow-up"
                                                    {{ request('task_type', $task->task_type ?? '') == 'Follow-up' ? 'selected' : '' }}>
                                                    Follow-up</option>
                                                <option value="Documentation"
                                                    {{ request('task_type', $task->task_type ?? '') == 'Documentation' ? 'selected' : '' }}>
                                                    Documentation</option>
                                                <option value="Resignation"
                                                    {{ request('task_type', $task->task_type ?? '') == 'Resignation' ? 'selected' : '' }}>
                                                    Resignation</option>
                                            </select>
                                        </div>
                                        @endif
                                        <div class="col-md-3">
                                            <label for="start_date" class="form-label">Start Date</label>
                                            <input type="date" class="form-control" id="start_date" name="start_date"
                                                value="{{ old('start_date', $task->start_date ?? '') }}">
                                        </div>

                                        <div class="col-md-3">
                                            <label for="due_date" class="form-label">Due Date</label>
                                            <input type="date" class="form-control" id="due_date" name="due_date"
                                                value="{{ old('due_date', $task->due_date ?? '') }}">
                                        </div>


                                        <div class="col-md-12 d-flex justify-content-end gap-2 mt-3">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="bi bi-filter me-1"></i> Apply Filters
                                            </button>
                                            <a href="{{ url()->current() }}" class="btn btn-outline-secondary">
                                                <i class="bi bi-x-lg me-1"></i> Clear
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Table -->
                @if ($tasks->isNotEmpty())
                    <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                        <table class="table table-hover table-bordered align-middle">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>Task Name</th>
                                    <th>Assigned Staff</th>
                                    <th>Start Date</th>
                                    <th>Due Date</th>
                                    <th>Priority</th>
                                    <th>Status</th>
                                    <th>Progress</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($tasks as $task)
                                    <tr>
                                        <td>
                                            {{ $task->task_name }}
                                            @if ($task->task_type)
                                                <span class="badge bg-info ms-2">{{ $task->task_type }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if (optional($task->staff))
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="avatar bg-light rounded-circle d-flex justify-content-center align-items-center"
                                                        style="width:32px; height:32px;">
                                                        {{ strtoupper(substr(optional($task->staff)->first_name ?? '', 0, 1) . substr(optional($task->staff)->last_name ?? '', 0, 1)) }}
                                                    </div>
                                                        {{ optional($task->staff)->first_name ?? '' }} {{ optional($task->staff)->last_name ?? '' }}
                                                </div>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            {{ \Carbon\Carbon::parse($task->start_date)->format('M d, Y') }}
                                            <small class="text-muted d-block">
                                                ({{ \Carbon\Carbon::parse($task->start_date)->diffForHumans() }})
                                            </small>
                                        </td>
                                        <td>
                                            {{ \Carbon\Carbon::parse($task->due_date)->format('M d, Y') }}
                                            <small class="text-muted d-block">
                                                ({{ \Carbon\Carbon::parse($task->due_date)->diffForHumans() }})
                                            </small>
                                        </td>
                                        <td>
                                            <span
                                                class="badge 
                                                {{ $task->priority === 'high' ? 'bg-danger' : ($task->priority === 'medium' ? 'bg-warning text-dark' : 'bg-success') }}">
                                                {{ ucfirst($task->priority) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span
                                                class="badge 
                                                {{ $task->status === 'open' ? 'bg-primary' : ($task->status === 'hold' ? 'bg-warning text-dark' : 'bg-success') }}">
                                                {{ ucfirst($task->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar 
                                                    {{ $task->progress < 50 ? 'bg-danger' : ($task->progress < 100 ? 'bg-warning' : 'bg-success') }}"
                                                    role="progressbar" style="width: {{ $task->progress }}%">
                                                </div>
                                            </div>
                                            <small>{{ $task->progress }}%</small>
                                        </td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <a href="{{ request()->is('api/*') ? route('api.tasks.show', $task->id) : route('tasks.show', $task->id) }}"
                                                    class="btn btn-outline-primary btn-sm radius-8" data-bs-toggle="tooltip"
                                                    title="Show Task">
                                                    <iconify-icon icon="lucide:eye" class="text-lg"></iconify-icon>
                                                </a>
                                        
                                                <a href="{{ request()->is('api/*') ? route('api.tasks.edit', $task->id) : route('tasks.edit', $task->id) }}"
                                                    class="btn btn-outline-primary btn-sm radius-8" data-bs-toggle="tooltip"
                                                    title="Edit Task">
                                                    <iconify-icon icon="lucide:edit" class="text-lg"></iconify-icon>
                                                </a>
                                        
                                                @if (Auth::id() === $task->created_by)
                                                    <form action="{{ request()->is('api/*') ? route('api.tasks.destroy', $task->id) : route('tasks.destroy', $task->id) }}"
                                                        method="POST" class="d-inline"
                                                        onsubmit="return confirm('Are you sure you want to delete this task?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-outline-danger btn-sm radius-8"
                                                            data-bs-toggle="tooltip" title="Delete Task">
                                                            <iconify-icon icon="lucide:trash-2" class="text-lg"></iconify-icon>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="mt-3">
                            {{ $tasks->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
                        <p class="text-muted mb-3">No tasks found. Start by adding a new one!</p>
                        <a href="{{ route('tasks.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> Create Task
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            });

            $('[data-bs-toggle="tooltip"]').tooltip();


        });

        setTimeout(() => {
            let alert = document.getElementById('successAlert');
            if (alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 10000); // 10000 ms = 10 seconds
    </script>
@endpush