@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('To-Do List'))

@section('content')

    <!-- Flash Messages -->
    @if ($errors->any())
        <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Responsive Styles -->
    <style>
        @media (max-width: 768px) {
            #validation-alert, #success-alert {
                width: 90% !important; /* Adjust the width for small screens */
                left: 5% !important; /* Center it horizontally */
            }
        }

        @media (max-width: 576px) {
            #validation-alert, #success-alert {
                width: 95% !important; /* Make the alert almost full width on very small screens */
                left: 2.5% !important; /* Slightly adjust for better centering */
            }
        }
    </style>


    @php
        use Carbon\Carbon;

        $weekOffset = intval(request('week', 0));
        $today = Carbon::today();

        // Dynamically calculate the start and end of the shifted week
        $startOfWeek = $today->copy()->startOfWeek()->addWeeks($weekOffset);
        $endOfWeek = $startOfWeek->copy()->endOfWeek();

        $showStart = $startOfWeek;
        $showEnd = $endOfWeek;

        function filterTodos($todos, $start, $end) {
            return $todos->filter(function($todo) use ($start, $end) {
                return $todo->due_date && $todo->due_date->between($start, $end);
            });
        }

        $weekTodos = filterTodos($todos, $showStart, $showEnd);
    @endphp

<div class="row row-cards">
    <div class="col-12">
        {{-- <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="mb-0">{{ __('To-Do Calendar View') }}</h2>
            <div>
                @php $weekOffset = intval(request('week', 0)); @endphp
                <a href="?week={{ $weekOffset - 1 }}" class="btn btn-outline-secondary me-1">{{ __('Previous Week') }}</a>
                <a href="?week=0" class="btn btn-outline-primary me-1">{{ __('This Week') }}</a>
                <a href="?week={{ $weekOffset + 1 }}" class="btn btn-outline-secondary">{{ __('Next Week') }}</a>
            </div>
        </div> --}}

        @php
            $week = request('week', 'this');
            if ($week === 'prev') {
                $showStart = $prevWeekStart;
                $showEnd = $prevWeekEnd;
            } elseif ($week === 'next') {
                $showStart = $nextWeekStart;
                $showEnd = $nextWeekEnd;
            } else {
                $showStart = $startOfWeek;
                $showEnd = $endOfWeek;
            }
            $weekTodos = filterTodos($todos, $showStart, $showEnd);
        @endphp

        <div class="card shadow-sm mb-4">
            <!-- Date Range + Add Button -->
            <div class="card-body border-bottom py-3">
                <div class="d-flex">
                    <span>
                        <h3><strong>{{ $showStart->format('M d') }} - {{ $showEnd->format('M d, Y') }}</strong></h3>
                    </span>
                    <div class="ms-auto">
                        @if (auth()->user()->role == 'admin')
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addTodoModal">
                            <i class="icon ti ti-plus"></i> {{ __('Add To-Do') }}
                        </button>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Search Filter -->
            <div class="card-header d-flex flex-column" style="align-items: normal;">
                <div class="d-flex justify-content-between" data-bs-toggle="collapse" data-bs-target="#search-col">
                    <h3 class="card-title">{{ __('Search Filter') }}</h3>
                    <div class="card-actions btn-actions">
                        <button type="button" class="btn-action" data-bs-toggle="collapse" data-bs-target="#search-col">
                            <i class="ti ti-search"></i>
                        </button>
                    </div>
                </div>
                <div id="search-col" class="row mt-0 collapse @if(request()->anyFilled(['user_id', 'project_description', 'project_ref_no', 'status_id', 'due_date'])) show @endif">
                    <form method="GET" action="{{ route('todo.index') }}" class="row g-3">

                        <div class="col-md-2">
                            <div class="form-floating">
                                <input type="text" name="user_id" class="form-control" id="user_id" value="{{ request('user_id') }}" autocomplete="off">
                                <label for="user_id">{{ __('User') }}</label>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-floating">
                                <input type="text" name="project_description" id="project_description" class="form-control" placeholder="Enter project description" value="{{ request('project_description') }}">
                                <label for="project_description">{{ __('Project') }}</label>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-floating">
                                <input type="text" name="project_ref_no" id="project_ref_no" class="form-control" placeholder="Enter project ref. no" value="{{ request('project_ref_no') }}">
                                <label for="project_ref_no">{{ __('Ref. No') }}</label>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-floating">
                                <select name="status_id" class="form-select" id="status_id">
                                    <option value="">{{ __('All Statuses') }}</option>
                                    @foreach ($statuses as $status)
                                        <option value="{{ $status->id }}" {{ request('status_id') == $status->id ? 'selected' : '' }}>
                                            {{ $status->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <label for="status_id">{{ __('Status') }}</label>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-floating">
                                <input type="date" name="due_date" id="due_date" class="form-control" value="{{ request('due_date') }}">
                                <label for="due_date">{{ __('Due Date') }}</label>
                            </div>
                        </div>

                        <div class="col-auto d-flex align-items-center">
                            <button type="submit" title="{{ __('Search') }}" name="q" value="1" class="btn btn-ghost-info me-1">
                                <i class="ti ti-search"></i>
                            </button>
                            <a href="{{ route('todo.index') }}" class="btn btn-ghost-yellow" title="{{ __('Reset') }}">
                                <i class="ti ti-refresh"></i>
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body">
                <div class="d-flex justify-content-end align-items-center mb-2">
                    @php $weekOffset = intval(request('week', 0)); @endphp
                    <a href="?week={{ $weekOffset - 1 }}" class="btn btn-outline-secondary me-1">{{ __('Previous Week') }}</a>
                    <a href="?week=0" class="btn btn-outline-primary me-1">{{ __('This Week') }}</a>
                    <a href="?week={{ $weekOffset + 1 }}" class="btn btn-outline-secondary">{{ __('Next Week') }}</a>
                </div>

                <div class="table-responsive" style="overflow-x: auto;">
                    <table class="table table-bordered mb-0" style="min-width: 700px; table-layout: fixed;">
                        <thead class="bg-light">
                            <tr>
                                @for($d = 0; $d < 7; $d++)
                                    <th class="text-center text-wrap px-1 py-2" style="min-width: 120px;"
>
                                        {{ $showStart->copy()->addDays($d)->format('D') }}<br>
                                        <span class="small text-muted">{{ $showStart->copy()->addDays($d)->format('M d') }}</span>
                                    </th>
                                @endfor
                            </tr>
                        </thead>
                        @php
                        // Prepare tasks and their date ranges clamped within week
                        $tasks = $weekTodos->map(function($todo) use ($showStart, $showEnd) {
                            $start = $todo->date_received ? $todo->date_received->copy() : $showStart->copy();
                            $end = $todo->due_date ? $todo->due_date->copy() : $start->copy();

                            if ($start->lt($showStart)) $start = $showStart->copy();
                            if ($end->gt($showEnd)) $end = $showEnd->copy();

                            return [
                                'todo' => $todo,
                                'start' => $start,
                                'end' => $end,
                                'startOffset' => $showStart->diffInDays($start),
                                'colspan' => $start->diffInDays($end) + 1,
                                'row' => null,
                            ];
                        })->sortBy('start')->values();

                        // Assign rows to avoid horizontal overlap
                        $rows = [];
                        foreach ($tasks as &$task) {
                            $assignedRow = 0;
                            while (true) {
                                $conflict = false;
                                if (!isset($rows[$assignedRow])) {
                                    $rows[$assignedRow] = [];
                                }
                                foreach ($rows[$assignedRow] as $existingTask) {
                                    $existingStart = $existingTask['startOffset'];
                                    $existingEnd = $existingTask['startOffset'] + $existingTask['colspan'] - 1;
                                    $taskStart = $task['startOffset'];
                                    $taskEnd = $taskStart + $task['colspan'] - 1;

                                    // Check for horizontal overlap
                                    if (!($taskEnd < $existingStart || $taskStart > $existingEnd)) {
                                        $conflict = true;
                                        break;
                                    }
                                }
                                if (!$conflict) {
                                    $task['row'] = $assignedRow;
                                    $rows[$assignedRow][] = $task;
                                    break;
                                }
                                $assignedRow++;
                            }
                        }
                        unset($task); // break reference

                        $maxRows = count($rows);
                        @endphp

                        <tbody>
                            @if ($maxRows === 0 || empty($rows) || collect($rows)->flatten()->isEmpty())
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        {{ __('No todo available') }}
                                    </td>
                                </tr>
                            @else
                                {{-- Render rows --}}
                                @for ($r = 0; $r < $maxRows; $r++)
                                    <tr>
                                        @php
                                            $tasksInRow = $rows[$r];
                                            $pos = 0;
                                        @endphp

                                        @foreach ($tasksInRow as $task)
                                            {{-- Empty cells before the task starts --}}
                                            @for (; $pos < $task['startOffset']; $pos++)
                                                <td></td>
                                            @endfor

                                            {{-- Task cell --}}
                                            <td colspan="{{ $task['colspan'] }}" class="align-top p-1 text-wrap" style="min-height: 80px; word-break: break-word;">
                                                @php
                                                    $todo = $task['todo'];
                                                    $statusColor = $todo->is_done
                                                        ? 'success'
                                                        : ($todo->status && strtolower($todo->status->name) === 'pending'
                                                            ? 'danger'
                                                            : 'warning');
                                                @endphp

                                                <div class="p-2" style="background-color: #eef4fc;">
                                                    <div class="d-flex justify-content-between align-items-start">
                                                        <div>
                                                            <div class="fw-semibold mb-1 {{ $todo->is_done ? 'text-decoration-line-through text-muted' : '' }}">
                                                                {{ $todo->title }}
                                                            </div>
                                                            <div class="text-muted small">{{ $todo->project->ref_no ?? '-' }}</div>
                                                            <span class="badge bg-white text-{{ $statusColor }} border border-{{ $statusColor }} small mt-1">
                                                                {{ $todo->is_done ? 'Completed' : (\Illuminate\Support\Str::title($todo->status->name ?? '-')) }}
                                                            </span>
                                                        </div>
                                                        @if (auth()->user()->role == 'admin')
                                                        <div class="dropdown">
                                                            <button class="btn btn-sm btn-outline-secondary p-1" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                                <i class="ti ti-dots-vertical"></i>
                                                            </button>
                                                            <ul class="dropdown-menu dropdown-menu-end">
                                                                <li>
                                                                    <a href="#" class="dropdown-item text-warning" data-bs-toggle="modal" data-bs-target="#editTodoModal-{{ $todo->id }}">
                                                                        <i class="ti ti-edit me-1"></i> {{ __('Edit') }}
                                                                    </a>
                                                                </li>
                                                                {{-- <li>
                                                                    <form action="{{ route('todo.destroy', $todo) }}" method="POST">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                                            <i class="ti ti-trash me-1"></i> {{ __('Delete') }}
                                                                        </button>
                                                                    </form>
                                                                </li> --}}
                                                                <form action="{{ route('todo.destroy', ['todo' => $todo->id, 'week' => request('week', 0)]) }}" method="POST">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <input type="hidden" name="week" value="{{ request('week', 0) }}">
                                                                    <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                                        <i class="ti ti-trash me-1"></i> {{ __('Delete') }}
                                                                    </button>
                                                                </form>
                                                            </ul>
                                                        </div>
                                                        @endif
                                                    </div>

                                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                                        <form action="{{ route('todo.update', ['todo' => $todo->id, 'week' => request('week', 0)]) }}" method="POST" class="d-inline">
                                                            @csrf
                                                            @method('PATCH')
                                                            <input type="hidden" name="week" value="{{ request('week', 0) }}">
                                                            <div class="form-check">
                                                                @if (auth()->user()->role == 'admin')
                                                                <input type="checkbox" name="is_done" onchange="this.form.submit()" {{ $todo->is_done ? 'checked' : '' }} class="form-check-input me-1">
                                                                <label class="form-check-label small {{ $todo->is_done ? 'text-decoration-line-through text-muted' : '' }}">
                                                                    {{ __('Done') }}
                                                                </label>
                                                                @endif
                                                            </div>
                                                        </form>

                                                        <span class="badge bg-light text-dark border small">
                                                            {{ $todo->user->name ?? '-' }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>

                                            @php $pos += $task['colspan']; @endphp
                                        @endforeach

                                        {{-- Empty cells after the last task --}}
                                        @for (; $pos < 7; $pos++)
                                            <td></td>
                                        @endfor
                                    </tr>
                                @endfor
                            @endif
                        </tbody>

                    </table>
                </div>
            </div>
            
            <div class="card-footer">
            </div>
        </div>
    </div>
</div>

<!-- Edit To-Do Modals -->
@foreach($todos as $todo)
<div class="modal fade" id="editTodoModal-{{ $todo->id }}" tabindex="-1" aria-labelledby="editTodoModalLabel-{{ $todo->id }}" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('todo.update', ['todo' => $todo->id, 'week' => request('week', 0)]) }}" method="POST" class="modal-content">
            @csrf
            @method('PATCH')
            <input type="hidden" name="week" value="{{ request('week', 0) }}">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title" id="editTodoModalLabel-{{ $todo->id }}">{{ __('Edit To-Do') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-12">
                <label for="project_search">{{ __('Project') }}</label>
                <input list="projects" id="project_search" name="project_id" class="form-control" placeholder="Select project..."
                    value="{{ old('project_id', $todo->project_id) }}">
                <datalist id="projects">
                    @foreach(\App\Models\Project::all() as $project)
                        <option value="{{ $project->id }}">{{ $project->description }}</option>
                    @endforeach
                </datalist>

                    {{-- <label for="project_id_{{ $todo->id }}" class="form-label">{{ __('Project') }}</label>
                    <select name="project_id" id="project_id_{{ $todo->id }}" class="form-select">
                        <option value="">{{ __('Select project...') }}</option>
                        @foreach(\App\Models\Project::all() as $project)
                            <option value="{{ $project->id }}"
                                @if($todo->project_id == $project->id) selected @endif>
                                {{ $project->description }}
                            </option>
                        @endforeach
                    </select> --}}
                </div>
                <div class="col-12">
                    <label for="title_{{ $todo->id }}" class="form-label">{{ __('To-Do Title') }}</label>
                    <input type="text" name="title" id="title_{{ $todo->id }}" class="form-control" value="{{ $todo->title }}" required>
                </div>
                <div class="col-md-6">
                    <label for="date_received_{{ $todo->id }}" class="form-label">{{ __('Date Received') }}</label>
                    <input type="date" name="date_received" id="date_received_{{ $todo->id }}" class="form-control" value="{{ $todo->date_received ? $todo->date_received->format('Y-m-d') : now()->toDateString() }}" required>
                </div>
                <div class="col-md-6">
                    <label for="due_date_{{ $todo->id }}" class="form-label">{{ __('Due Date') }}</label>
                    <input type="date" name="due_date" id="due_date_{{ $todo->id }}" class="form-control" value="{{ $todo->due_date ? $todo->due_date->format('Y-m-d') : now()->toDateString() }}">
                </div>
                {{-- @if(auth()->user()->role === 'admin') --}}
                    <div class="col-6">
                        <label for="user_id_{{ $todo->id }}" class="form-label">{{ __('Assign to user') }}</label>
                        <select name="user_id" id="user_id_{{ $todo->id }}" class="form-select" required>
                            <option value="" disabled>{{ __('Select user...') }}</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}" @if($todo->user_id == $user->id) selected @endif>
                                    {{ $user->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                {{-- @endif --}}
                <div class="col-md-6">
                    <label for="status_id_{{ $todo->id }}" class="form-label">{{ __('Status') }}</label>
                    <select name="status_id" id="status_id_{{ $todo->id }}" class="form-select" required>
                        <option value="" disabled>{{ __('Select status...') }}</option>
                        @foreach($statuses as $status)
                            <option value="{{ $status->id }}" @if($todo->status_id == $status->id) selected @endif>
                                {{ \Illuminate\Support\Str::title($status->name) }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
            </div>
        </form>
    </div>
</div>
@endforeach

<!-- Add To-Do Modal -->
<div class="modal fade" id="addTodoModal" tabindex="-1" aria-labelledby="addTodoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('todo.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title" id="addTodoModalLabel">{{ __('Add To-Do') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-12">
                    <label for="project_search">{{ __('Project') }}</label>
                    <input list="projects" id="project_search" name="project_id" class="form-control" placeholder="Select project...">
                    <datalist id="projects">
                        @foreach(\App\Models\Project::all() as $project)
                            <option value="{{ $project->id }}">{{ $project->description }}</option>
                        @endforeach
                    </datalist>

                    {{-- <label for="project_id" class="form-label">{{ __('Project') }}</label>
                    <select name="project_id" id="project_id" class="form-select">
                        <option value="">{{ __('Select project...') }}</option>
                        @foreach(\App\Models\Project::all() as $project)
                            <option value="{{ $project->id }}">
                                {{ \Illuminate\Support\Str::limit($project->description, 100) }}
                            </option>
                        @endforeach
                    </select> --}}
                </div>
                <div class="col-12">
                    <label for="title" class="form-label">{{ __('To-Do Title') }}</label>
                    <input type="text" name="title" id="title" class="form-control" required>
                </div>
                <div class="col-md-6">
                    <label for="date_received" class="form-label">{{ __('Date Received') }}</label>
                    <input type="date" name="date_received" id="date_received" class="form-control" value="{{ now()->toDateString() }}" required>
                </div>
                <div class="col-md-6">
                    <label for="due_date" class="form-label">{{ __('Due Date') }}</label>
                    <input type="date" name="due_date" id="due_date" class="form-control" value="{{ now()->toDateString() }}">
                </div>
                {{-- @if(auth()->user()->role === 'admin') --}}
                    <div class="col-6">
                        <label for="user_id" class="form-label">{{ __('Assign to user') }}</label>
                        <select name="user_id" id="user_id" class="form-select" required>
                            <option value="" disabled>{{ __('Select user...') }}</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                {{-- @endif --}}
                <div class="col-md-6">
                    <label for="status_id" class="form-label">{{ __('Status') }}</label>
                    <select name="status_id" id="status_id" class="form-select" required>
                        <option value="" disabled>{{ __('Select status...') }}</option>
                        @foreach($statuses as $status)
                            <option value="{{ $status->id }}">{{ \Illuminate\Support\Str::title($status->name) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script')
<script>
    document.addEventListener("DOMContentLoaded", () => {
        // Auto-hide alerts
        ['success-alert', 'validation-alert'].forEach(id => {
            const alertEl = document.getElementById(id);
            if (alertEl) {
                setTimeout(() => {
                    alertEl.classList.remove('show');
                    alertEl.classList.add('hide');
                    setTimeout(() => {
                        alertEl.remove();
                    }, 500);
                }, 3000);
            }
        });

        const projectSearch = document.getElementById('project_search');
        const projectIdInput = document.getElementById('project_id');
        const dataList = document.getElementById('projects');

        projectSearch.addEventListener('input', function() {
            const val = this.value;
            let foundId = '';
            for (let option of dataList.options) {
                if (option.value === val) {
                    foundId = option.getAttribute('data-id');
                    break;
                }
            }
            projectIdInput.value = foundId;
        });
    });
</script>
@endsection