@use('Carbon\Carbon')
@push('css')
<style>
    .people-card {
        transition: all 0.3s ease;
    }

    .people-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
    }

    .people-image-container {
        width: 50px !important;
        height: 50px !important;
        overflow: hidden;
        border-radius: 50%;
    }

    .people-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .people-card:hover .people-thumbnail {
        transform: scale(1.1);
    }

    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .people-summary .badge {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }
</style>
@endpush
<div class="container-fluid py-4" id="contact-container">
    <!-- Overlay -->
    <div id="contact_overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5);  z-index: 9999;"></div>
    <!-- Loader -->
    <div id="contact_loader" class="text-center" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <div class="row g-4">
        @forelse($tasks as $contact)
        <div class="col-xl-4 col-md-6" data-bs-toggle="modal" data-bs-target="#taskModal_{{ $contact['id'] }}">
            <div class="card people-card hover-lift-lg border-0 shadow rounded-4 overflow-hidden">
                <div class="card-body">
                    <a href="#" class="text-decoration-none text-dark">
                        <div class="d-flex align-items-start">
                            <!-- User Icon -->
                            <div class="me-3 flex-shrink-0 text-center">
                                <div class="people-image-container mb-2 d-flex align-items-center justify-content-center bg-light rounded-circle shadow"
                                    style="width: 100px; height: 100px;">
                                    <i class="fa-solid fa-user text-primary fs-1"></i>
                                </div>

                            </div>

                            <!-- User Details -->
                            <div class="flex-grow-1">
                                <div class="property-details">

                                    <span class="fw-semibold text-dark text-dark fw-bold">
                                        {{ $contact['f_name'] ?? '' }} {{ $contact['l_name'] ?? ""}}
                                    </span>
                                    <h6 class="my-2 ">
                                        {{ $contact['company'] ?? 'N/A' }}
                                    </h6>

                                    <ul class="list-unstyled mb-0 small text-muted mt-4">
                                        <li>
                                            <i class="bi bi-briefcase text-primary me-2"></i>

                                            @php
                                            $titles = isset($contact['assign_title'])
                                            ? explode(',', $contact['assign_title'])
                                            : ['N/A'];
                                            $titles = array_slice($titles, 0, 2); // Get the first two titles
                                            @endphp
                                            @foreach ($titles as $title)
                                            <span class="badge bg-primary mx-1 my-1"
                                                style="font-size: 0.75rem; padding: 2px 6px; line-height: 1.2;">
                                                {{ trim($title) }}
                                            </span>
                                            @endforeach
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-primary py-2">
                    <div class="people-summary small text-white">
                        @php
                        $taskCollection = collect($contact['tasks']);
                        $totalTasks = $taskCollection->count();
                        $pendings = $taskCollection
                        ->where('task_status', '!=', 'Canceled')
                        ->where('task_status', '!=', 'Completed')
                        ->count();
                        $completed = $taskCollection->where('task_status', 'Completed')->count();
                        @endphp
                        <span class="me-2">
                            <i class="bi bi-list-task text-white me-1 align-middle"></i>
                            <span class="align-middle">All Tasks: {{ count($contact['tasks']) }}</span>
                        </span>
                        <span class="me-2">
                            <i class="bi bi-hourglass-split text-warning me-1 align-middle"></i>
                            <span class="align-middle">Pending: {{ $pendings }}</span>
                        </span>
                        <span>

                            <span class="align-middle">Completed: {{ $completed }}</span>
                            <i class="bi bi-check-circle text-success me-1 align-middle"></i>
                        </span>
                    </div>
                </div>

            </div>
        </div>
        <!-- Task Modal -->
        <div class="modal fade" id="taskModal_{{ $contact['id'] }}" tabindex="-1" aria-labelledby="taskModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            Task List Of
                            {{ $contact['f_name'] ?? '' }} {{ $contact['l_name'] ?? ""}}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table id="{{ $tableId }}_{{ $contact['id'] }}"
                                class="contact display {{ $tableId }}">
                                <thead>
                                    <tr>
                                        <th>Title</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Reminder</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                        <th>Progress</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($contact['tasks'] as $task)
                                    @php
                                    $taskStartDate = \Carbon\Carbon::parse(
                                    $task['start_date'],
                                    )->setTimezone('Asia/Karachi');
                                    $taskDeadlineDate = \Carbon\Carbon::parse(
                                    $task['deadline_date'],
                                    )->setTimezone('Asia/Karachi');
                                    $isToday = $taskStartDate->isToday() && $task['task_status'] == 'To be Start';
                                    $isOverdue =
                                    $taskDeadlineDate->isPast() && $task['task_status'] == 'To be Start';
                                    @endphp
                                    <tr>
                                        <td title="{{$task['task_name']}}">{{ Str::limit($task['task_name'] ?? '', 15) }}</td>
                                        <td>{{ optional($taskStartDate)->format('m/d/Y') }}</td>
                                        <td>
                                            {{ !empty($task['deadline_date']) ? \Carbon\Carbon::parse($task['deadline_date'])->format('m/d/Y') : '---' }}
                                        </td>
                                        <td>{{ $task['task_reminder'] ?? '---' }}
                                            {{ $task['task_reminder_interval'] ?? '---' }}
                                        </td>
                                        <td title="{{strip_tags($task['task_description'])}}">{{ Str::limit(strip_tags($task['task_description'] ?? '---'), 25) }}
                                        </td>
                                        <td>
                                            @php
                                            $taskStartDate = Carbon::parse($task['start_date'])->setTimezone('Asia/Karachi');
                                            $taskDeadlineDate = Carbon::parse($task['deadline_date'])->setTimezone('Asia/Karachi');
                                            @endphp

                                            @if ($task['task_status'] == "To be Started" || $task['task_status'] == "On Hold")
                                            @if ($taskStartDate->isToday())
                                            <span class="contact_task_status_{{$task['id']}} badge rounded-pill text-bg-primary text-white"
                                                data-startdate="{{ $taskStartDate->toDateString() }}"
                                                data-enddate="{{ $taskDeadlineDate ? $taskDeadlineDate->toDateString() : '' }}">
                                                Today
                                            </span>
                                            @elseif ($taskStartDate->isFuture())
                                            <span class="contact_task_status_{{$task['id']}} badge rounded-pill text-bg-warning text-white"
                                                data-startdate="{{ $taskStartDate->toDateString() }}"
                                                data-enddate="{{ $taskDeadlineDate ? $taskDeadlineDate->toDateString() : '' }}">
                                                Upcoming
                                            </span>
                                            @elseif ($taskStartDate->isPast() && (!$taskDeadlineDate || $taskDeadlineDate->isFuture()))
                                            <span class="contact_task_status_{{$task['id']}} badge rounded-pill bg-primary text-white"
                                                data-startdate="{{ $taskStartDate->toDateString() }}"
                                                data-enddate="{{ $taskDeadlineDate ? $taskDeadlineDate->toDateString() : '' }}">
                                                Delayed
                                            </span>
                                            @elseif ($taskStartDate->isPast() && $taskDeadlineDate && $taskDeadlineDate->isPast())
                                            <span class="contact_task_status_{{$task['id']}} badge rounded-pill text-bg-danger text-white"
                                                data-startdate="{{ $taskStartDate->toDateString() }}"
                                                data-enddate="{{ $taskDeadlineDate ? $taskDeadlineDate->toDateString() : '' }}">
                                                Over Due
                                            </span>
                                            @endif
                                            @else
                                            <span class="contact_task_status_{{$task['id']}} task_status badge rounded-pill
                                                @if($task['task_status'] == 'Completed') text-bg-success
                                                @elseif($task['task_status'] == 'To be Started') text-bg-info
                                                @elseif($task['task_status'] == 'In Progress') text-bg-primary
                                                @elseif($task['task_status'] == 'On Hold') text-bg-warning
                                                @elseif($task['task_status'] == 'Cancelled') text-bg-secondary
                                                @elseif($task['task_status'] == 'Under Review') text-bg-dark
                                                @else text-bg-danger
                                                @endif text-white"
                                                data-startdate="{{ $taskStartDate->toDateString() }}"
                                                data-enddate="{{ $taskDeadlineDate ? $taskDeadlineDate->toDateString() : '' }}">
                                                {{ $task['task_status'] }}
                                            </span>
                                            @endif
                                        </td>
                                        <td>
                                            <select id="contact_task_status_{{$task['id']}}"
                                                data-taskid="{{$task['id']}}"
                                                onchange="changeContactStatus({{$task['id']}})"
                                                name="task_status"
                                                class="form-select"
                                                @if($task['task_status']=='Completed' ) disabled @endif>
                                                <option value="To be Started" {{ $task['task_status'] == 'To be Started' ? 'selected' : '' }}>To be Started</option>
                                                <option value="In Progress" {{ $task['task_status'] == "In Progress" ? 'selected' : '' }}
                                                    @if($task['task_status']=='Cancelled' ) disabled @endif>In Progress</option>
                                                <option value="Under Review" {{ $task['task_status'] == "Under Review" ? 'selected' : '' }}
                                                    @if($task['task_status']=='Cancelled' ) disabled @endif>Under Review</option>
                                                <option value="Completed" {{ $task['task_status'] == "Completed" ? 'selected' : '' }}
                                                    @if($task['task_status']=='Cancelled' ) disabled @endif>Completed</option>
                                                <option value="On Hold" {{ $task['task_status'] == "On Hold" ? 'selected' : '' }}
                                                    @if($task['task_status']=='Cancelled' ) disabled @endif>On Hold</option>
                                                <option value="Cancelled" {{ $task['task_status'] == "Cancelled" ? 'selected' : '' }}>Cancelled</option>
                                            </select>

                                        </td>
                                        <td class="d-flex justify-content-center">
                                            <div class="d-flex">
                                                <a href="{{ route('tasks.show', $task['id']) }}" class="btn btn-warning shadow btn-xs sharp me-1">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                <!-- EDIT BUTTON CONTAINER (Updated for JS modification) -->
                                                <div class="edit-button-container-{{$task['id']}}">
                                                    @if($task['task_status'] == "To be Started" || $task['task_status'] == "On Hold")
                                                    <a href="{{ route('tasks.edit', $task['id']) }}" class="btn btn-primary shadow btn-xs sharp me-1">
                                                        <i class="fa fa-pencil"></i>
                                                    </a>
                                                    @else
                                                    <button type="button" class="btn btn-dark btn-xs me-1 shadow sharp" disabled>
                                                        <i class="fa fa-pencil text-light"></i>
                                                    </button>
                                                    @endif
                                                </div>
                                                <!-- DELETE BUTTON -->
                                                <button data-url="{{ route('tasks.destroy', ['task' => $task['id']]) }}"
                                                    class="btn btn-danger shadow btn-xs sharp taskDeleteButton">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No tasks available.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        @push('js')
        <script>
            $(document).ready(function() {
                var commonConfig = {
                    searching: true,
                    paging: true,
                    select: true,
                    info: true,
                    lengthChange: true,
                    scrollY: "400px",
                    scrollX: true,
                    scrollCollapse: true,
                    fixedHeader: true,
                    language: {
                        info: "Showing _START_ - _END_ of _TOTAL_ entries",
                        paginate: {
                            next: '<i class="fa fa-angle-double-right pt-3"></i>',
                            previous: '<i class="fa fa-angle-double-left pt-3"></i>'
                        }
                    },
                    autoWidth: false, // Ensure proper column sizing
                };

                var table = $("#{{ $tableId }}_{{ $contact['id'] }}").DataTable({
                    ...commonConfig,
                    columnDefs: [{
                            targets: 6,
                            searchable: false
                        } // Disable searching on the "Progress" column
                    ]
                });

                // 🛠 Fix column misalignment when the modal is fully shown
                $('#taskModal_{{ $contact["id"] }}').on('shown.bs.modal', function() {
                    table.columns.adjust().draw();
                });

                // Optional: Destroy DataTable when modal is closed to prevent duplication
                // $('#taskModal_{{ $contact["id"] }}').on('hidden.bs.modal', function() {
                //     table.destroy();
                // });
            });
        </script>
        @endpush

        @empty
        <div class="col-12">
            <div class="alert alert-info text-center" role="alert">
                <i class="bi bi-info-circle me-2"></i>
                No data found!
            </div>
        </div>
        @endforelse
    </div>
    <div id="contact_pagination_links">
        {{ $tasks->links() }}
    </div>
