@extends('layout.dashboard_layout')



@section('content')
    <div class="pw-container">

        {{-- ── Flash Messages ── --}}
        @if (session('success'))
            <div class="pw-alert pw-alert-success">
                <i class="bi bi-check-circle-fill"></i>
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="pw-alert pw-alert-danger">
                <i class="bi bi-x-circle-fill"></i>
                {{ session('error') }}
            </div>
        @endif

        {{-- ── Header ── --}}
        <div class="pw-header">
            <div class="pw-header-left">
                <h4>Data Penyemprot</h4>
                <p>Kelola data penyemprot pada sistem</p>
            </div>
            <div class="pw-header-right">
                <a href="" class="pw-btn pw-btn-success">
                    <i class="bi bi-upload"></i> Import
                </a>
                <a href="{{ route('workers.create') }}" class="pw-btn pw-btn-primary">
                    <i class="bi bi-plus-lg"></i> Tambah
                </a>
            </div>
        </div>

        {{-- ── Stat Cards ── --}}


        {{-- ── Table Card ── --}}
        <div class="pw-card">
            <div id="workersTableToolbar"></div>

            <div style="overflow-x:auto">
                <table id="workersTable" class="table w-100">
                    <thead>
                        <tr>
                            <th width="50">No</th>
                            <th>Nama</th>
                            <th>Kode</th>
                            <th>Job</th>
                            <th>Afdeling</th>
                            <th class="text-center" width="110">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($workers as $worker)
                            <tr>
                                <td></td>
                                <td>
                                    <div class="td-name-wrap">
                                        <span class="td-avatar">
                                            {{ strtoupper(substr($worker->nama_pekerja, 0, 2)) }}
                                        </span>
                                        <span class="td-name">{{ $worker->nama_pekerja }}</span>
                                    </div>
                                </td>
                                <td><span class="pw-badge badge-code">{{ $worker->pekerja_code }}</span></td>
                                <td><span class="pw-badge badge-job">{{ $worker->job_code }}</span></td>
                                <td><span class="pw-badge badge-afd">{{ $worker->afdeling }}</span></td>
                                <td>
                                    <div class="td-actions">
                                        <a href="{{ route('workers.edit', $worker->id) }}" class="act-btn act-edit"
                                            title="Edit {{ $worker->nama_pekerja }}">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <form action="{{ route('workers.destroy', $worker->id) }}" method="POST"
                                            class="d-inline delete-form">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="act-btn act-del"
                                                title="Hapus {{ $worker->nama_pekerja }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div id="workersTableFooter"></div>
        </div>

    </div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {

            /* ── Init DataTable ── */
            let table = $('#workersTable').DataTable({
                processing: true,
                responsive: true,
                autoWidth: false,
                pageLength: 10,
                lengthMenu: [10, 25, 50, 100],
                language: {
                    lengthMenu: "Tampilkan _MENU_ data",
                    search: "",
                    searchPlaceholder: "Cari nama, kode, job...",
                    info: "Menampilkan _START_–_END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    zeroRecords: "Data tidak ditemukan",
                    paginate: {
                        previous: "‹",
                        next: "›"
                    }
                },
                columnDefs: [{
                    targets: 0,
                    searchable: false,
                    orderable: false
                }],
                order: [
                    [1, 'asc']
                ],

                /* ── DOM layout: toolbar → table → footer ── */
                dom: '<"pw-toolbar"lf>' +
                    't' +
                    '<"pw-footer"ip>',
            });

            /* ── Auto numbering on each draw ── */
            table.on('draw.dt', function() {
                let info = table.page.info();
                table.column(0, {
                    page: 'current'
                }).nodes().each(function(cell, i) {
                    cell.innerHTML = i + 1 + info.start;
                });
            }).draw();

            /* ── SweetAlert2 delete confirmation ── */
            $(document).on('submit', '.delete-form', function(e) {
                e.preventDefault();
                const form = this;
                Swal.fire({
                    title: 'Hapus data ini?',
                    text: 'Data yang dihapus tidak dapat dikembalikan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#DC2626',
                    cancelButtonColor: '#6B7280',
                    confirmButtonText: '<i class="bi bi-trash me-1"></i> Ya, Hapus',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                    focusCancel: true,
                    customClass: {
                        popup: 'swal-popup-custom',
                        confirmButton: 'swal-confirm-custom',
                        cancelButton: 'swal-cancel-custom',
                    }
                }).then(result => {
                    if (result.isConfirmed) form.submit();
                });
            });

        });
    </script>

    {{-- Optional: minor SweetAlert style tweak ──────────────────── --}}
    <style>
        .swal-popup-custom {
            border-radius: 14px !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }

        .swal-confirm-custom,
        .swal-cancel-custom {
            border-radius: 8px !important;
            font-size: 0.8125rem !important;
            padding: 8px 18px !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }
    </style>
@endpush