@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title_menu])

    <div class="container-fluid px-3 py-3">
        <div class="card shadow-sm border-0 rounded-3 mb-3">
            <div class="card-header bg-white border-0 pb-0 pt-3 px-3">
                <div class="d-flex justify-content-between align-items-center">
                    <p class="text-uppercase text-xs fw-bold text-muted mb-0">
                        <i class="fas fa-list-ul me-1"></i> List {{ $title_menu }}
                    </p>
                    @if ($authorize->add == '1')
                        <button class="btn btn-primary btn-sm"
                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                            <i class="fas fa-plus me-1"></i> Tambah
                        </button>
                    @endif
                </div>
                <hr class="horizontal dark mt-2 mb-0">
            </div>
            <div class="card-body px-3 pt-3 pb-3">
                <form id="filter-form-mobile">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label text-xs fw-bold text-uppercase text-muted mb-1">
                            <i class="fas fa-calendar me-1"></i> Tanggal
                        </label>
                        <input type="date" class="form-control form-control-sm" id="filter_tanggal"
                            style="font-size:16px;"
                            value="{{ request('tanggal') }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-xs fw-bold text-uppercase text-muted mb-1">
                            <i class="fas fa-cog me-1"></i> Mesin
                        </label>
                        <select class="form-select form-select-sm" id="filter_mesin" style="font-size:16px;">
                            <option value="">-- Semua Mesin --</option>
                            @foreach ($mesin as $m)
                                <option value="{{ $m->id }}" {{ request('mesin_id') == $m->id ? 'selected' : '' }}>
                                    {{ $m->nama_mesin }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="button" class="btn btn-info text-white fw-semibold rounded-3 btn-sm"
                            id="btn-filter-mobile">
                            <i class="fas fa-search me-1"></i> Cari
                        </button>
                        <button type="button" class="btn btn-warning fw-semibold rounded-3 btn-sm"
                            id="btn-reset-mobile">
                            <i class="fas fa-eraser me-1"></i> Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-sm border-0 rounded-3 mb-5">
            <div class="card-header bg-white border-0 pb-0 pt-3 px-3">
                <p class="text-uppercase text-xs fw-bold text-muted mb-0">
                    <i class="fas fa-history me-1"></i> Riwayat Input
                </p>
                <hr class="horizontal dark mt-2 mb-0">
            </div>
            <div class="card-body px-3 pt-3 pb-3">
                <div class="table-responsive" style="overflow-x: auto;">
                    <table class="table table-bordered table-sm" id="list_{{ $dmenu }}_mobile">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th>No</th>
                                <th>Tanggal</th>
                                <th>Mesin</th>
                                <th>Parameter Set</th>
                                <th>Shift</th>
                                <th>Group</th>
                                <th>Param</th>
                                <th>Waktu Buat</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $nomor = 1; @endphp
                            @foreach ($saved_data as $batch)
                                <tr>
                                    <td>{{ $nomor++ }}</td>
                                    <td>{{ $batch->tanggal }}</td>
                                    <td>{{ $batch->nama_mesin }}</td>
                                    <td>{{ $batch->nama_parameter_set }}</td>
                                    <td>{{ $batch->shift ?? '-' }}</td>
                                    <td>{{ $batch->group ?? '-' }}</td>
                                    <td>{{ $batch->total_param }}</td>
                                    <td>{{ \Carbon\Carbon::parse($batch->created_at)->format('d/m H:i') }}</td>
                                    <td>
                                        <button
                                            class="btn btn-info btn-sm text-white"
                                            onclick="detailBatch(this)"
                                            data-capture-id="{{ $batch->id }}">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                            @if($saved_data->isEmpty())
                                <tr>
                                    <td colspan="9" class="text-center text-muted">Belum ada data input.</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Detail Modal -->
    <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detail Parameter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-sm">
                        <thead>
                            <tr>
                                <th>Parameter</th>
                                <th>Nilai</th>
                                <th>Roll Jadi Awal</th>
                                <th>Roll Jadi Akhir</th>
                            </tr>
                        </thead>
                        <tbody id="detail-body"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#list_{{ $dmenu }}_mobile').DataTable({
                "scrollX": true,
                "autoWidth": false,
                "destroy": true,
                "lengthChange": false,
                "searching": true,
                "paging": true,
                "info": false,
                "ordering": true,
                "dom": 'frtip',
                "buttons": [
                    'excel', 'print'
                ],
                "language": {
                    "emptyTable": "Tidak ada data yang tersedia",
                    "search": "Cari:",
                    "zeroRecords": "Tidak ditemukan data yang cocok"
                }
            });

            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');

            $('#btn-filter-mobile').on('click', function() {
                const tanggal = $('#filter_tanggal').val();
                const mesin = $('#filter_mesin').val();
                const url = new URL(window.location.href);
                if (tanggal) url.searchParams.set('tanggal', tanggal);
                else url.searchParams.delete('tanggal');
                if (mesin) url.searchParams.set('mesin_id', mesin);
                else url.searchParams.delete('mesin_id');
                window.location.href = url.toString();
            });

            $('#btn-reset-mobile').on('click', function() {
                window.location.href = '{{ $url_menu }}';
            });
        });

        function detailBatch(btn) {
            const captureId = $(btn).data('capture-id');

            $('#detail-body').html(
                '<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Memuat...</td></tr>'
            );
            $('#detailModal').modal('show');

            $.ajax({
                url: '{{ URL::to('/') }}/trsprm/get-detail-batch',
                method: 'GET',
                data: {
                    capture_id: captureId
                },
                success: function(res) {
                    if (res.status === 'success') {
                        let html = '';
                        res.data.forEach(function(row) {
                            html +=
                                '<tr><td>' + row.nama_parameter + '</td><td>' + row.value +
                                '</td><td>' + (row.roll_jadi_awal || '-') +
                                '</td><td>' + (row.roll_jadi_akhir || '-') + '</td></tr>';
                        });
                        $('#detail-body').html(html);
                    } else {
                        $('#detail-body').html(
                            '<tr><td colspan="4" class="text-center text-danger">Data tidak ditemukan</td></tr>'
                            );
                    }
                },
                error: function() {
                    $('#detail-body').html(
                        '<tr><td colspan="4" class="text-center text-danger">Gagal mengambil data</td></tr>'
                        );
                }
            });
        }
    </script>
@endpush