</div>


@push('js')
<script>
    function initializeDataTables() {
        var commonConfig = {
            searching: true,
            paging: true,
            select: true,
            ordering: true,
            info: true,
            lengthChange: true,
            scrollY: "400px", // Adjust height as needed
            scrollX: true,
            scrollCollapse: true,
            fixedHeader: true,
            language: {
                paginate: {
                    next: '<i class="fa fa-angle-double-right pt-3"></i>',
                    previous: '<i class="fa fa-angle-double-left pt-3"></i>'
                }
            }
        };

        $('table.contact').DataTable().destroy();
        $('table.contact').DataTable(commonConfig);
    }

    // Intercept pagination link clicks
    $(document).on('click', '#contact_pagination_links a', function(e) {
        e.preventDefault(); // Prevent default link behavior
        const url = $(this).attr('href'); // Get the URL of the clicked link
        const tableId = $(this).closest('.tab-pane').attr(
            'id'); // Get the table ID from the active tab
        // Show the overlay and loader
        $('#contact_overlay').show();
        $('#contact_loader').show();
        // Fetch data via AJAX
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            data: {
                tableId: tableId + "-table", // Send the table ID in the request
            },
            success: function(response) {
                // Update the task container with new data
                $('#contact-container').html(response.html);

                // Update the pagination links
                $('#contact_pagination_links').html(response.pagination);

                // Reinitialize DataTables for the newly loaded tables
                initializeDataTables();
                $('#contact_overlay').hide();
                $('#contact_loader').hide();
            },
            error: function(xhr, status, error) {
                console.error("Error fetching paginated data:", error);
            }
        });
    });

    // Initialize DataTables for modal tables when the modal is shown
    $('.modal').on('shown.bs.modal', function() {
        initializeDataTables();
        $('table.contact').DataTable().columns.adjust().draw();
    });
