@extends('layouts.app')

@section('title', 'Task Preview')

@section('content')
@push('css')
<style>
    .badge {
        font-size: 0.9rem;
        padding: 0.5em 0.75em;
    }

    .list-group-item {
        padding: 0.75rem 1.25rem;
    }

    .card-header {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .card-body {
        padding: 1.5rem;
    }
</style>
@endpush
<x-content-body>
    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Task Details</h4>
            <div class="d-flex gap-3">
                <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  sharp me-1">
                        <i class="fa fa-pencil"></i>
                    </a>
                    @else
                    <button type="button" class="btn btn-dark  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 sharp taskDeleteButton">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
        </x-slot:title>
        <div class="card-body">
            <!-- Task Information -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <h4 class="text-primary">Task Details</h4>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 bg-body-secondary">
                            <strong>Task Name:</strong> {{ $task['task_name'] }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 ">
                            <strong>Task Type:</strong> {{ $task['task_type'] ?? "To Do" }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 bg-body-secondary">
                            <strong>Task Priority:</strong> {{ $task['priority'] ?? "None" }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 ">
                            <strong>Start Date:</strong> {{ \Carbon\Carbon::parse($task['start_date'])->format('m/d/Y') }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 bg-body-secondary">
                            <strong>Deadline Date:</strong>{{ !empty($task['deadline_date']) ? \Carbon\Carbon::parse($task['deadline_date'])->format('m/d/Y') : 'N/A' }}
                        </li>

                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4  ">
                            <div class="d-flex gap-5">
                                <strong>Start Time:</strong> {{ $task['s_time']  ?? "N/A" }}
                                <strong>End Time:</strong> {{ $task['e_time'] ?? "N/A" }}
                            </div>
                        </li>

                    </ul>
                </div>

                <div class="col-md-6" style="padding-top: 32px">
                    <!-- <h4 class="text-primary mt-4"></h4> -->
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 bg-body-secondary">
                            <strong>Agent:</strong>
                            {{ isset($task['agents']['f_name'], $task['agents']['l_name']) ? $task['agents']['f_name'] . ' ' . $task['agents']['l_name'] : "N/A" }}
                        </li>

                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4">
                            <strong>Contact:</strong>
                            {{ isset($task['contacts']['f_name'], $task['contacts']['l_name']) ? $task['contacts']['f_name'] . ' ' . $task['contacts']['l_name'] : 'N/A' }}
                        </li>

                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 bg-body-secondary">
                            <strong>Property:</strong> {{ $task['properties'] ? implode(', ', collect($task['properties']['addresses'])->map(fn($address) => ($address['street'] ?? $address['state']) . ', ' . ($address['city'] ?? ''))->toArray()) : 'N/A' }}


                        </li>
                    </ul>
                    <!-- <h4 class="mt-4 text-primary">Reminder</h4> -->
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 ">
                            <strong>Task Reminder:</strong> {{ $task['task_reminder'] }} {{ $task['task_reminder_interval'] ?? "N/A" }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between text-black list-group-item p-4 bg-body-secondary">
                            <strong>Task Repeat:</strong> {{ ucfirst($task['task_repeat'] ?? "N/A" ) }}
                        </li>
                        @if ($task['task_repeat'] === 'weekly')
                        <li class="list-group-item gap-4 d-flex text-black list-group-item p-4 ">
                            <strong style="width: 150px;">Repeat Days:</strong>
                            @if(!empty( $task['week_days']))
                            <div class="d-flex flex-wrap gap-4 align-items-center">
                                @foreach (json_decode($task['week_days'] ?? '[]') as $day)
                                <span class="badge py-0 bg-primary me-1">{{ ucfirst($day) }}</span>
                                @endforeach
                            </div>
                            @endif
                        </li>
                        @endif

                        @if ($task['task_repeat'] === 'monthly')
                        <li class="list-group-item d-flex flex-wrap gap-4 align-items-center text-black list-group-item p-4">
                            <strong>Repeat Dates:</strong>
                            @php
                            if (isset($task['month_date_range']) && $task['month_date_range'] !==null) {
                            $dateString = trim($task['month_date_range'], '"\\');

                            // Check if the date string is not empty and not equal to 'null' or '[]'
                            if (!empty($dateString) && $dateString !== 'null' && $dateString !== '[]') {
                            // Handle JSON array format (e.g., ["2025-02-13", "2025-02-14"])
                            if (strpos($dateString, '[') === 0) {
                            $datesArray = json_decode($dateString, true);
                            } else {
                            // Handle comma-separated string format (e.g., "2025-02-13, 2025-02-14, 2025-02-15")
                            $datesArray = explode(',', $dateString);
                            }

                            // Filter out any empty values from the array
                            $datesArray = array_filter($datesArray, function ($date) {
                            return !empty(trim($date));
                            });

                            // Format each date using Carbon
                            $formattedDates = array_map(function ($date) {
                            return '<span class="badge bg-primary px-2 py-1">' . \Carbon\Carbon::parse(trim($date))->format('m/d/Y') . '</span>';
                            }, $datesArray);

                            echo implode(' ', $formattedDates); // Output the dates with spaces
                            } else {
                            echo "No repeat dates available.";
                            }
                            } else {
                            echo "No repeat dates available.";
                            }
                            @endphp
                        </li>
                        @endif
                    </ul>
                </div>
            </div>

            <!-- Tags and Reminder -->
            <!-- <div class="row mb-4">
                <div class="col-md-6">
                    
                    <strong class="text-black">Task Tags:</strong>
                    <div class="d-flex flex-wrap mt-3">
                        @foreach (json_decode($task['task_tags'] ?? '[]') as $tag)
                        <span class="badge bg-primary me-2 mb-2">{{ $tag }}</span>
                        @endforeach
                    </div>
                </div>

            </div> -->
            <div class="col-md-6">
                <!-- <h4 class="text-primary">Tags</h4> -->
                <strong class="text-black">Task Tags:</strong>
                <div class="d-flex flex-wrap mt-3">
                    @foreach (json_decode($task['task_tags'] ?? '[]') as $tag)
                    <span class="badge bg-primary me-2 mb-2">{{ str_replace('_', ' ', $tag) }}</span>
                    @endforeach
                </div>
            </div>

            <!-- Task Description -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <h4 class="text-primary">Description</h4>
                    <div class="card">
                        <div class="card-body border border-primary-subtle card-body">
                            {!! $task['task_description'] !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-row-card>
</x-content-body>
@endsection
@push('js')
<script>
    $(document).on('click', '.taskDeleteButton', function(event) {

        let url = $(this).data('url');
        let redirectRoute = "{{ route('tasks.index') }}";
        handleAjaxRecordDeletionWithConfirmation(url, redirectRoute, "Task Deleted Successfully", null);
    });
</script>
@endpush