@extends('layouts.fleet')

@section('title', 'Offline Notes')

@push('scripts')
@vite(['resources/js/fleet/notes.js'])
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <div>
        <div class="h5 text-heading mb-0">Offline Notes</div>
        <div class="text-navy-300 small">{{ $mission->name }}</div>
    </div>
    <a href="{{ route('fleet.dashboard') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i> Back</a>
</div>

<div class="fleet-big-card mb-3">
    <form id="offlineNoteForm" data-mission-id="{{ $mission->id }}">
        <div class="mb-3">
            <label class="form-label small text-navy-300">Note</label>
            <textarea name="note_text" rows="4" class="form-control" placeholder="Observation, remark, or log entry..."></textarea>
        </div>
        <div class="mb-3">
            <label class="form-label small text-navy-300">Attach Photo (optional)</label>
            <input type="file" name="image" accept="image/*" capture="environment" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary"><i class="bi bi-journal-plus"></i> Save Note</button>
        <span id="noteSaveStatus" class="small text-navy-300 ms-2"></span>
    </form>
</div>

<div class="fleet-big-card">
    <div class="fw-semibold text-heading small mb-2">Pending Sync</div>
    <ul class="list-group list-group-flush" id="pendingNotesList"></ul>
</div>
@endsection