</script>
<script>
    function changeContactStatus(id) {
        const status = $("#contact_task_status_" + id).val();
        const startDate = $(".contact_task_status_" + id).data("startdate");
        const endDate = $(".contact_task_status_" + id).data("enddate");
        const today = new Date().toISOString().split('T')[0];
        $.ajax({
            url: 'task/change-status',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                taskId: id,
                task_status: status,
            },
            success: function(response) {
                const badgeElement = $('.contact_task_status_' + id);
                let newStatus = response.task_status;

                if (status === "To be Started") {
                    if (startDate === today) {
                        newStatus = "Today";
                    } else if (new Date(startDate) > new Date(today)) {
                        newStatus = "Upcoming";
                    } else if (new Date(startDate) < new Date(today) && (!endDate || new Date(endDate) >= new Date(today))) {
                        newStatus = "Delayed";
                    } else if (new Date(startDate) < new Date(today) && new Date(endDate) < new Date(today)) {
                        newStatus = "Over Due";
                    }
                }

                badgeElement.text(newStatus);
                updateContactStatusBadge(id, newStatus, status);
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: response.message || 'Status updated successfully!',
                    confirmButtonText: 'OK'
                });
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to update status. Please try again.',
                    confirmButtonText: 'OK'
                });
            }
        });
    }

    function updateContactStatusBadge(id, status, progress) {
        const badgeElement = $('.contact_task_status_' + id);
        const statusDropdown = $('#contact_task_status_' + id);
        const editButtonContainer = $('.edit-button-container-' + id);
        badgeElement.removeClass('text-bg-primary bg-blue text-bg-info text-bg-danger text-bg-warning text-bg-success text-bg-secondary text-bg-dark text-bg-light bg-info text-white text-dark');
        switch (status.toLowerCase()) {
            case 'to be started':
                badgeElement.addClass('text-bg-info text-white');
                break;
            case 'today':
                badgeElement.addClass('text-bg-primary text-white');
                break;
            case 'upcoming':
                badgeElement.addClass('text-bg-warning text-white');
                break;
            case 'delayed':
                badgeElement.addClass('bg-primary text-white');
            case 'over due':
                badgeElement.addClass('text-bg-danger text-white');
                break;
            case 'in progress':
                badgeElement.addClass('text-bg-info text-white');
                break;
            case 'under review':
                badgeElement.addClass('text-bg-primary text-white');
                break;
            case 'completed':
                badgeElement.addClass('text-bg-success text-white');
                statusDropdown.prop('disabled', true);
                break;
            case 'on hold':
                badgeElement.addClass('text-bg-warning text-white');
                break;
            case 'cancelled':
                badgeElement.addClass('text-bg-secondary text-white');
                statusDropdown.prop('disabled', false);
                statusDropdown.find('option').prop('disabled', true);
                statusDropdown.find('option[value="To be Started"]').prop('disabled', false);
                break;
            default:
                badgeElement.addClass('text-bg-light text-white');
        }
        // Handle dropdown enable/disable
        if (progress.toLowerCase() === "completed") {
            statusDropdown.prop('disabled', true);
        } else if (progress.toLowerCase() === "cancelled") {
            statusDropdown.prop('disabled', false);
            statusDropdown.find('option').prop('disabled', true);
            statusDropdown.find('option[value="To be Started"]').prop('disabled', false);
        } else {
            statusDropdown.prop('disabled', false);
            statusDropdown.find('option').prop('disabled', false);
        }

        let newEditButton;
        if (progress.toLowerCase() === "to be started" || progress.toLowerCase() === "on hold") {
            // Enable edit button (link)
            newEditButton = `<a href="/tasks/${id}/edit" class="btn btn-primary shadow btn-xs sharp me-1">
                        <i class="fa fa-pencil"></i>
                     </a>`;
        } else {
            // Disable edit button (button)
            newEditButton = `<button type="button" class="btn btn-dark btn-xs me-1 shadow sharp" disabled>
                        <i class="fa fa-pencil text-light"></i>
                     </button>`;
        }
        editButtonContainer.html(newEditButton);

    }
</script>

@endpush