@extends('layouts.app')

@section('title', 'Monitoring Produksi')

@section('breadcrumb')
    <span>Produksi</span>
    <i class="bi bi-chevron-right"></i>
    <span>Monitoring Job Order</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 semua job order produksi secara real-time</p>
    </div>
    <div class="d-flex gap-2">
        {{-- View Toggle --}}
        <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="refreshBoard()" id="btnRefresh">
            <i class="bi bi-arrow-clockwise"></i>
        </button>
    </div>
</div>

{{-- Live Stats Row --}}
<div class="row g-3 mb-4" id="liveStats">
    @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 Check',  '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:20px;color:{{ $s['color'] }};margin-bottom:6px"><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:11.5px;color:var(--pf-text-muted);margin-top:2px">{{ $s['label'] }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- ===== KANBAN VIEW ===== --}}
<div id="viewKanban">
    <div class="pf-kanban-board">
        @foreach($stages as $s)
        <div class="pf-kanban-col" id="col-{{ $s['key'] }}"
             ondragover="event.preventDefault()" ondrop="dropCard(event,'{{ $s['key'] }}')">

            {{-- Column Header --}}
            <div class="pf-kanban-header" style="border-top:3px solid {{ $s['color'] }}">
                <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>

            {{-- Cards --}}
            <div class="pf-kanban-cards" id="cards-{{ $s['key'] }}">
                @foreach($jobOrders->where('status', $s['key']) as $jo)
                    @include('modules.job-order.partials.kanban-card', ['jo' => $jo])
                @endforeach

                @if($jobOrders->where('status', $s['key'])->isEmpty())
                <div class="pf-kanban-empty">
                    <i class="bi bi-inbox" style="font-size:24px;opacity:.3"></i>
                    <div style="font-size:12px;opacity:.4;margin-top:4px">Tidak ada pekerjaan</div>
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
</div>

{{-- ===== TABLE VIEW ===== --}}
<div id="viewTable" style="display:none">
    <div class="pf-card">
        <div class="pf-card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="tblJO" style="width:100%">
                    <thead>
                        <tr>
                            <th>No. JO</th>
                            <th>Sales Order</th>
                            <th>Pekerjaan</th>
                            <th>Oplah</th>
                            <th>Progress</th>
                            <th>Mesin / Operator</th>
                            <th>Deadline</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($jobOrders as $jo)
                        <tr>
                            <td>
                                <a href="{{ route('job-orders.show', $jo->id) }}" class="font-mono text-primary fw-500">
                                    {{ $jo->no_jo }}
                                </a>
                            </td>
                            <td><a href="{{ route('sales-orders.show', $jo->so_id) }}" class="text-muted font-mono" style="font-size:12px">
                                {{ $jo->salesOrder->no_so ?? '-' }}</a>
                            </td>
                            <td>
                                <div style="max-width:160px;font-weight:500;font-size:13px">{{ $jo->nama_pekerjaan }}</div>
                            </td>
                            <td>
                                <div class="font-mono">{{ number_format($jo->oplah_target) }}</div>
                                <div style="font-size:11px;color:var(--pf-text-muted)">
                                    OK: {{ number_format($jo->oplah_ok) }}
                                    | Reject: <span class="text-danger">{{ number_format($jo->oplah_reject) }}</span>
                                </div>
                            </td>
                            <td style="min-width:120px">
                                @php
                                    $pct = $jo->oplah_target > 0 ? round($jo->oplah_ok / $jo->oplah_target * 100) : 0;
                                    $barColor = $pct >= 100 ? '#059669' : ($pct >= 60 ? '#1D4ED8' : '#D97706');
                                @endphp
                                <div style="font-size:12px;font-weight:600;margin-bottom:3px;color:{{ $barColor }}">
                                    {{ $pct }}%
                                </div>
                                <div style="height:6px;background:var(--pf-border);border-radius:3px;overflow:hidden">
                                    <div style="width:{{ $pct }}%;height:100%;background:{{ $barColor }};transition:width .5s"></div>
                                </div>
                            </td>
                            <td>
                                <div style="font-size:12.5px">{{ $jo->mesin->nama ?? '-' }}</div>
                                <div style="font-size:11.5px;color:var(--pf-text-muted)">{{ $jo->operator->name ?? '-' }}</div>
                            </td>
                            <td>
                                @php
                                    $deadline = $jo->tgl_selesai_target;
                                    $diff = now()->diffInDays($deadline, false);
                                    $cls = $diff < 0 ? 'text-danger' : ($diff <= 2 ? 'text-warning' : '');
                                @endphp
                                <div style="font-size:12.5px">{{ $deadline?->format('d/m/Y') }}</div>
                                <div class="font-mono {{ $cls }}" style="font-size:11px">
                                    {{ $diff < 0 ? 'Terlambat '.abs($diff).'h' : $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>
</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">
                <form id="formProgress">
                    @csrf
                    <input type="hidden" id="progJoId">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Status Produksi</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 (lbr)</label>
                            <input type="number" class="form-control font-mono" id="progOplahCetak" min="0" placeholder="0">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Oplah OK (lbr)</label>
                            <input type="number" class="form-control font-mono" id="progOplahOk" min="0" placeholder="0">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Reject</label>
                            <input type="number" class="form-control font-mono" id="progOplahReject" min="0" placeholder="0">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Mesin</label>
                            <select class="form-select" id="progMesin">
                                @foreach($mesin ?? [] as $m)
                                    <option value="{{ $m->id }}">{{ $m->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Catatan Produksi</label>
                            <textarea class="form-control" id="progCatatan" rows="2" placeholder="Kendala, informasi tambahan..."></textarea>
                        </div>
                    </div>
                </form>
            </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: 14px;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: 60vh;
}

@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); } }
@media (max-width: 480px)  { .pf-kanban-board { grid-template-columns: 1fr; } }

