@extends('layouts.app', ['title' => 'Detail Import', 'heading' => 'Preview Import Excel'])

@section('content')
    <div class="row g-4 mb-4">
        <div class="col-md-8">
            <div class="card h-100">
                <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ $batch->original_filename }}</h5>
                    <form method="POST" action="{{ route('imports.finalize', $batch) }}">
                        @csrf
                        <button type="submit" class="btn btn-primary" {{ $batch->ready_rows == 0 ? 'disabled' : '' }}>
                            <i class="ti tabler-check me-1"></i> Finalisasi Row Siap Import
                        </button>
                    </form>
                </div>
                <div class="card-body pt-6">
                    <div class="row g-4">
                        <div class="col-sm-4">
                            <div class="d-flex align-items-center mb-2">
                                <div class="avatar avatar-md bg-label-success rounded p-2 me-2">
                                    <i class="ti tabler-check ti-md"></i>
                                </div>
                                <h6 class="mb-0">Ready</h6>
                            </div>
                            <h3 class="mb-0">{{ $batch->ready_rows }}</h3>
                        </div>
                        <div class="col-sm-4">
                            <div class="d-flex align-items-center mb-2">
                                <div class="avatar avatar-md bg-label-warning rounded p-2 me-2">
                                    <i class="ti tabler-alert-triangle ti-md"></i>
                                </div>
                                <h6 class="mb-0">Need Review</h6>
                            </div>
                            <h3 class="mb-0">{{ $batch->review_rows }}</h3>
                        </div>
                        <div class="col-sm-4">
                            <div class="d-flex align-items-center mb-2">
                                <div class="avatar avatar-md bg-label-info rounded p-2 me-2">
                                    <i class="ti tabler-building ti-md"></i>
                                </div>
                                <h6 class="mb-0">Facility</h6>
                            </div>
                            <h3 class="mb-0">{{ $batch->facility_rows }}</h3>
                        </div>
                    </div>
                    <div class="mt-4">
                        <p class="mb-0 text-muted">Status: <span class="badge bg-label-secondary">{{ strtoupper($batch->status) }}</span> | Total {{ $batch->total_rows }} baris</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-datatable table-responsive pt-0">
            <table class="datatables-basic table">
                <thead>
                    <tr>
                        <th>Sheet</th>
                        <th>Row</th>
                        <th>Lokasi</th>
                        <th>Nama</th>
                        <th>Qty</th>
                        <th>Kondisi (B/RR/RB)</th>
                        <th>Tipe</th>
                        <th>Status</th>
                        <th>Issue</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($batch->rows as $row)
                        <tr>
                            <td>{{ $row->sheet_name }}</td>
                            <td>{{ $row->row_number }}</td>
                            <td>{{ $row->location_name }}</td>
                            <td>{{ $row->item_name }}</td>
                            <td>{{ $row->raw_quantity }} <span class="small text-muted">=> {{ $row->normalized_quantity ?? '-' }}</span></td>
                            <td>{{ $row->good_count ?? 0 }}/{{ $row->minor_damage_count ?? 0 }}/{{ $row->major_damage_count ?? 0 }}/{{ $row->lost_count ?? 0 }}</td>
                            <td><span class="badge bg-label-secondary">{{ strtoupper($row->row_type) }}</span></td>
                            <td>
                                @php
                                    $statusBadges = [
                                        'ready' => 'bg-label-success',
                                        'review' => 'bg-label-warning',
                                        'imported' => 'bg-label-info'
                                    ];
                                @endphp
                                <span class="badge {{ $statusBadges[$row->review_status] ?? 'bg-label-secondary' }}">{{ strtoupper($row->review_status) }}</span>
                            </td>
                            <td class="small">{{ $row->issue_notes ?: '-' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
    $(function() {
        var dt_basic_table = $('.datatables-basic');
        if (dt_basic_table.length) {
            let tableTitle = document.createElement('h5');
            tableTitle.classList.add('card-title', 'mb-0', 'text-md-start', 'text-center', 'pb-md-0', 'pb-6');
            tableTitle.innerHTML = 'Preview Data Import';

            dt_basic_table.DataTable({
                displayLength: 25,
                lengthMenu: [10, 25, 50, 100],
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampil _MENU_ data",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    paginate: {
                        next: '<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>',
                        previous: '<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>',
                        first: '<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>',
                        last: '<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>'
                    }
                },
                layout: {
                    top2Start: {
                        rowClass: 'row card-header flex-column flex-md-row border-bottom mx-0 px-3',
                        features: [tableTitle]
                    },
                    top2End: {
                        features: [
                            {
                                buttons: [
                                    {
                                        extend: 'collection',
                                        className: 'btn btn-label-primary dropdown-toggle me-2 waves-effect waves-light',
                                        text: '<span class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-upload icon-xs me-sm-1"></i> <span class="d-none d-sm-inline-block">Export</span></span>',
                                        buttons: [
                                            { extend: 'print', text: '<span class="d-flex align-items-center"><i class="icon-base ti tabler-printer me-1"></i>Print</span>', className: 'dropdown-item' },
                                            { extend: 'csv', text: '<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-text me-1"></i>Csv</span>', className: 'dropdown-item' },
                                            { extend: 'excel', text: '<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-spreadsheet me-1"></i>Excel</span>', className: 'dropdown-item' },
                                            { extend: 'pdf', text: '<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-description me-1"></i>Pdf</span>', className: 'dropdown-item' },
                                            { extend: 'copy', text: '<i class="icon-base ti tabler-copy me-1"></i>Copy', className: 'dropdown-item' }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    topStart: {
                        rowClass: 'row mx-0 px-3 my-0 justify-content-between border-bottom',
                        features: [
                            {
                                pageLength: {
                                    menu: [10, 25, 50, 100],
                                    text: 'Show_MENU_entries'
                                }
                            }
                        ]
                    },
                    topEnd: {
                        search: {
                            placeholder: ''
                        }
                    },
                    bottomStart: {
                        rowClass: 'row mx-3 justify-content-between',
                        features: ['info']
                    },
                    bottomEnd: 'paging'
                }
            });
        }
    });
</script>
@endpush
