@extends('layouts.app')
@section('title','Monitoring Produksi')
@section('breadcrumb')<span>Produksi</span><i class="bi bi-chevron-right"></i><span>Monitoring</span>@endsection

@section('content')
<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-kanban-fill me-2 text-primary-pf"></i>Monitoring Produksi</h1>
        <p class="pf-page-subtitle">Pantau status job order secara real-time — drag & drop untuk update status</p>
    </div>
    <div class="d-flex gap-2">
        <div class="btn-group">
            <button class="btn btn-sm btn-primary active" id="btnKanban" onclick="switchView('kanban')"><i class="bi bi-kanban"></i> Kanban</button>
            <button class="btn btn-sm btn-outline-secondary" id="btnTable" onclick="switchView('table')"><i class="bi bi-table"></i> Tabel</button>
        </div>
        <a href="{{ route('job-orders.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Job Order Baru</a>
        <button class="btn btn-sm btn-outline-secondary" onclick="location.reload()"><i class="bi bi-arrow-clockwise"></i></button>
    </div>
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    @php
    $stages = [
        ['key'=>'antri',    'label'=>'Antrian',  'icon'=>'bi-hourglass-split',    'color'=>'#6B7280','bg'=>'#F3F4F6'],
        ['key'=>'prepress', 'label'=>'Prepress',  'icon'=>'bi-file-earmark-image', 'color'=>'#7C3AED','bg'=>'#EDE9FE'],
        ['key'=>'cetak',    'label'=>'Cetak',     'icon'=>'bi-printer-fill',       'color'=>'#1D4ED8','bg'=>'#DBEAFE'],
        ['key'=>'finishing','label'=>'Finishing', 'icon'=>'bi-scissors',           'color'=>'#D97706','bg'=>'#FEF3C7'],
        ['key'=>'qc',       'label'=>'QC',        'icon'=>'bi-patch-check-fill',   'color'=>'#059669','bg'=>'#D1FAE5'],
        ['key'=>'selesai',  'label'=>'Selesai',   'icon'=>'bi-check2-all',         'color'=>'#059669','bg'=>'#D1FAE5'],
    ];
    @endphp
    @foreach($stages as $s)
    <div class="col-6 col-sm-4 col-xl-2">
        <div class="pf-card p-3 text-center" style="border-top:3px solid {{ $s['color'] }}">
            <div style="font-size:18px;color:{{ $s['color'] }};margin-bottom:4px"><i class="{{ $s['icon'] }}"></i></div>
            <div class="font-mono" style="font-size:22px;font-weight:700;color:{{ $s['color'] }}" id="stat-{{ $s['key'] }}">{{ $stats[$s['key']] ?? 0 }}</div>
            <div style="font-size:11px;color:var(--pf-text-muted)">{{ $s['label'] }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Kanban --}}
