@use('Carbon\Carbon')
@push('css')
<style>
    tr[role="row"][style*="height: 0px"] {
        display: none !important;
    }

    .property-card {
        transition: all 0.3s ease;
    }

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

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

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

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

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

    .task-summary .badge {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }
</style>
@endpush
<div class="container-fluid py-4" id="property-container">
    <!-- Overlay -->
    <div id="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="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 $property)
        <div class="col-xl-4 col-md-6" data-bs-toggle="modal" data-bs-target="#taskModal_{{ $property['id'] }}">
            <div class="card property-card hover-lift-lg border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-body p-4">
                    <a href="#" class="text-decoration-none text-dark">
                        <div class="d-flex align-items-start">
                            <!-- Property Image -->
                            <div class="me-3 flex-shrink-0 w-25">
                                <div class="property-image-container mb-2">
                                    <img src="https://picsum.photos/seed/picsum/200/200"
                                        alt="{{ $property['property_Type'] ?? 'Property' }}"
                                        class="img-fluid rounded-3 property-thumbnail">
                                </div>
                            </div>

                            <!-- Property Details -->
                            <div class="flex-grow-1">
                                <div class="property-details">
                                    <h6 class="mb-2 text-dark fw-bold">
                                        {{ implode(', ', collect($property['addresses'])->map(fn($address) => ($address['street'] ?? $address['state']) . ', ' . ($address['city'] ?? ''))->toArray()) }}
                                    </h6>
                                    <ul class="list-unstyled mb-0 small text-muted">
                                        <!-- <li class="mb-1">
                                            <i class="bi bi-check-circle-fill text-warning me-2"></i>
                                            <strong>Property Type:</strong>
                                            <span class="text-warning">
                                                {{ $property['property_Type'] ?? 'Not Set' }}
                                            </span>
                                        </li> -->
                                        <li class="mb-1">
                                            <i class="bi bi-check-circle-fill text-warning me-2"></i>
                                            <strong>Property Type:</strong>
                                            <span class="text-warning">
                                                {{ isset($property['property_Type']) ? Str::title(str_replace('_', ' ', $property['property_Type'])) : 'Not Set' }}
                                            </span>
                                        </li>

                                        <!-- <li class="mb-1">
                                            <i class="bi bi-check-circle-fill text-warning me-2"></i>
                                            <strong>Property Sub Type:</strong>
                                            <span class="text-warning">
                                                {{ $property['property_sub_type'] ?? 'Not Set' }}
                                            </span>
                                        </li> -->
                                        <li class="mb-1">
                                            <i class="bi bi-check-circle-fill text-warning me-2"></i>
                                            <strong>Property Sub Type:</strong>
                                            <span class="text-warning">
                                                {{ isset($property['property_sub_type']) ? Str::title(str_replace('_', ' ', $property['property_sub_type'])) : 'Not Set' }}
                                            </span>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Task Summary Divider -->
                <hr class="my-0">

                <!-- Task Summary Section -->
                <div class="card-footer bg-primary py-2 text-center">
                    <div class="task-summary small text-white">
                        @php
                        $taskCollection = collect($property['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"></i> All Tasks: {{ $totalTasks }}
                        </span>
                        <span class="me-2">
                            <i class="bi bi-hourglass-split text-warning me-1"></i> Pending: {{ $pendings }}
                        </span>
                        <span>
                            <i class="bi bi-check-circle text-success me-1"></i> Completed: {{ $completed }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Task Modal -->
        <div class="modal fade" id="taskModal_{{ $property['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
                            {{ implode(', ', collect($property['addresses'])->map(fn($address) => ($address['street'] ?? $address['state']) . ', ' . ($address['city'] ?? ''))->toArray()) }}

                        </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 }}_{{ $property['id'] }}" class="property 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 ($property['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="property_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="property_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="property_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="property_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="property_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="property_task_status_{{$task['id']}}"
                                                data-taskid="{{$task['id']}}"
                                                onchange="changePropertyStatus({{$task['id']}})"
                                                name="task_status"
                                                class=""
                                                @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>'
                        }
                    }
                };
                $('#property-task-table_{{ $property["id"] }}').DataTable({
                    ...commonConfig,
                    columnDefs: [{
                        targets: 6, // Index of the "Progress" column
                        searchable: false
                    }]
                });
            });
        </script>
        @endpush

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


@push('js')
<script>
    // $(document).ready(function() {
    function initializeDataTables() {
        var commonConfig = {
            searching: true,
            paging: true,
            select: true,
            info: true,
            lengthChange: true,
            ordering: 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>'
                }
            }
        };
        // Initialize DataTables for all tables with the class 'display'
        $('table.property').DataTable().destroy();
        // Initialize DataTables for all tables with the class 'property'
        $('table.property').DataTable({
            ...commonConfig,
            columnDefs: [{
                targets: 6, // Index of the "Progress" column
                searchable: false
            }]
        });

    }

    $(document).on('click', '#property_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
        $('#overlay').show();
        $('#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
                $('#property-container').html(response.html);

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

                // Reinitialize DataTables for the newly loaded tables
                initializeDataTables();
                // Show the overlay and loader
                $('#overlay').hide();
                $('#loader').hide();

            },
            error: function(xhr, status, error) {
                console.error("Error fetching paginated data:", error);
            }
        });
    });

    $('.modal').on('shown.bs.modal', function() {
        initializeDataTables();
        $('table.property').DataTable().columns.adjust().draw();
    });

    // });
</script>

<script>
    function changePropertyStatus(id) {
        const status = $("#property_task_status_" + id).val();
        const startDate = $(".property_task_status_" + id).data("startdate");
        const endDate = $(".property_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 = $('.property_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);
                updatePropertyStatusBadge(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 updatePropertyStatusBadge(id, status, progress) {
        const badgeElement = $('.property_task_status_' + id);
        const statusDropdown = $('#property_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