@extends('layouts.app')
@section('title', 'Upah Terbayar — ' . $project->nama_proyek)

@section('page-style')
<style>
.no-print { }
@media print {
    .no-print { display: none !important; }
    .sidebar-wrapper, aside, nav, footer { display: none !important; }
    .layout-page { margin-left: 0 !important; }
}
</style>
@endsection

@section('content')

@include('admin.projects.tabs', ['activeTab' => 'paid_wages'])

<div class="d-flex justify-content-end mb-3 no-print">
    <button onclick="window.print()" class="btn btn-sm btn-outline-secondary"><i class="bx bx-printer me-1"></i>Cetak Laporan Upah</button>
</div>

{{-- Summary Card --}}
<div class="card mb-4" style="border-left: 4px solid #2563EB;">
    <div class="card-body py-3">
        <div class="row align-items-center">
            <div class="col-md-6">
                <p class="mb-0 text-muted" style="font-size:0.75rem;">TOTAL UPAH TERBAYAR</p>
                <h4 class="mb-0 fw-bold text-primary">
                    Rp {{ number_format($totalPaidWages, 0, ',', '.') }}
                </h4>
            </div>
            <div class="col-md-6">
                <p class="mb-0 text-muted" style="font-size:0.75rem;">TOTAL TRANSAKSI PEMBAYARAN</p>
                <h5 class="mb-0 fw-semibold">{{ $paidWages->count() }} transaksi</h5>
            </div>
        </div>
    </div>
</div>

{{-- Form Tambah Pembayaran Upah --}}
<div class="card mb-4 no-print">
    <div class="card-header py-3">
        <h6 class="mb-0 fw-bold"><i class="bx bx-plus-circle me-2 text-primary"></i>Catat Pembayaran Upah</h6>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.paid-wages.store', $project) }}" method="POST">
            @csrf
            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Tanggal <span class="text-danger">*</span></label>
                    <input type="date" name="tanggal" class="form-control @error('tanggal') is-invalid @enderror" value="{{ old('tanggal', date('Y-m-d')) }}" required>
                    @error('tanggal') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Item Pekerjaan <span class="text-danger">*</span></label>
                    <select name="item_pekerjaan" id="item_pekerjaan" class="form-select select2-job @error('item_pekerjaan') is-invalid @enderror" required>
                        <option value="">-- Pilih / Ketik Item Pekerjaan --</option>
                        @foreach($jobSuggestions as $job)
                            <option value="{{ $job }}" {{ old('item_pekerjaan') == $job ? 'selected' : '' }}>{{ $job }}</option>
                        @endforeach
                    </select>
                    @error('item_pekerjaan') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Jumlah Upah (Rp) <span class="text-danger">*</span></label>
                    <input type="number" name="jumlah_upah" class="form-control @error('jumlah_upah') is-invalid @enderror" value="{{ old('jumlah_upah') }}" step="1" min="0" placeholder="0" required>
                    @error('jumlah_upah') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Unit Rumah / Blok</label>
                    <input type="text" name="unit_rumah" class="form-control @error('unit_rumah') is-invalid @enderror" value="{{ old('unit_rumah') }}" placeholder="cth: Blok A1 / Unit 12">
                    @error('unit_rumah') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-12">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Catatan / Keterangan Tambahan</label>
                    <input type="text" name="catatan" class="form-control @error('catatan') is-invalid @enderror" value="{{ old('catatan') }}" placeholder="cth: Pembayaran termin 1 via transfer mandiri">
                </div>
            </div>
            <div class="mt-3 text-end">
                <button type="submit" class="btn btn-primary btn-sm px-4">
                    <i class="bx bx-save me-1"></i>Simpan Pembayaran
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Tabel Daftar Upah Terbayar --}}
<div class="card">
    <div class="card-header py-3">
        <h6 class="mb-0 fw-bold"><i class="bx bx-table me-2"></i>Rincian Upah Terbayar — {{ $project->nama_proyek }}</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="paidWagesTable" class="table table-striped table-hover align-middle">
                <thead>
                    <tr>
                        <th style="width:50px;">No.</th>
                        <th style="width:120px;">Tanggal</th>
                        <th>Item Pekerjaan</th>
                        <th style="width:150px;">Unit Rumah / Blok</th>
                        <th class="text-end" style="width:160px;">Jumlah Upah (Rp)</th>
                        <th>Catatan</th>
                        <th style="width:80px;" class="text-center no-print">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($paidWages as $i => $pw)
                    <tr>
                        <td>{{ $i + 1 }}</td>
                        <td>{{ \Carbon\Carbon::parse($pw->tanggal)->format('d/m/Y') }}</td>
                        <td class="fw-semibold">{{ $pw->item_pekerjaan }}</td>
                        <td>
                            @if($pw->unit_rumah)
                                <span class="badge bg-label-info">{{ $pw->unit_rumah }}</span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td class="text-end fw-bold text-success">
                            Rp {{ number_format($pw->jumlah_upah, 0, ',', '.') }}
                        </td>
                        <td class="small text-muted">{{ $pw->catatan ?: '-' }}</td>
                        <td class="text-center no-print">
                            <form action="{{ route('admin.paid-wages.destroy', [$project, $pw]) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus catatan pembayaran ini?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-xs btn-outline-danger" style="font-size:0.72rem; padding:2px 6px;" title="Hapus">
                                    <i class="bx bx-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="fw-bold table-primary">
                        <td colspan="4" class="text-end">TOTAL KESELURUHAN UPAH TERBAYAR:</td>
                        <td class="text-end text-success">Rp {{ number_format($totalPaidWages, 0, ',', '.') }}</td>
                        <td colspan="2" class="no-print"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

{{-- [REV-4] Section File Lampiran --}}
@include('admin.partials.project_files_section', [
    'project'      => $project,
    'files'        => $files,
    'modul'        => 'upah_terbayar',
    'sectionTitle' => 'File Lampiran Upah Terbayar',
])

@endsection

@section('page-script')
<script>
$(document).ready(function() {
    $('.select2-job').select2({
        theme: 'bootstrap-5',
        width: '100%',
        tags: true,
        placeholder: '-- Pilih / Ketik Item Pekerjaan --'
    });

    $('#paidWagesTable').DataTable({
        "order": [[ 1, "desc" ]],
        "language": {
            "emptyTable": "Belum ada catatan pembayaran upah."
        }
    });
});
</script>
@endsection