<div id="viewKanban">
    <div class="pf-kanban-board">
        @foreach($stages as $s)
        <div class="pf-kanban-col" id="col-{{ $s['key'] }}"
             style="border-top:3px solid {{ $s['color'] }}"
             ondragover="event.preventDefault();this.classList.add('drag-over')"
             ondragleave="this.classList.remove('drag-over')"
             ondrop="dropCard(event,'{{ $s['key'] }}')">
            <div class="pf-kanban-header">
                <div class="d-flex align-items-center gap-2">
                    <i class="{{ $s['icon'] }}" style="color:{{ $s['color'] }}"></i>
                    <span style="font-weight:600;font-size:13px">{{ $s['label'] }}</span>
                </div>
                <span class="pf-kanban-count" style="background:{{ $s['bg'] }};color:{{ $s['color'] }}" id="badge-{{ $s['key'] }}">{{ $stats[$s['key']] ?? 0 }}</span>
            </div>
            <div class="pf-kanban-cards" id="cards-{{ $s['key'] }}">
                @forelse($jobOrders->where('status', $s['key']) as $jo)
                @php
                    $pct  = $jo->oplah_target > 0 ? round($jo->oplah_ok / $jo->oplah_target * 100) : 0;
                    $diff = now()->diffInDays($jo->tgl_selesai_target, false);
                    $late = $diff < 0;
                    $barC = $pct >= 100 ? '#059669' : ($pct >= 60 ? '#1D4ED8' : '#D97706');
                @endphp
                <div class="pf-jo-card"
                     data-jo-id="{{ $jo->id }}" data-status="{{ $jo->status }}"
                     draggable="true"
                     onclick="window.location.href='/job-orders/{{ $jo->id }}'">
                    <div style="font-size:11px;font-family:var(--pf-font-mono);color:var(--pf-primary);font-weight:600;margin-bottom:4px">{{ $jo->no_jo }}</div>
                    <div style="font-size:12.5px;font-weight:500;margin-bottom:8px;line-height:1.35">{{ Str::limit($jo->nama_pekerjaan, 55) }}</div>
                    @if($jo->oplah_cetak > 0)
                    <div style="height:4px;background:var(--pf-border);border-radius:2px;overflow:hidden;margin-bottom:4px">
                        <div style="width:{{ min($pct,100) }}%;height:100%;background:{{ $barC }};border-radius:2px"></div>
                    </div>
                    <div style="font-size:10.5px;color:var(--pf-text-muted);margin-bottom:6px">
                        {{ $pct }}% · {{ number_format($jo->oplah_ok) }}/{{ number_format($jo->oplah_target) }} lbr
                        @if($jo->oplah_reject > 0) <span class="text-danger">· Reject: {{ number_format($jo->oplah_reject) }}</span> @endif
                    </div>
                    @endif
                    <div class="d-flex align-items-center justify-content-between">
                        <span style="font-size:11px;color:{{ $late ? '#DC2626' : ($diff <= 2 ? '#D97706' : 'var(--pf-text-muted)') }}">
                            <i class="bi bi-calendar3 me-1"></i>{{ $jo->tgl_selesai_target?->format('d/m/Y') }}
                            @if($late) <span class="fw-600">(Terlambat)</span> @elseif($diff <= 2) <span>({{ $diff }}h lagi)</span> @endif
                        </span>
                        <div onclick="event.stopPropagation()">
                            <button class="btn btn-xs btn-outline-success" onclick="updateProgress({{ $jo->id }})"><i class="bi bi-graph-up"></i></button>
                        </div>
                    </div>
                    @if($jo->salesOrder)
                    <div style="margin-top:8px;padding-top:6px;border-top:1px dashed var(--pf-border);font-size:10.5px;color:var(--pf-text-muted)">
                        <i class="bi bi-cart me-1"></i>{{ $jo->salesOrder->no_so }}
                        @if($jo->salesOrder->pelanggan) · {{ Str::limit($jo->salesOrder->pelanggan->nama, 20) }} @endif
                    </div>
                    @endif
                </div>
                @empty
                <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:24px 0;opacity:.35">
                    <i class="bi bi-inbox" style="font-size:24px"></i>
                    <div style="font-size:11px;margin-top:4px">Tidak ada pekerjaan</div>
                </div>
                @endforelse
            </div>
        </div>
        @endforeach
    </div>
</div>

