@extends('layouts.app')

@section('title', 'Sales Order')

@section('breadcrumb')
    <span>Penjualan</span>
    <i class="bi bi-chevron-right"></i>
    <span>Sales Order</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-cart-fill me-2 text-primary-pf"></i>Sales Order</h1>
        <p class="pf-page-subtitle">Kelola semua order penjualan dari pelanggan</p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{{ route('estimasi.create') }}" class="btn btn-outline-primary">
            <i class="bi bi-calculator"></i> Buat Estimasi Dulu
        </a>
        <a href="{{ route('sales-orders.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> Buat Sales Order
        </a>
    </div>
</div>

{{-- ===== STAT MINI CARDS ===== --}}
<div class="row g-3 mb-4">
    @php
    $miniStats = [
        ['label'=>'Draft',   'val'=> $counts['draft']   ?? 5,  'color'=>'#6B7280','bg'=>'#F3F4F6','icon'=>'bi-file-earmark'],
        ['label'=>'Proses',  'val'=> $counts['proses']  ?? 24, 'color'=>'#1D4ED8','bg'=>'#DBEAFE','icon'=>'bi-kanban'],
        ['label'=>'Selesai', 'val'=> $counts['selesai'] ?? 98, 'color'=>'#059669','bg'=>'#D1FAE5','icon'=>'bi-check-circle-fill'],
        ['label'=>'Kirim',   'val'=> $counts['kirim']   ?? 12, 'color'=>'#7C3AED','bg'=>'#EDE9FE','icon'=>'bi-truck'],
        ['label'=>'Urgent',  'val'=> $counts['urgent']  ?? 3,  'color'=>'#DC2626','bg'=>'#FEE2E2','icon'=>'bi-exclamation-circle-fill'],
    ];
    @endphp
    @foreach($miniStats as $s)
    <div class="col-6 col-sm-4 col-md-2half col-xl">
        <div class="pf-card p-3 d-flex align-items-center gap-3"
             style="border-left:3px solid {{ $s['color'] }};cursor:pointer"
             onclick="filterStatus('{{ strtolower($s['label']) }}')">
            <div style="width:36px;height:36px;border-radius:8px;background:{{ $s['bg'] }};color:{{ $s['color'] }};display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0">
                <i class="{{ $s['icon'] }}"></i>
            </div>
            <div>
                <div style="font-family:var(--pf-font-mono);font-size:20px;font-weight:700;line-height:1;color:{{ $s['color'] }}">{{ $s['val'] }}</div>
                <div style="font-size:11px;color:var(--pf-text-muted);margin-top:2px">{{ $s['label'] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- ===== FILTER BAR ===== --}}
<div class="pf-card mb-3">
    <div class="pf-card-body py-3">
        <div class="row g-2 align-items-end">
            <div class="col-12 col-md-3">
                <label class="form-label mb-1" style="font-size:12px">Pelanggan</label>
                <select class="form-select form-select-sm" id="fPelanggan">
                    <option value="">Semua Pelanggan</option>
                    @foreach($pelanggan ?? [] as $p)
                        <option value="{{ $p->id }}">{{ $p->nama }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px">Status</label>
                <select class="form-select form-select-sm" id="fStatus">
                    <option value="">Semua Status</option>
                    <option value="draft">Draft</option>
                    <option value="pending">Pending</option>
                    <option value="proses">Proses</option>
                    <option value="selesai">Selesai</option>
                    <option value="kirim">Dikirim</option>
                    <option value="batal">Batal</option>
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px">Prioritas</label>
                <select class="form-select form-select-sm" id="fPrioritas">
                    <option value="">Semua</option>
                    <option value="normal">Normal</option>
                    <option value="urgent">Urgent</option>
                    <option value="express">Express</option>
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px">Dari Tanggal</label>
                <input type="date" class="form-control form-control-sm" id="fDateFrom">
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px">Sampai</label>
                <input type="date" class="form-control form-control-sm" id="fDateTo">
            </div>
            <div class="col-12 col-md-1 d-flex gap-1">
                <button class="btn btn-sm btn-primary w-100" onclick="applyFilter()">
                    <i class="bi bi-funnel-fill"></i>
                </button>
                <button class="btn btn-sm btn-outline-secondary" onclick="resetFilter()" title="Reset">
                    <i class="bi bi-x"></i>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ===== DATATABLE ===== --}}