.pf-kanban-col {
    background: var(--pf-bg);
    border-radius: var(--pf-radius-lg);
    border: 1px solid var(--pf-border);
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.pf-kanban-col.drag-over {
    border-color: var(--pf-primary);
    background: var(--pf-primary-light);
}

.pf-kanban-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 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;
}

.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: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 65vh;
}

.pf-kanban-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; padding: 24px 0;
    color: var(--pf-text-muted);
}

.pf-jo-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: grab;
    transition: all .18s ease;
    position: relative;
}

.pf-jo-card:hover {
    border-color: var(--pf-primary);
    box-shadow: var(--pf-shadow);
    transform: translateY(-1px);
}

.pf-jo-card.dragging {
    opacity: .5;
    cursor: grabbing;
}

.pf-jo-card-no {
    font-size: 11px; font-family: var(--pf-font-mono);
    color: var(--pf-primary); font-weight: 600; margin-bottom: 4px;
}

.pf-jo-card-title {
    font-size: 12.5px; font-weight: 500;
    margin-bottom: 8px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

.pf-jo-card-meta {
    font-size: 11px; color: var(--pf-text-muted);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.pf-jo-progress {
    height: 4px; background: var(--pf-border); border-radius: 2px;
    overflow: hidden; margin: 8px 0;
}

.pf-jo-progress-bar {
    height: 100%; border-radius: 2px; transition: width .4s ease;
}

.pf-jo-card-urgent {
    position: absolute; top: 10px; right: 10px;
    font-size: 10px; background: #FEE2E2; color: #DC2626;
    padding: 1px 6px; border-radius: 4px; font-weight: 600;
}

.btn-xs { padding: 3px 7px; font-size: 12px; }
</style>
@endpush

@push('scripts')
<script>
// ─── View Switcher ───
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 Kanban ───
let draggedCard = null;

document.addEventListener('dragstart', e => {
    if (e.target.classList.contains('pf-jo-card')) {
        draggedCard = e.target;
        e.target.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
    }
});

document.addEventListener('dragend', e => {
    if (e.target.classList.contains('pf-jo-card')) {
        e.target.classList.remove('dragging');
    }
    document.querySelectorAll('.pf-kanban-col').forEach(col => col.classList.remove('drag-over'));
});

document.querySelectorAll('.pf-kanban-col').forEach(col => {
    col.addEventListener('dragover', e => {
        e.preventDefault();
        col.classList.add('drag-over');
    });
    col.addEventListener('dragleave', () => col.classList.remove('drag-over'));
});

function dropCard(event, newStatus) {
    event.preventDefault();
    if (!draggedCard) return;

    const joId = draggedCard.dataset.joId;
    const oldStatus = draggedCard.dataset.status;

    if (oldStatus === newStatus) return;

    // Optimistic UI
    document.getElementById(`cards-${newStatus}`).appendChild(draggedCard);
    draggedCard.dataset.status = newStatus;
    updateBadgeCounts();

    // AJAX update
    fetch(`/job-orders/${joId}/update-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 => {
        if (d.success) {
            PF.toast('success', `Status diubah ke ${newStatus}`);
            document.getElementById(`stat-${newStatus}`).textContent = d.counts[newStatus] || 0;
            document.getElementById(`stat-${oldStatus}`).textContent = d.counts[oldStatus] || 0;
        } else {
            PF.error('Gagal mengubah status');
        }
    })
    .catch(() => PF.error('Koneksi gagal'));
}

function updateBadgeCounts() {
    ['antri','prepress','cetak','finishing','qc','selesai'].forEach(s => {
        const n = document.querySelectorAll(`#cards-${s} .pf-jo-card`).length;
        document.getElementById(`badge-${s}`).textContent = n;
    });
}

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

function submitProgress() {
    const joId = document.getElementById('progJoId').value;
    const data = {
        status:        document.getElementById('progStatus').value,
        oplah_cetak:   document.getElementById('progOplahCetak').value,
        oplah_ok:      document.getElementById('progOplahOk').value,
        oplah_reject:  document.getElementById('progOplahReject').value,
        mesin_id:      document.getElementById('progMesin').value,
        catatan_produksi: document.getElementById('progCatatan').value,
    };

    PF.loading('Menyimpan progress...');

    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(data)
    })
    .then(r => r.json())
    .then(d => {
        PF.closeLoading();
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalProgress')).hide();
            PF.success('Progress berhasil disimpan');
            setTimeout(() => location.reload(), 1000);
        } else {
            PF.error(d.message || 'Gagal menyimpan');
        }
    })
    .catch(() => { PF.closeLoading(); PF.error('Koneksi gagal'); });
}

// ─── Auto Refresh (30 detik) ───
let autoRefreshTimer;
function startAutoRefresh() {
    autoRefreshTimer = setInterval(() => {
        fetch('/api/job-orders/counts')
            .then(r => r.json())
            .then(d => {
                Object.entries(d).forEach(([k, v]) => {
                    const el = document.getElementById(`stat-${k}`);
                    const badge = document.getElementById(`badge-${k}`);
                    if (el) el.textContent = v;
                    if (badge) badge.textContent = v;
                });
            });
    }, 30000);
}

function refreshBoard() {
    const btn = document.getElementById('btnRefresh');
    btn.querySelector('i').classList.add('spin');
    setTimeout(() => {
        location.reload();
    }, 300);
}

startAutoRefresh();

// ─── DataTable for table view ───
$(document).ready(function() {
    $('#tblJO').DataTable({
        paging: true,
        pageLength: 20,
        order: [[6, 'asc']], // Sort by deadline
        language: { url: '' }
    });
});
</script>

<style>
.spin { animation: spin .6s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>
@endpush