{{-- Table View --}}
<div id="viewTable" style="display:none">
    <div class="pf-card">
        <div class="pf-card-body p-0">
            <table class="table table-hover mb-0" id="tblJO" style="width:100%">
                <thead><tr><th>No. JO</th><th>SO</th><th>Pekerjaan</th><th>Oplah</th><th>Progress</th><th>Operator / Mesin</th><th>Deadline</th><th>Status</th><th>Aksi</th></tr></thead>
                <tbody>
                    @foreach($jobOrders as $jo)
                    @php $pct=$jo->oplah_target>0?round($jo->oplah_ok/$jo->oplah_target*100):0; $diff=now()->diffInDays($jo->tgl_selesai_target,false); @endphp
                    <tr>
                        <td><a href="{{ route('job-orders.show',$jo->id) }}" class="font-mono text-primary fw-500">{{ $jo->no_jo }}</a></td>
                        <td class="font-mono" style="font-size:12px;color:var(--pf-text-muted)">{{ $jo->salesOrder?->no_so??'-' }}</td>
                        <td style="font-size:13px;font-weight:500;max-width:160px">{{ Str::limit($jo->nama_pekerjaan,40) }}</td>
                        <td><div class="font-mono">{{ number_format($jo->oplah_target) }}</div><div style="font-size:11px;color:var(--pf-text-muted)">OK: <span class="text-success">{{ number_format($jo->oplah_ok) }}</span> | Reject: <span class="text-danger">{{ number_format($jo->oplah_reject) }}</span></div></td>
                        <td style="min-width:100px"><div style="font-size:12px;font-weight:600;color:{{ $pct>=100?'#059669':($pct>=60?'#1D4ED8':'#D97706') }}">{{ $pct }}%</div><div style="height:4px;background:var(--pf-border);border-radius:2px;overflow:hidden;margin-top:2px"><div style="width:{{ min($pct,100) }}%;height:100%;background:{{ $pct>=100?'#059669':($pct>=60?'#1D4ED8':'#D97706') }}"></div></div></td>
                        <td style="font-size:12.5px">{{ $jo->operator?->name??'-' }}<div style="font-size:11px;color:var(--pf-text-muted)">{{ $jo->mesin?->nama??'-' }}</div></td>
                        <td><div style="font-size:12.5px;{{ $diff<0?'color:#DC2626;font-weight:600':($diff<=2?'color:#D97706':'') }}">{{ $jo->tgl_selesai_target?->format('d/m/Y') }}</div><div style="font-size:11px;color:var(--pf-text-muted)">{{ $diff<0?abs((int)$diff).'h terlambat':(int)$diff.'h lagi' }}</div></td>
                        <td><span class="pf-status pf-status-{{ $jo->status }}">{{ ucfirst($jo->status) }}</span></td>
                        <td><div class="d-flex gap-1"><a href="{{ route('job-orders.show',$jo->id) }}" class="btn btn-xs btn-outline-secondary"><i class="bi bi-eye"></i></a><a href="{{ route('job-orders.edit',$jo->id) }}" class="btn btn-xs btn-outline-primary"><i class="bi bi-pencil"></i></a><button class="btn btn-xs btn-outline-success" onclick="updateProgress({{ $jo->id }})"><i class="bi bi-graph-up"></i></button></div></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal Update Progress --}}
<div class="modal fade" id="modalProgress" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:var(--pf-radius-lg);border:1px solid var(--pf-border)">
            <div class="modal-header" style="border-bottom:1px solid var(--pf-border)">
                <h5 class="modal-title"><i class="bi bi-graph-up me-2 text-primary"></i>Update Progress Produksi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="progJoId">
                <div class="row g-3">
                    <div class="col-12"><label class="form-label">Status</label><select class="form-select" id="progStatus"><option value="antri">Antrian</option><option value="prepress">Prepress</option><option value="cetak">Sedang Cetak</option><option value="finishing">Finishing</option><option value="qc">QC Checking</option><option value="selesai">Selesai</option></select></div>
                    <div class="col-6"><label class="form-label">Oplah Cetak</label><input type="number" class="form-control font-mono" id="progCetak" min="0" placeholder="0"></div>
                    <div class="col-6"><label class="form-label">Oplah OK</label><input type="number" class="form-control font-mono" id="progOK" min="0" placeholder="0"></div>
                    <div class="col-6"><label class="form-label">Reject</label><input type="number" class="form-control font-mono" id="progReject" min="0" placeholder="0"></div>
                    <div class="col-6"><label class="form-label">Mesin</label>
                        <select class="form-select" id="progMesin">
                            <option value="">— Pilih —</option>
                            @foreach($mesin ?? [] as $m)<option value="{{ $m->id }}">{{ $m->nama }}</option>@endforeach
                        </select>
                    </div>
                    <div class="col-12"><label class="form-label">Catatan</label><textarea class="form-control" id="progCatatan" rows="2" placeholder="Kendala, informasi tambahan..."></textarea></div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:1px solid var(--pf-border)">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" onclick="submitProgress()"><i class="bi bi-save2-fill"></i> Simpan Progress</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.pf-kanban-board { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; overflow-x:auto; padding-bottom:12px; min-height:55vh; }
