@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('License & Renewal'))

@section('content')

<style>
    h3.text-blue {
        font-weight: bold;
        border-bottom: 1px solid #cce;
        padding-bottom: 5px;
    }
    .timeline-event-card:hover {
        background-color: #f8f9fa;
        transform: scale(1.01);
    }
</style>

<div class="page-wrapper">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header">
                <h3 class="card-title">{{ __('Timeline of License & Renewal') }}</h3>
            </div>

            {{-- Search Filter --}}
            <div class="mb-0">
                <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="mt-3 collapse @if(request('q')) show @endif">
                        <form id="form-search" method="GET" action="{{ route('license_renewal.index') }}">
                            <div class="row">

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

                                <div class="col-md-2">
                                    <div class="form-floating">
                                        <select class="form-select" id="month" name="month">
                                            <option value="">-- Month --</option>
                                            @foreach(range(1,12) as $m)
                                                <option value="{{ $m }}" {{ request('month') == $m ? 'selected' : '' }}>
                                                    {{ \Carbon\Carbon::create()->month($m)->format('F') }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label for="month">{{ __('Due Month') }}</label>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-floating">
                                        {{-- <input type="number" class="form-control" id="year" name="year" value="{{ request('year') }}"
                                            min="1000" max="9999" placeholder="2024" pattern="\d{4}"> --}}
                                        <input type="number" class="form-control" id="year" name="year"
                                            value="{{ request('year') }}"
                                            min="2000" max="9999"
                                            oninvalid="this.setCustomValidity('Please enter a valid 4-digit year')"
                                            oninput="setCustomValidity('')">
                                        <label for="year">{{ __('Due Year') }}</label>
                                    </div>
                                </div>

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

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

                                <div class="col-md-2">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="client" name="client" value="{{ request('client') }}" autocomplete="off">
                                        <label for="client">{{ __('Client') }}</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 mt-2">
                                        <i class="ti ti-search"></i>
                                    </button>
                                    <a href="{{ route('license_renewal.index') }}" class="btn btn-ghost-yellow mt-2" title="{{ __('Reset') }}">
                                        <i class="ti ti-refresh"></i>
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="card-body">
                @if ($notes->isEmpty())
                    <div class="alert alert-warning text-center m-2">
                        <i class="ti ti-info-hexagon me-2"></i> There is no license & renewal available.
                    </div>
                @else
                    @foreach ($notes as $monthYear => $group)
                        <h3 class="mb-4 mt-4 text-blue">{{ $monthYear }}</h3>
                        <ul class="timeline">
                            <div class="fw-bold mb-2 text-muted">
                                Date
                            </div>
                            @foreach ($group as $note)
                                @php
                                    $isOverdue = $note->notes_duedate && \Carbon\Carbon::parse($note->notes_duedate)->isPast();
                                    $dueDate = \Carbon\Carbon::parse($note->notes_duedate);
                                    $isDueToday = $dueDate->isToday();
                                    $textColor = ($isDueToday || $isOverdue) ? 'red' : 'blue';
                                    $badgeText = $isDueToday ? 'Today' : $dueDate->diffForHumans();
                                    $projectUrl = route('project_list.show', $note->project_id);
                                @endphp

                                <li class="timeline-event">
                                    <div class="timeline-event-icon {{ $isOverdue ? 'bg-red-lt' : 'bg-blue-lt' }} text-dark fw-bold d-flex justify-content-center align-items-center"
                                        style="width: 32px; height: 32px; border-radius: 50%; font-size: 12px;">
                                        {{ $dueDate->format('d') }}
                                    </div>

                                    <!-- Make the entire card a link -->
                                    <a href="{{ $projectUrl }}" class="text-decoration-none text-dark w-100" title="View project's details">
                                        <div class="card timeline-event-card shadow-sm hover-shadow" style="transition: 0.3s;">
                                            <div class="card-body">
                                                <small class="float-end">
                                                    <span class="badge badge-outline text-{{ $textColor }} ms-2" style="font-size: 12px;">
                                                        {{ $badgeText }}
                                                    </span>
                                                </small>

                                                <div class="d-flex justify-content-start align-items-center mb-2">
                                                    <i class="ti ti-info-hexagon me-2"></i>
                                                    <h4 class="mb-0">{{ ucfirst($note->notes) }}</h4>
                                                </div>

                                                <p class="text-secondary mb-1">
                                                    <strong>Project:</strong> {{ $note->project->description ?? '-' }}<br>
                                                    <strong>Client:</strong> {{ $note->project->client ?? '-' }}
                                                </p>

                                                <small class="text-muted">Created on {{ $note->created_at->format('d M Y') }}</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endforeach
                @endif
            </div>
            
            <div class="card-footer">
            </div>
        </div>
    </div>
</div>
@endsection