@extends('layouts.app')
@section('title', 'Project tracking · '.$project->name)

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

@section('content')
@php
  $labourSum = $project->dailyUpdates->sum('labour_count');
  $milestonesDone = $project->milestones->where('status', 'done')->count();
  $openIss = $project->trackingIssues->whereIn('status', ['Open','In Progress'])->count();
  $lastDiary = $project->dailyUpdates->first();
@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">
      @foreach ($errors->all() as $err)<p>{{ $err }}</p>@endforeach
    </div>
  @endif

  <div class="mb-4">
    <a href="{{ route('tracking.index') }}" class="text-[12px] text-blue-600 font-semibold no-underline hover:underline"><i class="fa-solid fa-arrow-left mr-1"></i>Back to tracking</a>
  </div>

  <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">{{ $project->name }}</p>
      <p class="text-slate-400 text-[11px] mt-0.5">
        @if($project->client?->company_name){{ $project->client->company_name }}@endif
        @if($project->location) · {{ $project->location }} @endif
        <span class="badge {{ $project->status==='At Risk'?'r':($project->status==='On Hold'?'a':'b') }} ml-2">{{ $project->status }}</span>
      </p>
      <p class="text-slate-600 text-[12px] mt-2">Progress <strong>{{ $project->progress_percentage }}%</strong>
        @if($project->due_date) · Due {{ $project->due_date->format('M j, Y') }} @endif
      </p>
    </div>
    <div class="flex flex-wrap gap-2 justify-end">
      @php $ex = ['project_id' => $project->id]; @endphp
      <a href="{{ route('tracking.export.pdf', $ex) }}" class="bs no-underline inline-flex items-center gap-1" style="padding:8px 12px;border-radius:9px"><i class="fa-regular fa-file-pdf"></i> PDF</a>
      <a href="{{ route('tracking.export.excel', $ex) }}" class="bs no-underline inline-flex items-center gap-1" style="padding:8px 12px;border-radius:9px"><i class="fa-regular fa-file-excel"></i> Excel</a>
      <a href="{{ route('projects.show', $project) }}" class="bs no-underline" style="padding:8px 12px;border-radius:9px"><i class="fa-solid fa-folder-open mr-1"></i>Project</a>
      <button type="button" onclick="document.getElementById('trk_progress_manual').classList.add('open')" class="bs" style="padding:8px 12px;border-radius:9px"><i class="fa-solid fa-percent mr-1"></i>Progress</button>
      <button type="button" onclick="document.getElementById('trk_issue_create').classList.add('open')" class="bs" style="padding:8px 12px;border-radius:9px">Report Issue</button>
      <button type="button" onclick="document.getElementById('trk_diary_create').classList.add('open')" class="bs" style="padding:8px 12px;border-radius:9px">Daily Update</button>
      <button type="button" onclick="document.getElementById('trk_ms_create').classList.add('open')" class="ba" style="padding:8px 14px">Add Milestone</button>
    </div>
  </div>

  <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">Current progress</p>
      <p class="text-2xl font-bold text-slate-900">{{ $project->progress_percentage }}%</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Milestones done</p>
      <p class="text-2xl font-bold text-emerald-600">{{ $milestonesDone }} / {{ $project->milestones->count() }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Open issues</p>
      <p class="text-2xl font-bold text-amber-600">{{ $openIss }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Last diary</p>
      <p class="text-lg font-bold text-slate-800">{{ $lastDiary?->update_date?->format('M j, Y') ?? '—' }}</p>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
    <div class="card p-5">
      <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-list-check text-blue-600 mr-2"></i>Milestone timeline</p>
      @forelse($project->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 id="milestone-{{ $m->id }}" class="flex gap-3 pb-4 mb-4 border-b border-slate-100 last:border-0 last:mb-0 last:pb-0">
          <div class="w-8 h-8 rounded-full {{ $bg }} flex items-center justify-center text-xs shrink-0"><i class="fa-solid {{ $ic }}"></i></div>
          <div class="flex-1 min-w-0">
            <div class="flex flex-wrap justify-between gap-2">
              <p class="font-semibold text-slate-800 text-[13px]">{{ $m->name }}</p>
              <span class="badge {{ $st==='done'?'g':($st==='active'?'b':($st==='delayed'||$delayed?'r':'s')) }}">{{ ucfirst($st) }}</span>
            </div>
            <p class="text-slate-400 text-[11px]">Planned {{ $m->planned_date?->format('M j, Y') }} @if($m->actual_date)· Done {{ $m->actual_date->format('M j, Y') }} @endif</p>
            <div class="flex flex-wrap gap-2 mt-2">
              <button type="button" class="bsm b text-[11px]" onclick="document.getElementById('trk_ms_e_{{ $m->id }}').classList.add('open')">Edit</button>
              @if(in_array($st, ['pending','active','delayed'], true))
                <form method="post" action="{{ route('tracking.milestones.complete', $m) }}" class="inline-flex items-center gap-1">
                  @csrf @method('PUT')
                  <input type="date" name="actual_date" value="{{ now()->format('Y-m-d') }}" class="fi text-[11px] py-1" style="max-width:130px">
                  <button type="submit" class="bsm g text-[11px]">Complete</button>
                </form>
              @endif
            </div>
          </div>
        </div>
      @empty
        <p class="text-slate-400 text-[12px]">No milestones for this project.</p>
      @endforelse
    </div>

    <div class="card p-5">
      <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-clipboard-list mr-2 text-slate-500"></i>Daily site updates</p>
      <div class="overflow-x-auto">
        <table>
          <thead>
            <tr class="border-b border-slate-100">
              <th class="th">Date</th>
              <th class="th">Labour</th>
              <th class="th">Status</th>
              <th class="th"></th>
            </tr>
          </thead>
          <tbody>
            @foreach($project->dailyUpdates as $d)
              <tr>
                <td class="td text-[12px]">{{ $d->update_date?->format('M j, Y') }}</td>
                <td class="td">{{ $d->labour_count }}</td>
                <td class="td"><span class="badge s">{{ $d->status }}</span></td>
                <td class="td text-right">
                  @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">%↓</label>
                      <button type="submit" class="bsm g text-[10px]">Approve</button>
                    </form>
                  @endif
                  @if(!$d->isReadOnly())
                    <button type="button" class="trk-diary-edit-btn-p 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>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
    <div class="card p-5">
      <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-clock-rotate-left text-slate-500 mr-2"></i>Progress history</p>
      @forelse($project->progressSnapshots as $sn)
        <div class="flex justify-between text-[12px] border-b border-slate-50 py-2 last:border-0">
          <span class="text-slate-600">{{ $sn->recorded_at?->format('M j, Y H:i') }}</span>
          <span class="font-bold text-slate-800">{{ $sn->progress_percentage }}%</span>
          <span class="text-slate-400 text-[11px]">{{ $sn->source_type }}{{ $sn->notes ? ' · '.\Illuminate\Support\Str::limit($sn->notes, 40) : '' }}</span>
        </div>
      @empty
        <p class="text-slate-400 text-[12px]">No progress snapshots yet.</p>
      @endforelse
    </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"></i>Issues &amp; delays</p>
      @forelse($project->trackingIssues as $iss)
        <div class="border border-slate-100 rounded-lg p-3 mb-2 text-[12px]">
          <div class="font-semibold text-slate-800">{{ $iss->title }}</div>
          <p class="text-slate-500 text-[11px] mt-1">{{ $iss->issue_type }} · {{ $iss->severity }} · {{ $iss->status }}</p>
          @if(in_array($iss->status, ['Open','In Progress'], true))
            <button type="button" class="trk-resolve-btn-p bsm g text-[11px] mt-2" data-issue-id="{{ $iss->id }}" data-issue-title="{{ e($iss->title) }}">Resolve</button>
          @endif
        </div>
      @empty
        <p class="text-slate-400 text-[12px]">No issues logged.</p>
      @endforelse
    </div>
  </div>

  <div class="card p-5">
    <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-users mr-2 text-blue-600"></i>Site resources summary</p>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-[12px]">
      <div>
        <p class="text-[10px] font-bold uppercase text-slate-400 mb-1">Labour (diary totals)</p>
        <p class="text-slate-700">Total worker-days recorded: <strong>{{ $labourSum }}</strong></p>
        <p class="text-slate-400 text-[11px] mt-1">Independent of payroll; for site visibility only.</p>
      </div>
      <div>
        <p class="text-[10px] font-bold uppercase text-slate-400 mb-1">Materials issued (inventory)</p>
        <p class="text-slate-700">Issue movements: <strong>{{ (int) ($issuesSummary->cnt ?? 0) }}</strong> lines · Qty <strong>{{ number_format((float) ($issuesSummary->qty ?? 0), 2) }}</strong></p>
        <a href="{{ route('inventory.index') }}" class="text-blue-600 text-[11px] font-semibold no-underline hover:underline">Open inventory</a>
      </div>
      <div>
        <p class="text-[10px] font-bold uppercase text-slate-400 mb-1">Documents</p>
        <a href="{{ route('documents.index') }}" class="text-blue-600 text-[11px] font-semibold no-underline hover:underline">Upload / browse documents</a>
      </div>
    </div>
  </div>
</div>

{{-- Create milestone --}}
<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">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.milestone-form', ['milestone' => null, 'overlayId' => 'trk_ms_create', 'projectList' => $projectList, 'defaultProjectId' => $project->id])
    </div>
  </div>
</div>

@foreach($project->milestones as $mil)
<div id="trk_ms_e_{{ $mil->id }}" 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 milestone</p>
      <button type="button" onclick="document.getElementById('trk_ms_e_{{ $mil->id }}').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.milestone-form', ['milestone' => $mil, 'overlayId' => 'trk_ms_e_'.$mil->id, 'projectList' => $projectList])
    </div>
  </div>
</div>
@endforeach

<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">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.daily-update-form', ['projectList' => $projectList, 'documentsByProject' => $documentsByProject, 'defaultProjectId' => $project->id])
    </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">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.issue-form', [
        'projectList' => $projectList,
        'milestonesForSelect' => $milestonesForSelect,
        'dailyUpdatesForSelect' => $dailyUpdatesForSelect,
        'users' => $users,
        'defaultProjectId' => $project->id,
        'issueContextProject' => $project,
      ])
    </div>
  </div>
</div>

<div id="trk_progress_manual" 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">Manual progress update</p>
      <button type="button" onclick="document.getElementById('trk_progress_manual').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0">&times;</button>
    </div>
    <div class="p-5">
      @include('tracking.partials.progress-update-form', ['project' => $project])
    </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">&times;</button>
    </div>
    <div class="p-5">@include('tracking.partials.resolve-issue-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">&times;</button>
    </div>
    <div class="p-5">
      <form id="trk_diary_edit_form_p" 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_p" class="fi" rows="3" required maxlength="5000"></textarea></div>
        <div class="grid grid-cols-2 gap-3">
          <div><label class="fl">Labour</label><input type="number" name="labour_count" id="trk_de_lab_p" class="fi" min="0" required></div>
          <div><label class="fl">Progress %</label><input type="number" name="progress_percentage" id="trk_de_prog_p" 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_p" class="fi" maxlength="100"></div>
          <div><label class="fl">Site condition</label><input type="text" name="site_condition" id="trk_de_site_p" class="fi" maxlength="100"></div>
        </div>
        <div><label class="fl">Materials</label><textarea name="materials_used" id="trk_de_mat_p" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Equipment</label><textarea name="equipment_used" id="trk_de_eq_p" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Issues</label><textarea name="issues_noted" id="trk_de_iss_p" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Delays</label><textarea name="delays_noted" id="trk_de_del_p" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Safety</label><textarea name="safety_notes" id="trk_de_safe_p" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Next steps</label><textarea name="next_steps" id="trk_de_next_p" class="fi" rows="2" maxlength="3000"></textarea></div>
        <div><label class="fl">Status</label>
          <select name="status" id="trk_de_stat_p" 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>
@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();
  });
  function fillDiary(row){
    var f = document.getElementById('trk_diary_edit_form_p');
    f.action = TRK_BASE + '/site-updates/' + row.id;
    document.getElementById('trk_de_work_p').value = row.work_completed || '';
    document.getElementById('trk_de_lab_p').value = row.labour_count ?? 0;
    document.getElementById('trk_de_prog_p').value = row.progress_percentage ?? '';
    document.getElementById('trk_de_wx_p').value = row.weather_condition || '';
    document.getElementById('trk_de_site_p').value = row.site_condition || '';
    document.getElementById('trk_de_mat_p').value = row.materials_used || '';
    document.getElementById('trk_de_eq_p').value = row.equipment_used || '';
    document.getElementById('trk_de_iss_p').value = row.issues_noted || '';
    document.getElementById('trk_de_del_p').value = row.delays_noted || '';
    document.getElementById('trk_de_safe_p').value = row.safety_notes || '';
    document.getElementById('trk_de_next_p').value = row.next_steps || '';
    document.getElementById('trk_de_stat_p').value = row.status || 'Submitted';
    document.getElementById('trk_diary_edit').classList.add('open');
  }
  document.querySelectorAll('.trk-diary-edit-btn-p').forEach(function(btn){
    btn.addEventListener('click', function(){ try { fillDiary(JSON.parse(btn.getAttribute('data-diary'))); } catch(e) {} });
  });
  document.querySelectorAll('.trk-resolve-btn-p').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = btn.getAttribute('data-issue-id');
      var f = document.getElementById('trk_resolve_form');
      f.action = TRK_BASE + '/tracking/issues/' + id + '/resolve';
      document.getElementById('trk_resolve_title').textContent = btn.getAttribute('data-issue-title') || '';
      var ta = f.querySelector('[name=resolution_notes]');
      if(ta) ta.value = '';
      document.getElementById('trk_issue_resolve').classList.add('open');
    });
  });
})();
</script>
@endpush