@media(max-width:1399px){.pf-kanban-board{grid-template-columns:repeat(3,1fr);}}
@media(max-width:767px){.pf-kanban-board{grid-template-columns:repeat(2,1fr);}}
.pf-kanban-col { background:var(--pf-bg); border-radius:var(--pf-radius-lg); border:1px solid var(--pf-border); display:flex; flex-direction:column; transition:.2s; }
.pf-kanban-col.drag-over { border-color:var(--pf-primary); background:var(--pf-primary-light); }
.pf-kanban-header { padding:10px 14px; border-bottom:1px solid var(--pf-border); background:var(--pf-surface); border-radius:calc(var(--pf-radius-lg) - 1px) calc(var(--pf-radius-lg) - 1px) 0 0; display:flex; align-items:center; justify-content:space-between; }
.pf-kanban-count { font-size:11px; font-weight:700; font-family:var(--pf-font-mono); padding:2px 8px; border-radius:20px; }
.pf-kanban-cards { padding:8px; flex:1; display:flex; flex-direction:column; gap:8px; overflow-y:auto; max-height:60vh; }
.pf-jo-card { background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:10px; padding:12px 14px; cursor:grab; transition:all .18s; }
.pf-jo-card:hover { border-color:var(--pf-primary); box-shadow:var(--pf-shadow); transform:translateY(-1px); }
.pf-jo-card.dragging { opacity:.4; cursor:grabbing; }
.btn-xs { padding:3px 7px; font-size:12px; }
</style>
@endpush

@push('scripts')
<script>
function switchView(v) {
    document.getElementById('viewKanban').style.display = v === 'kanban' ? '' : 'none';
    document.getElementById('viewTable').style.display  = v === 'table'  ? '' : 'none';
    document.getElementById('btnKanban').className = v === 'kanban' ? 'btn btn-sm btn-primary active' : 'btn btn-sm btn-outline-secondary';
    document.getElementById('btnTable').className  = v === 'table'  ? 'btn btn-sm btn-primary active' : 'btn btn-sm btn-outline-secondary';
}

// Drag & Drop
let dragged = null;
document.addEventListener('dragstart', e => {
    if (e.target.classList.contains('pf-jo-card')) { dragged = e.target; e.target.classList.add('dragging'); }
});
document.addEventListener('dragend', e => {
    if (e.target.classList.contains('pf-jo-card')) e.target.classList.remove('dragging');
    document.querySelectorAll('.pf-kanban-col').forEach(c => c.classList.remove('drag-over'));
});

function dropCard(event, newStatus) {
    event.preventDefault();
    event.currentTarget.classList.remove('drag-over');
    if (!dragged) return;
    const joId = dragged.dataset.joId, old = dragged.dataset.status;
    if (old === newStatus) return;
    document.getElementById('cards-' + newStatus).appendChild(dragged);
    dragged.dataset.status = newStatus;
    // Update badge counts
    ['antri','prepress','cetak','finishing','qc','selesai'].forEach(s => {
        const n = document.querySelectorAll('#cards-'+s+' .pf-jo-card').length;
        document.getElementById('badge-'+s).textContent = n;
        document.getElementById('stat-'+s).textContent  = n;
    });
    fetch(`/job-orders/${joId}/status`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({ status: newStatus })
    }).then(r => r.json()).then(d => { d.success ? PF.toast('success', `Status → ${newStatus}`) : PF.error(d.message); });
}

function updateProgress(joId) {
    document.getElementById('progJoId').value = joId;
    new bootstrap.Modal(document.getElementById('modalProgress')).show();
}

function submitProgress() {
    const joId = document.getElementById('progJoId').value;
    PF.loading('Menyimpan...');
    fetch(`/job-orders/${joId}/progress`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({
            status: document.getElementById('progStatus').value,
            oplah_cetak: document.getElementById('progCetak').value,
            oplah_ok: document.getElementById('progOK').value,
            oplah_reject: document.getElementById('progReject').value,
            mesin_id: document.getElementById('progMesin').value,
            catatan_produksi: document.getElementById('progCatatan').value
        })
    }).then(r => r.json()).then(d => {
        PF.closeLoading();
        if (d.success) { bootstrap.Modal.getInstance(document.getElementById('modalProgress')).hide(); PF.success('Progress disimpan'); setTimeout(() => location.reload(), 1000); }
        else PF.error(d.message || 'Gagal');
    }).catch(() => { PF.closeLoading(); PF.error('Koneksi gagal'); });
}

$(document).ready(() => { $('#tblJO').DataTable({ pageLength: 25, order: [[6,'asc']] }); });
setInterval(() => {
    fetch('/api/job-orders/counts').then(r => r.json()).then(d => {
        Object.entries(d).forEach(([k,v]) => {
            document.getElementById('stat-'+k) && (document.getElementById('stat-'+k).textContent = v);
        });
    });
}, 30000);
</script>
@endpush