<div class="pf-card">
    <div class="pf-card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tblSO" style="width:100%">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="checkAll" class="form-check-input"></th>
                        <th>No. Order</th>
                        <th>Pelanggan</th>
                        <th>Produk / Pekerjaan</th>
                        <th>Oplah</th>
                        <th>Grand Total</th>
                        <th>Tgl Order</th>
                        <th>Deadline</th>
                        <th>Prioritas</th>
                        <th>Status</th>
                        <th>Bayar</th>
                        <th style="width:120px">Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- Bulk Action Bar --}}
<div id="bulkBar" class="pf-bulk-bar" style="display:none">
    <span id="bulkCount">0 dipilih</span>
    <div class="d-flex gap-2">
        <button class="btn btn-sm btn-outline-primary" onclick="bulkExport()">
            <i class="bi bi-download"></i> Export
        </button>
        <button class="btn btn-sm btn-outline-warning" onclick="bulkUpdateStatus()">
            <i class="bi bi-arrow-repeat"></i> Update Status
        </button>
        <button class="btn btn-sm btn-outline-danger" onclick="bulkDelete()">
            <i class="bi bi-trash"></i> Hapus
        </button>
    </div>
</div>

@endsection

@push('styles')
<style>
.col-md-2half { flex: 0 0 auto; width: 20%; }
.pf-bulk-bar {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--pf-sidebar-bg); color: #fff;
    padding: 10px 20px; border-radius: 40px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    z-index: 1050; font-size: 13px; font-weight: 500;
    animation: slideUp .2s ease;
}
@keyframes slideUp { from { transform: translateX(-50%) translateY(20px); opacity:0; } }

.pf-badge-prioritas {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.prioritas-normal  { background: #F3F4F6; color: #4B5563; }
.prioritas-urgent  { background: #FEF3C7; color: #D97706; }
.prioritas-express { background: #FEE2E2; color: #DC2626; }
</style>
@endpush

@push('scripts')
<script>
let soTable;

$(document).ready(function() {
    soTable = $('#tblSO').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("sales-orders.datatable") }}',
            type: 'POST',
            data: function(d) {
                d._token  = '{{ csrf_token() }}';
                d.pelanggan_id = $('#fPelanggan').val();
                d.status       = $('#fStatus').val();
                d.prioritas    = $('#fPrioritas').val();
                d.date_from    = $('#fDateFrom').val();
                d.date_to      = $('#fDateTo').val();
            },
            error: function(xhr) {
                PF.error('Gagal memuat data: ' + xhr.statusText);
            }
        },
        columns: [
            {
                data: 'id', orderable: false, searchable: false,
                render: id => `<input type="checkbox" class="form-check-input row-check" value="${id}">`
            },
            {
                data: 'no_so',
                render: (v, _, r) => `<a href="/sales-orders/${r.id}" class="fw-500 text-primary font-mono">${v}</a>`
            },
            { data: 'pelanggan' },
            {
                data: 'nama_pekerjaan',
                render: (v, _, r) => `<div style="max-width:180px">
                    <div style="font-weight:500;font-size:13px">${v}</div>
                    <div style="font-size:11px;color:var(--pf-text-muted)">${r.jenis_produk ?? ''}</div>
                </div>`
            },
            { data: 'oplah', render: v => `<span class="font-mono">${parseInt(v).toLocaleString('id-ID')}</span>` },
            {
                data: 'grand_total',
                render: v => `<span class="font-mono fw-500">Rp ${parseInt(v).toLocaleString('id-ID')}</span>`
            },
            { data: 'tgl_order' },
            {
                data: 'tgl_deadline',
                render: (v, _, r) => {
                    const days = r.sisa_hari ?? 0;
                    const cls  = days < 0 ? 'text-danger' : days <= 3 ? 'text-warning' : '';
                    return `<div>${v}</div>
                            <div class="font-mono ${cls}" style="font-size:11px">
                                ${days < 0 ? `Terlambat ${Math.abs(days)}h` : `${days}h lagi`}
                            </div>`;
                }
            },
            {
                data: 'prioritas',
                render: v => `<span class="pf-badge-prioritas prioritas-${v}">${v.charAt(0).toUpperCase()+v.slice(1)}</span>`
            },
            {
                data: 'status',
                render: v => `<span class="pf-status pf-status-${v}">${v.charAt(0).toUpperCase()+v.slice(1)}</span>`
            },
            {
                data: 'status_bayar',
                render: v => {
                    const map = { belum:'pf-status-batal', dp:'pf-status-pending', lunas:'pf-status-selesai' };
                    const lbl = { belum:'Belum', dp:'DP', lunas:'Lunas' };
                    return `<span class="pf-status ${map[v]}">${lbl[v]}</span>`;
                }
            },
            {
                data: 'id', orderable: false, searchable: false,
                render: (id, _, r) => `
                    <div class="d-flex gap-1">
                        <a href="/sales-orders/${id}" class="btn btn-xs btn-outline-secondary" title="Detail">
                            <i class="bi bi-eye"></i>
                        </a>
                        <a href="/sales-orders/${id}/edit" class="btn btn-xs btn-outline-primary" title="Edit">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <div class="dropdown">
                            <button class="btn btn-xs btn-outline-secondary" data-bs-toggle="dropdown">
                                <i class="bi bi-three-dots"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="/sales-orders/${id}/print" target="_blank">
                                    <i class="bi bi-printer me-2"></i>Cetak SO</a></li>
                                <li><a class="dropdown-item" onclick="buatJobOrder(${id})">
                                    <i class="bi bi-kanban me-2"></i>Buat Job Order</a></li>
                                <li><a class="dropdown-item" href="/sales-orders/${id}/invoice">
                                    <i class="bi bi-receipt me-2"></i>Buat Invoice</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" onclick="PF.confirmDelete('/sales-orders/${id}', '${r.no_so}')">
                                    <i class="bi bi-trash me-2"></i>Hapus</a></li>
                            </ul>
                        </div>
                    </div>`
            },
        ],
        order: [[6, 'desc']],
        pageLength: 25,
        columnDefs: [{ className: 'align-middle', targets: '_all' }],
        drawCallback: function() {
            // Re-init tooltips after draw
            document.querySelectorAll('[data-bs-toggle="tooltip"]')
                .forEach(el => new bootstrap.Tooltip(el));
        }
    });

    // Checkbox all
    $('#checkAll').on('change', function() {
        $('.row-check').prop('checked', this.checked);
        updateBulkBar();
    });

    $(document).on('change', '.row-check', updateBulkBar);
});

