@extends('layouts.app')
@section('title', 'Progress Tracking')

@push('head')
<style>.tracking-modal-wide{width:min(640px,94vw)!important;max-width:94vw}</style>
@endpush

@section('content')
@php
  $fq = array_filter(request()->only(['project_id','milestone_status','daily_status','issue_status','date_from','date_to','q','issue_type','severity']), fn ($v) => $v !== null && $v !== '');
  $exportQs = http_build_query($fq);
  $milestoneStatus = request('milestone_status', request('status', 'all'));
@endphp
<div class="p-4 sm:p-6 lg:p-7">
  @if ($errors->any())
    <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-800">
      <p class="font-semibold mb-1">Please fix the following:</p>
      <ul class="list-disc pl-5 space-y-0.5">
        @foreach ($errors->all() as $err)
          <li>{{ $err }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-4 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900">Progress Tracking</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Milestones, site updates and project progress</p>
    </div>
    <div class="flex flex-wrap gap-2 justify-end">
      <a href="{{ route('tracking.export.excel', $fq) }}" class="bs no-underline inline-flex items-center gap-1.5" style="padding:8px 14px;border-radius:9px"><i class="fa-regular fa-file-excel text-emerald-600"></i> Excel</a>
      <a href="{{ route('tracking.export.pdf', $fq) }}" class="bs no-underline inline-flex items-center gap-1.5" style="padding:8px 14px;border-radius:9px"><i class="fa-regular fa-file-pdf text-red-600"></i> PDF</a>
      <a href="{{ route('tracking.site-diary.export.excel', $fq) }}" class="bs no-underline inline-flex items-center gap-1.5 text-[12px]" style="padding:8px 12px;border-radius:9px" title="Site diary"><i class="fa-solid fa-clipboard-list text-slate-500"></i> Diary Excel</a>
      <a href="{{ route('tracking.site-diary.export.pdf', $fq) }}" class="bs no-underline inline-flex items-center gap-1.5 text-[12px]" style="padding:8px 12px;border-radius:9px" title="Site diary"><i class="fa-solid fa-file-pdf text-red-500"></i> Diary PDF</a>
      <button type="button" onclick="document.getElementById('trk_issue_create').classList.add('open')" class="bs" style="padding:8px 14px;border-radius:9px"><i class="fa-solid fa-triangle-exclamation mr-1 text-xs text-amber-600"></i>Report Issue</button>
      <button type="button" onclick="document.getElementById('trk_diary_create').classList.add('open')" class="bs" style="padding:8px 14px;border-radius:9px"><i class="fa-solid fa-pen mr-1 text-xs"></i>Daily Update</button>
      <button type="button" onclick="document.getElementById('trk_ms_create').classList.add('open')" class="ba"><i class="fa-solid fa-plus text-xs"></i>Add Milestone</button>
    </div>
  </div>

  <form method="get" action="{{ route('tracking.index') }}" class="card p-4 mb-5">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3 items-end">
      <div>
        <label class="fl">Project</label>
        <select name="project_id" class="fi">
          <option value="">All projects</option>
          @foreach($projectList as $p)
            <option value="{{ $p->id }}" @selected(request('project_id') == $p->id)>{{ $p->name }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Milestone status</label>
        <select name="milestone_status" class="fi">
          @foreach(['all','pending','active','done','delayed','cancelled'] as $st)
            <option value="{{ $st }}" @selected($milestoneStatus === $st)>{{ $st === 'all' ? 'All' : ucfirst($st) }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Diary status</label>
        <select name="daily_status" class="fi">
          @foreach(['all','Draft','Submitted','Reviewed','Approved','Rejected'] as $st)
            <option value="{{ $st }}" @selected(request('daily_status', 'all') === $st)>{{ $st === 'all' ? 'All' : $st }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Date from</label>
        <input type="date" name="date_from" class="fi" value="{{ request('date_from') }}">
      </div>
      <div>
        <label class="fl">Date to</label>
        <input type="date" name="date_to" class="fi" value="{{ request('date_to') }}">
      </div>
      <div>
        <label class="fl">Search</label>
        <input type="text" name="q" class="fi" value="{{ request('q') }}" placeholder="Milestones, updates, issues…">
      </div>
    </div>
    <div class="flex flex-wrap gap-2 mt-3 items-center">
      <button type="submit" class="bp" style="padding:8px 16px">Apply</button>
      <a href="{{ route('tracking.index') }}" class="text-[12px] text-blue-600 font-semibold no-underline hover:underline">Clear</a>
      <span class="text-[11px] text-slate-400 ml-auto">Issue filters: type & severity apply to the issues list in reports export.</span>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3">
      <div>
        <label class="fl">Issue status</label>
        <select name="issue_status" class="fi">
          @foreach(['all','Open','In Progress','Resolved','Closed'] as $st)
            <option value="{{ $st }}" @selected(request('issue_status', 'all') === $st)>{{ $st }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Issue type</label>
        <select name="issue_type" class="fi">
          <option value="all">All</option>
          @foreach(['Delay','Safety','Quality','Weather','Labour','Material','Equipment','Design','Client','Other'] as $t)
            <option value="{{ $t }}" @selected(request('issue_type') === $t)>{{ $t }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Severity</label>
        <select name="severity" class="fi">
          <option value="all">All</option>
          @foreach(['Low','Medium','High','Critical'] as $s)
            <option value="{{ $s }}" @selected(request('severity') === $s)>{{ $s }}</option>
          @endforeach
        </select>
      </div>
    </div>
  </form>

  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Active projects</p>
      <p class="text-2xl font-bold text-slate-900">{{ $stats['active_projects'] }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Avg progress</p>
      <p class="text-2xl font-bold text-slate-900">{{ $stats['avg_progress'] }}%</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Delayed milestones</p>
      <p class="text-2xl font-bold text-red-600">{{ $stats['delayed_milestones'] }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Updates today</p>
      <p class="text-2xl font-bold text-blue-600">{{ $stats['updates_today'] }}</p>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
    {{-- Milestones timeline --}}
    <div class="card p-5">
      <div class="flex items-center justify-between mb-4">
        <p class="font-bold text-slate-900"><i class="fa-solid fa-list-check text-blue-600 mr-2 text-sm"></i>Project milestones</p>
        <button type="button" onclick="document.getElementById('trk_ms_create').classList.add('open')" class="bsm b text-[11px]">Add</button>
      </div>
      @if($milestones->isEmpty())
        <div class="text-center py-10 px-4">
          <i class="fa-solid fa-list-check text-4xl text-slate-200 mb-3"></i>
          <p class="font-semibold text-slate-700">No milestones found</p>
          <p class="text-slate-400 text-[12px] mt-1 mb-4">Add project milestones to begin tracking progress.</p>
          <button type="button" onclick="document.getElementById('trk_ms_create').classList.add('open')" class="ba" style="padding:8px 14px">Add Milestone</button>
        </div>
      @else
        <div class="relative pl-2">
          @foreach($milestones as $m)
            @php
              $delayed = $m->isDelayed();
              $st = $m->status;
              if ($st === 'done') { $ic = 'fa-check'; $bg = 'bg-emerald-100 text-emerald-600'; }
              elseif ($st === 'cancelled') { $ic = 'fa-xmark'; $bg = 'bg-slate-100 text-slate-500'; }
              elseif ($delayed || $st === 'delayed') { $ic = 'fa-triangle-exclamation'; $bg = 'bg-red-100 text-red-600'; }
              elseif ($st === 'active') { $ic = 'fa-hammer'; $bg = 'bg-blue-100 text-blue-600'; }
              else { $ic = 'fa-clock'; $bg = 'bg-slate-100 text-slate-400'; }
            @endphp
            <div class="relative flex gap-3 pb-6 last:pb-0">
              <div class="flex flex-col items-center w-8 flex-shrink-0">
                <div class="w-8 h-8 rounded-full {{ $bg }} flex items-center justify-center text-xs z-10"><i class="fa-solid {{ $ic }}"></i></div>
                @if(!$loop->last)
                  <div class="w-0.5 flex-1 bg-slate-200 mt-1 min-h-[12px]"></div>
                @endif
              </div>
              <div class="flex-1 min-w-0 pt-0.5">
                <div class="flex flex-wrap items-start gap-2 justify-between">
                  <div>
                    <p class="font-semibold text-slate-800 text-[13px]">{{ $m->name }}</p>
                    <p class="text-slate-400 text-[11px]">
                      <a href="{{ route('projects.show', $m->project_id) }}" class="text-blue-600 no-underline hover:underline">{{ $m->project?->name }}</a>
                      · Planned {{ $m->planned_date?->format('M j, Y') }}
                      @if($m->actual_date)
                        · Actual {{ $m->actual_date->format('M j, Y') }}
                      @endif
                    </p>
                  </div>
                  <div class="flex flex-wrap gap-1 items-center">
                    <span class="badge {{ $st==='done'?'g':($st==='active'?'b':($st==='delayed'||$delayed?'r':($st==='cancelled'?'s':'s'))) }}">{{ ucfirst($st) }}</span>
                    @if(in_array($m->priority, ['High','Critical'], true))
                      <span class="badge a">{{ $m->priority }}</span>
                    @endif
                    @if($delayed && $st !== 'done' && $st !== 'cancelled')
                      <span class="badge r">At risk</span>
                    @endif
                  </div>
                </div>
                @if($m->description)
                  <p class="text-slate-500 text-[11px] mt-1 line-clamp-2">{{ $m->description }}</p>
                @endif
                <div class="flex flex-wrap gap-2 mt-2">
                  @if(in_array($st, ['pending','active','delayed'], true))
                    <form method="post" action="{{ route('tracking.milestones.complete', $m) }}" class="inline-flex items-center gap-1 flex-wrap">
                      @csrf
                      @method('PUT')
                      <input type="date" name="actual_date" value="{{ now()->format('Y-m-d') }}" class="fi text-[11px] py-1" style="max-width:140px">
                      <button type="submit" class="bsm g text-[11px]">Mark complete</button>
                    </form>
                  @endif
                  <a href="{{ route('tracking.project', $m->project_id) }}#milestone-{{ $m->id }}" class="bsm b text-[11px] no-underline">Edit</a>
                  @if($st !== 'done' && $st !== 'cancelled')
                    <button type="button" class="bsm s text-[11px]" onclick="trkOpenCancel({{ $m->id }})">Cancel</button>
                  @endif
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @endif
    </div>

    {{-- Project progress --}}
    <div class="card p-5">
      <p class="font-bold text-slate-900 mb-4"><i class="fa-solid fa-bars-progress text-blue-600 mr-2 text-sm"></i>Project progress</p>
      @if($projects->isEmpty())
        <div class="text-center py-10 text-slate-400 text-[13px]">No active projects to track.</div>
      @else
        @foreach($projects as $p)
          @php
            $lastUp = $p->dailyUpdates->first();
            $bar = 'bg-blue-500';
            if ($p->progress_percentage >= 100) $bar = 'bg-emerald-500';
            elseif ($p->status === 'At Risk') $bar = 'bg-red-500';
            elseif ($p->status === 'On Hold') $bar = 'bg-amber-400';
            elseif ($p->status === 'On Track') $bar = 'bg-emerald-500';
          @endphp
          <a href="{{ route('tracking.project', $p) }}" class="block mb-4 last:mb-0 p-3 rounded-xl border border-slate-100 hover:border-blue-200 hover:bg-slate-50/80 transition no-underline">
            <div class="flex justify-between items-start gap-2 mb-1.5">
              <div class="min-w-0">
                <span class="text-slate-800 font-semibold text-[13px]">{{ $p->name }}</span>
                <p class="text-slate-400 text-[11px] truncate">
                  @if($p->client?->company_name){{ $p->client->company_name }}@endif
                  @if($p->location) · {{ $p->location }} @endif
                </p>
              </div>
              <span class="font-bold text-slate-700 text-[13px] shrink-0">{{ $p->progress_percentage }}%</span>
            </div>
            <div class="pb mb-2"><div class="pf {{ $bar }}" style="width:{{ min(100, max(0, (int)$p->progress_percentage)) }}%"></div></div>
            <div class="flex flex-wrap gap-2 text-[11px] text-slate-500">
              <span class="badge {{ $p->status==='At Risk'?'r':($p->status==='On Hold'?'a':($p->progress_percentage>=100?'g':'b')) }}">{{ $p->status }}</span>
              @if($p->due_date)<span>Due {{ $p->due_date->format('M j, Y') }}</span>@endif
              @if($lastUp)<span>Last diary {{ $lastUp->update_date?->format('M j, Y') }}</span>@endif
            </div>
          </a>
        @endforeach
      @endif
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="card p-5 card-has-table">
      <div class="flex items-center justify-between mb-3">
        <p class="font-bold text-slate-900"><i class="fa-solid fa-clipboard-list text-slate-500 mr-2 text-sm"></i>Recent daily site updates</p>
        <button type="button" onclick="document.getElementById('trk_diary_create').classList.add('open')" class="bsm b text-[11px]">Daily Update</button>
      </div>
      @if($diary->isEmpty())
        <div class="text-center py-10 px-4">
          <i class="fa-solid fa-clipboard text-3xl text-slate-200 mb-2"></i>
          <p class="text-slate-500 text-[13px]">No daily site updates submitted yet.</p>
          <button type="button" onclick="document.getElementById('trk_diary_create').classList.add('open')" class="ba mt-3" style="padding:8px 14px">Daily Update</button>
        </div>
      @else
        <table>
          <thead>
            <tr class="border-b border-slate-100">
              <th class="th">Date</th>
              <th class="th">Project</th>
              <th class="th">Work</th>
              <th class="th">Labour</th>
              <th class="th">Status</th>
              <th class="th"></th>
            </tr>
          </thead>
          <tbody>
            @foreach($diary as $d)
              @php
                $badge = match($d->status) {
                  'Draft' => 's',
                  'Submitted' => 'b',
                  'Reviewed' => 'v',
                  'Approved' => 'g',
                  'Rejected' => 'r',
                  default => 's',
                };
              @endphp
              <tr>
                <td class="td text-slate-500 text-[11px] whitespace-nowrap">{{ $d->update_date?->format('M j, Y') }}</td>
                <td class="td font-medium text-slate-700 text-[12px]">{{ $d->project?->name }}</td>
                <td class="td text-slate-600 text-[12px] max-w-[200px]">{{ \Illuminate\Support\Str::limit($d->work_completed, 56) }}</td>
                <td class="td text-slate-500 text-[12px]">{{ $d->labour_count }}</td>
                <td class="td"><span class="badge {{ $badge }}">{{ $d->status }}</span></td>
                <td class="td text-right whitespace-nowrap">
                  @if($d->issues_noted || $d->delays_noted)
                    <i class="fa-solid fa-triangle-exclamation text-amber-500 text-xs" title="Issues/delays noted"></i>
                  @endif
                  @if(in_array($d->status, ['Submitted','Reviewed','Draft'], true))
                    <form method="post" action="{{ route('tracking.diary.approve', $d) }}" class="inline">
                      @csrf
                      @method('PUT')
                      <label class="inline-flex items-center gap-1 text-[10px] text-slate-500 mr-1"><input type="checkbox" name="allow_progress_decrease" value="1" class="rounded border-slate-300">allow %↓</label>
                      <button type="submit" class="bsm g text-[10px]">Approve</button>
                    </form>
                    <button type="button" class="bsm r text-[10px]" onclick="trkOpenReject({{ $d->id }})">Reject</button>
                  @endif
                  @if(!$d->isReadOnly())
                    <button type="button" class="trk-diary-edit-btn bsm b text-[10px]" data-diary="{{ e(json_encode($d->only(['id','work_completed','labour_count','issues_noted','delays_noted','weather_condition','site_condition','materials_used','equipment_used','safety_notes','next_steps','progress_percentage','status']))) }}">Edit</button>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      @endif
    </div>

    <div class="card p-5">
      <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-bug text-amber-600 mr-2 text-sm"></i>Open issues &amp; delays</p>
      @php $issuesBySev = $issues->groupBy('severity'); @endphp
      @if($issues->isEmpty())
        <div class="text-center py-10 rounded-xl bg-emerald-50/50 border border-emerald-100">
          <i class="fa-solid fa-circle-check text-3xl text-emerald-400 mb-2"></i>
          <p class="text-emerald-800 font-medium text-[13px]">No open issues or delays</p>
          <p class="text-emerald-600/80 text-[11px] mt-1">Keep up the good work on site.</p>
        </div>
      @else
        @foreach(['Critical','High','Medium','Low'] as $sev)
          @if($issuesBySev->has($sev))
            <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mt-3 first:mt-0 mb-2">{{ $sev }}</p>
            @foreach($issuesBySev->get($sev) as $iss)
              <div class="border border-slate-100 rounded-xl p-3 mb-2 last:mb-0">
                <div class="flex justify-between gap-2">
                  <p class="font-semibold text-slate-800 text-[13px]">{{ $iss->title }}</p>
                  <span class="badge {{ $iss->severity==='Critical'?'r':($iss->severity==='High'?'a':'b') }}">{{ $iss->severity }}</span>
                </div>
                <p class="text-[11px] text-slate-500 mt-1">
                  <a href="{{ route('tracking.project', $iss->project_id) }}" class="text-blue-600 no-underline hover:underline">{{ $iss->project?->name }}</a>
                  · {{ $iss->issue_type }}
                  · {{ $iss->status }}
                  · Reported {{ $iss->reported_date?->format('M j, Y') }}
                  @if($iss->impact_days !== null)<span class="text-amber-700">· Impact {{ $iss->impact_days }}d</span>@endif
                </p>
                @if(in_array($iss->status, ['Open','In Progress'], true))
                  <button type="button" class="trk-resolve-btn bsm g text-[11px] mt-2" data-issue-id="{{ $iss->id }}" data-issue-title="{{ e($iss->title) }}">Resolve</button>
                @endif
              </div>
            @endforeach
          @endif
        @endforeach
      @endif
    </div>
  </div>
</div>

{{-- Modals --}}
<div id="trk_ms_create" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal tracking-modal-wide" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Add milestone</p>
      <button type="button" onclick="document.getElementById('trk_ms_create').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0 text-slate-500 cursor-pointer">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.milestone-form', ['milestone' => null, 'overlayId' => 'trk_ms_create', 'projectList' => $projectList])
    </div>
  </div>
</div>

<div id="trk_diary_create" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal tracking-modal-wide" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Daily site update</p>
      <button type="button" onclick="document.getElementById('trk_diary_create').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0 text-slate-500 cursor-pointer">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.daily-update-form', ['projectList' => $projectList, 'documentsByProject' => $documentsByProject])
    </div>
  </div>
</div>

<div id="trk_issue_create" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal tracking-modal-wide" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Report issue</p>
      <button type="button" onclick="document.getElementById('trk_issue_create').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0 text-slate-500 cursor-pointer">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.issue-form', ['projectList' => $projectList, 'milestonesForSelect' => $milestonesForSelect, 'diaryForIssueLink' => $diaryForIssueLink, 'users' => $users])
    </div>
  </div>
</div>

<div id="trk_issue_resolve" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal tracking-modal-wide" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Resolve issue</p>
      <button type="button" onclick="document.getElementById('trk_issue_resolve').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0 text-slate-500 cursor-pointer">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.resolve-issue-form')
    </div>
  </div>
</div>

<div id="trk_diary_reject" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Reject site diary</p>
      <button type="button" onclick="document.getElementById('trk_diary_reject').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0 text-slate-500 cursor-pointer">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.reject-diary-form')
    </div>
  </div>
</div>

<div id="trk_diary_edit" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal tracking-modal-wide" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Edit site diary</p>
      <button type="button" onclick="document.getElementById('trk_diary_edit').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0 text-slate-500 cursor-pointer">&times;</button>
    </div>
    <div class="p-5">
      <form id="trk_diary_edit_form" method="post" action="#" class="space-y-3">
        @csrf
        @method('PUT')
        <div>
          <label class="fl">Work completed</label>
          <textarea name="work_completed" id="trk_de_work" class="fi" rows="3" required maxlength="5000"></textarea>
        </div>
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="fl">Labour count</label>
            <input type="number" name="labour_count" id="trk_de_lab" class="fi" min="0" required>
          </div>
          <div>
            <label class="fl">Progress %</label>
            <input type="number" name="progress_percentage" id="trk_de_prog" class="fi" min="0" max="100">
          </div>
        </div>
        <div class="grid grid-cols-2 gap-3">
          <div><label class="fl">Weather</label><input type="text" name="weather_condition" id="trk_de_wx" class="fi" maxlength="100"></div>
          <div><label class="fl">Site condition</label><input type="text" name="site_condition" id="trk_de_site" class="fi" maxlength="100"></div>
        </div>
        <div><label class="fl">Materials used</label><textarea name="materials_used" id="trk_de_mat" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Equipment used</label><textarea name="equipment_used" id="trk_de_eq" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Issues</label><textarea name="issues_noted" id="trk_de_iss" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Delays</label><textarea name="delays_noted" id="trk_de_del" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Safety</label><textarea name="safety_notes" id="trk_de_safe" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Next steps</label><textarea name="next_steps" id="trk_de_next" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div>
          <label class="fl">Status</label>
          <select name="status" id="trk_de_stat" class="fi">
            @foreach(['Draft','Submitted','Reviewed'] as $s)<option value="{{ $s }}">{{ $s }}</option>@endforeach
          </select>
        </div>
        <div class="flex justify-end gap-2 pt-2">
          <button type="button" class="bs" onclick="document.getElementById('trk_diary_edit').classList.remove('open')">Cancel</button>
          <button type="submit" class="bp">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div id="trk_ms_cancel" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Cancel milestone</p>
      <button type="button" onclick="document.getElementById('trk_ms_cancel').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0 text-slate-500 cursor-pointer">&times;</button>
    </div>
    <div class="p-5">
      <form id="trk_ms_cancel_form" method="post" action="#" class="space-y-3">
        @csrf
        @method('PUT')
        <div>
          <label class="fl">Reason (optional)</label>
          <textarea name="cancellation_reason" class="fi" rows="2" maxlength="1000" placeholder="Why is this milestone no longer applicable?"></textarea>
        </div>
        <div class="flex justify-end gap-2 pt-2">
          <button type="button" class="bs" onclick="document.getElementById('trk_ms_cancel').classList.remove('open')">Back</button>
          <button type="submit" class="bp" style="background:#64748b">Confirm cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function(){
  var TRK_BASE = @json(rtrim(url('/'), '/'));
  document.querySelectorAll('.trk-ms-status').forEach(function(sel){
    function sync(){
      var t = document.getElementById(sel.getAttribute('data-actual-target'));
      if(!t) return;
      if(sel.value === 'done') t.classList.remove('hidden'); else t.classList.add('hidden');
    }
    sel.addEventListener('change', sync);
    sync();
  });
  window.trkOpenCancel = function(id){
    var f = document.getElementById('trk_ms_cancel_form');
    f.action = TRK_BASE + '/milestones/' + id + '/cancel';
    document.getElementById('trk_ms_cancel').classList.add('open');
  };
  window.trkOpenReject = function(id){
    var f = document.getElementById('trk_reject_diary_form');
    f.action = TRK_BASE + '/site-updates/' + id + '/reject';
    document.getElementById('trk_diary_reject').classList.add('open');
  };
  window.trkOpenDiaryEdit = function(row){
    var f = document.getElementById('trk_diary_edit_form');
    f.action = TRK_BASE + '/site-updates/' + row.id;
    document.getElementById('trk_de_work').value = row.work_completed || '';
    document.getElementById('trk_de_lab').value = row.labour_count ?? 0;
    document.getElementById('trk_de_prog').value = row.progress_percentage ?? '';
    document.getElementById('trk_de_wx').value = row.weather_condition || '';
    document.getElementById('trk_de_site').value = row.site_condition || '';
    document.getElementById('trk_de_mat').value = row.materials_used || '';
    document.getElementById('trk_de_eq').value = row.equipment_used || '';
    document.getElementById('trk_de_iss').value = row.issues_noted || '';
    document.getElementById('trk_de_del').value = row.delays_noted || '';
    document.getElementById('trk_de_safe').value = row.safety_notes || '';
    document.getElementById('trk_de_next').value = row.next_steps || '';
    document.getElementById('trk_de_stat').value = row.status || 'Submitted';
    document.getElementById('trk_diary_edit').classList.add('open');
  };
  document.querySelectorAll('.trk-diary-edit-btn').forEach(function(btn){
    btn.addEventListener('click', function(){
      try { window.trkOpenDiaryEdit(JSON.parse(btn.getAttribute('data-diary'))); } catch(e) { console.error(e); }
    });
  });
  document.querySelectorAll('.trk-resolve-btn').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = btn.getAttribute('data-issue-id');
      var title = btn.getAttribute('data-issue-title') || '';
      var f = document.getElementById('trk_resolve_form');
      f.action = TRK_BASE + '/tracking/issues/' + id + '/resolve';
      document.getElementById('trk_resolve_title').textContent = title;
      var ta = f.querySelector('[name=resolution_notes]');
      if(ta) ta.value = '';
      document.getElementById('trk_issue_resolve').classList.add('open');
    });
  });
})();
</script>
@endpush