@extends('layouts.app')

@section('title', 'All Tasks')

{{-- Custom CSS --}}
@push('css')
<style>
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        color: #fff !important;
        background: none !important;
    }
</style>
@endpush

@section('content')
<x-content-body>
    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Manage Tasks</h4>
            <a href="{{ route('tasks.create') }}" class="btn btn-sm btn-rounded btn-primary">Add New Task</a>
        </x-slot:title>

        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="task-all-tab" data-bs-toggle="pill" data-bs-target="#all-task"
                    type="button" role="tab" aria-controls="all-task" aria-selected="true">All</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="task-today-tab" data-bs-toggle="pill" data-bs-target="#today-task"
                    type="button" role="tab" aria-controls="today-task" aria-selected="false">Today</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="task-overdue-tab" data-bs-toggle="pill" data-bs-target="#overdue-task"
                    type="button" role="tab" aria-controls="overdue-task" aria-selected="false">Over Due</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="task-property-tab" data-bs-toggle="pill" data-bs-target="#property-task"
                    type="button" role="tab" aria-controls="property-task" aria-selected="false">Property</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="task-contact-tab" data-bs-toggle="pill" data-bs-target="#contact-task"
                    type="button" role="tab" aria-controls="contact-task" aria-selected="false">Contacts</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="task-agent-tab" data-bs-toggle="pill" data-bs-target="#agent-task"
                    type="button" role="tab" aria-controls="agent-task" aria-selected="false">Agents</button>
            </li>
        </ul>

        <div class="tab-content" id="pills-tabContent">
            {{-- Loop for task-related tabs --}}
            @foreach (['all' => $allTasks, 'today' => $todayTasks, 'overdue' => $overdueTasks, 'property' => $properties] as $tab => $tasks)
            <div class="tab-pane fade @if ($loop->first) show active @endif" id="{{ $tab }}-task" role="tabpanel"
                aria-labelledby="task-{{ $tab }}-tab">
                @if ($tab === 'property')
                <x-tasks.property-task-table :tasks="$tasks" :today="$today" :tableId="$tab . '-task-table'" />
                @else
                <x-tasks.task-table :tasks="$tasks" :today="$today" :tableId="$tab . '-task-table'" />
                @endif
            </div>
            @endforeach

            {{-- Contacts Tab --}}
            <div class="tab-pane fade" id="contact-task" role="tabpanel" aria-labelledby="task-contact-tab">
                <x-tasks.contact-task-table :tasks="$contacts" :today="$today" :tableId="'contact-task-table'" />

            </div>

            {{-- Agents Tab --}}
            <div class="tab-pane fade" id="agent-task" role="tabpanel" aria-labelledby="task-agent-tab">
                <x-tasks.agent-task-table :tasks="$agents" :today="$today" :tableId="'agent-task-table'" />
            </div>
        </div>
    </x-row-card>
</x-content-body>
@endsection

{{-- Custom JS --}}
@push('js')
<script src="{{ asset('assets/js/custom/task.js') }}"></script>
@endpush