function applyFilter() { soTable.ajax.reload(); }
function resetFilter() {
    $('#fPelanggan, #fStatus, #fPrioritas').val('');
    $('#fDateFrom, #fDateTo').val('');
    soTable.ajax.reload();
}

function filterStatus(status) {
    $('#fStatus').val(status);
    applyFilter();
}

function updateBulkBar() {
    const n = $('.row-check:checked').length;
    if (n > 0) {
        $('#bulkCount').text(n + ' dipilih');
        $('#bulkBar').show();
    } else {
        $('#bulkBar').hide();
    }
}

function buatJobOrder(soId) {
    Swal.fire({
        title: 'Buat Job Order?',
        text: 'Job Order produksi akan dibuat dari Sales Order ini.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#1B4FD8',
        confirmButtonText: '<i class="bi bi-kanban me-1"></i> Buat JO',
        cancelButtonText: 'Batal'
    }).then(r => {
        if (r.isConfirmed) window.location.href = `/job-orders/create?so_id=${soId}`;
    });
}

function bulkDelete() {
    const ids = $('.row-check:checked').map((_, el) => el.value).get();
    Swal.fire({
        title: `Hapus ${ids.length} Sales Order?`,
        text: 'Data yang dihapus tidak dapat dikembalikan.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#DC2626',
        confirmButtonText: 'Hapus Semua'
    }).then(r => {
        if (r.isConfirmed) {
            $.post('/sales-orders/bulk-delete', {
                _token: '{{ csrf_token() }}',
                ids: ids
            }, () => {
                PF.success('Data berhasil dihapus');
                soTable.ajax.reload();
                $('#bulkBar').hide();
            });
        }
    });
}
function bulkExport() {
    const ids = $('.row-check:checked').map((_, el) => el.value).get();
    window.location.href = `/sales-orders/export?ids=${ids.join(',')}`;
}
</script>
@endpush