@extends('layouts.adminlte')

@section('title', 'REPORT QUOTATION VS ACTUAL COST')
@section('page_title', 'REPORT QUOTATION VS ACTUAL COST')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Quotation vs Actual Cost per Project</h3>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ route('master_project.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-diagram-project me-1"></i>Master Project
                </a>
                <button class="btn btn-outline-success btn-sm" id="btnExportXlsx">
                    <i class="fas fa-file-excel me-1"></i>Export XLSX
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-2 align-items-end mb-3">
                <div class="col-md-3">
                    <label class="form-label">PO Date From (optional)</label>
                    <input type="date" class="form-control" id="dateFrom" />
                </div>
                <div class="col-md-3">
                    <label class="form-label">PO Date To (optional)</label>
                    <input type="date" class="form-control" id="dateTo" />
                </div>
                <div class="col-md-3">
                    <label class="form-label">Project</label>
                    <input type="text" class="form-control" id="searchProject" placeholder="kode / nama project / client" />
                </div>
                <div class="col-md-3 d-flex gap-2">
                    <div class="form-check form-switch mt-4">
                        <input class="form-check-input" type="checkbox" role="switch" id="onlyActive" checked>
                        <label class="form-check-label" for="onlyActive">Only Active</label>
                    </div>
                    <button class="btn btn-primary mt-4" id="btnLoad">Tampilkan</button>
                </div>
            </div>

            <div class="small text-muted mb-2">
                Actual Cost dihitung dari total PO status <code>approved</code>/<code>closed</code>.
                Kolom PO Barang/Jasa dipisah.
            </div>

            <div class="table-responsive">
                <table id="reportTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>Project</th>
                        <th>Client</th>
                        <th>No WO</th>
                        <th>WO Amount</th>
                        <th>Quotation</th>
                        <th>Quotation Total</th>
                        <th>Actual PO Barang</th>
                        <th>Actual PO Jasa</th>
                        <th>Actual Total</th>
                        <th>Variance</th>
                        <th>Detail</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const fmtRp = (n) => Number(n || 0).toLocaleString('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 2 });
            const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (m) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m]));

            const table = $('#reportTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (r) => `<div class="fw-semibold">${esc(r.project_code || '')}</div><div class="small text-muted">${esc(r.project_name || '')}</div>` },
                    { data: 'client_name', render: (v) => v || '-' },
                    { data: 'no_wo', render: (v) => v || '-' },
                    { data: 'wo_amount', render: (v) => fmtRp(v || 0) },
                    { data: null, render: (r) => r.quotation_number ? `${esc(r.quotation_number)} <span class="badge text-bg-secondary ms-1">${esc(r.quotation_status || '')}</span>` : '-' },
                    { data: 'quotation_total', render: (v) => fmtRp(v || 0) },
                    { data: 'actual_po_barang', render: (v) => fmtRp(v || 0) },
                    { data: 'actual_po_jasa', render: (v) => fmtRp(v || 0) },
                    { data: 'actual_total', render: (v) => fmtRp(v || 0) },
                    { data: 'variance', render: (v) => `<span class="${Number(v||0) < 0 ? 'text-danger fw-semibold' : 'text-success fw-semibold'}">${fmtRp(v || 0)}</span>` },
                    { data: null, orderable: false, render: (r) => `<a class="btn btn-sm btn-outline-primary" href="{{ url('/project-cost-report') }}/${r.project_id}">Detail</a>` },
                ]
            });

            let rowsCache = [];
            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                const q = ($('#searchProject').val() || '').toString().trim().toLowerCase();
                if (!q) return true;
                const r = rowsCache[dataIndex] || {};
                const hay = `${r.project_code||''} ${r.project_name||''} ${r.client_name||''}`.toLowerCase();
                return hay.includes(q);
            });

            const buildParams = () => {
                const p = new URLSearchParams();
                if ($('#dateFrom').val()) p.set('date_from', $('#dateFrom').val());
                if ($('#dateTo').val()) p.set('date_to', $('#dateTo').val());
                p.set('only_active', $('#onlyActive').is(':checked') ? '1' : '0');
                return p;
            };

            const loadData = () => {
                const params = buildParams();
                $.getJSON(`{{ route('project_cost_report.data') }}?${params.toString()}`)
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));
            };

            $('#btnLoad').on('click', loadData);
            $('#searchProject').on('input', () => table.draw());
            $('#btnExportXlsx').on('click', function () {
                const params = buildParams();
                window.open(`{{ route('project_cost_report.export') }}?${params.toString()}`, '_blank');
            });

            loadData();
        });
    </script>
@endpush