@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-md-auto">
                                <h6 class="mb-0">Onprogress Sample (Informasi COA & ROLL)</h6>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-2">
                        
                        <div class="row">
                            <div class="col-lg">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-sm btn-outline-success mb-0" onclick="window.location.href='{{ url('ongsmp') }}?export=excel'">
                                            <i class="fas fa-file-excel me-1"></i> Excel
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger mb-0" onclick="window.location.href='{{ url('ongsmp') }}?export=pdf'">
                                            <i class="fas fa-file-pdf me-1"></i> PDF
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary mb-0" onclick="window.print()">
                                            <i class="fas fa-print me-1"></i> Print
                                        </button>
                                    </div>
                                    
                                    <div class="d-flex align-items-center">
                                        <label class="text-sm font-weight-bold text-secondary me-2 mb-0">Cari :</label>
                                        <input type="search" id="live-search-box" class="form-control form-control-sm" style="width: 200px;" placeholder="ID Sample / Customer...">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-body px-0 pt-0 pb-2">
                        @include('components.alert')

                        @if(empty($samples_with_details) || count($samples_with_details) == 0)
                            <div class="px-4 py-5 text-center">
                                <h6 class="text-secondary font-weight-normal">Tidak ada data sample ongoing.</h6>
                            </div>
                        @else
                            <div class="px-3 py-2">
                                @foreach($samples_with_details as $sampleIndex => $sampleData)
                                    @php
                                        $sample = $sampleData['sample'];
                                        $approval = $sampleData['approval'];
                                        $items = $sampleData['items'];
                                        $searchText = strtolower($sample->id_sample . ' ' . ($sample->customer ?? '') . ' ' . ($sample->nama_sales ?? ''));
                                    @endphp
                                    
                                    <div class="sample-group card border mb-3 shadow-none" data-search="{{ $searchText }}" style="border-color: #e9ecef !important;">
                                        
                                        {{-- Sample Info Header --}}
                                        <div class="card-header p-3 bg-gray-100" style="border-bottom: 1px solid #e9ecef;">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="d-flex align-items-center gap-3">
                                                    <button class="btn btn-sm btn-icon-only btn-rounded btn-outline-secondary mb-0 bg-white">
                                                        <i class="fas fa-cube text-sm"></i>
                                                    </button>
                                                    <div>
                                                        <h6 class="mb-0 text-sm text-dark font-weight-bold">
                                                            {{ $sample->id_sample }}
                                                            <span class="badge badge-sm bg-gradient-success ms-2">{{ $sample->status }}</span>
                                                        </h6>
                                                        {{-- CHANGED: Upgraded font size to text-sm --}}
                                                        <div class="d-flex text-sm text-secondary mt-1 align-items-center">
                                                            <span class="me-3"><i class="fas fa-building me-1"></i> {{ $sample->customer ?? '-' }}</span>
                                                            <span class="me-3"><i class="fas fa-user-tag me-1"></i> {{ $sample->nama_sales ?? '-' }}</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="d-flex align-items-center gap-3">
                                                    <div class="text-end d-none d-md-block" style="min-width: 150px;">
                                                        <div class="d-flex justify-content-between text-xs mb-1">
                                                            <span class="font-weight-bold text-secondary">Progress</span>
                                                            <span class="text-info font-weight-bold">{{ $sampleData['filled_fields'] }}/{{ $sampleData['total_fields'] }}</span>
                                                        </div>
                                                        <div class="progress" style="height: 6px; width: 160px; background-color: #e9ecef;">
                                                            <div class="progress-bar bg-gradient-info" role="progressbar" style="width: {{ $sampleData['progress_fields'] }}%"></div>
                                                        </div>
                                                    </div>
                                                    {{-- Button Group: View + Dropdown (Cancel & Reject) --}}
                                                    <div class="btn-group">
                                                        <button type="button"
                                                            class="btn btn-sm mb-0 px-3 shadow-sm"
                                                            style="background-color: #01595b; color: white;"
                                                            onclick="window.location='{{ url('ongsmp/show/' . encrypt($sample->id_sample)) }}'"
                                                            title="Lihat Detail">
                                                            <i class="fas fa-eye me-1"></i> View
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm mb-0 px-3 text-white dropdown-toggle dropdown-toggle-split shadow-sm"
                                                            style="background-color: #01595b;"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end shadow">
                                                            <li>
                                                                <button type="button" 
                                                                    class="dropdown-item text-danger cancel-sample-btn"
                                                                    data-id="{{ $sample->id_sample }}"
                                                                    data-customer="{{ $sample->customer ?? '-' }}">
                                                                    <i class="fas fa-ban me-2"></i> Cancel
                                                                </button>
                                                            </li>
                                                            <li><hr class="dropdown-divider"></li>
                                                            <li>
                                                                <button type="button"
                                                                    class="dropdown-item text-warning reject-sample-btn"
                                                                    data-id="{{ $sample->id_sample }}"
                                                                    data-customer="{{ $sample->customer ?? '-' }}">
                                                                    <i class="fas fa-times-circle me-2"></i> Reject
                                                                </button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Items Table --}}
                                        <div class="table-responsive">
                                            <table class="table align-items-center mb-0">
                                                <thead style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        {{-- CHANGED: Header font increased to match LSTSMP standard (removed small size classes) --}}
                                                        <th class="ps-3 text-dark font-weight-bold" style="width: 50px;">No</th>
                                                        <th class="text-dark font-weight-bold">Detail Item</th>
                                                        <th class="text-center text-dark font-weight-bold">Jadwal</th>
                                                        <th class="text-center text-dark font-weight-bold">Line</th>
                                                        <th class="text-center text-dark font-weight-bold">Kode Material</th>
                                                        <th class="text-center text-dark font-weight-bold">COA</th>
                                                        <th class="text-center text-dark font-weight-bold">ROLL</th>
                                                        <th class="text-center text-dark font-weight-bold">Kode Jumbo</th>
                                                        <th class="text-center text-dark font-weight-bold">Tgl COA</th>
                                                        <th class="text-center text-dark font-weight-bold">Note QC</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if(count($items) > 0)
                                                        @foreach($items as $i => $item)
                                                            <tr style="border-bottom: 1px solid #f0f2f5;">
                                                                <td class="text-center ps-3">
                                                                    {{-- CHANGED: Upgraded to text-sm --}}
                                                                    <span class="text-secondary text-sm font-weight-bold">{{ $i + 1 }}</span>
                                                                </td>
                                                                <td>
                                                                    <div class="d-flex flex-column justify-content-center" style="max-width: 250px;">
                                                                        <h6 class="mb-0 text-sm font-weight-normal text-dark text-wrap">{{ $item['aplikasi'] }}</h6>
                                                                        <p class="text-sm text-secondary mb-0 text-wrap" style="word-break: break-word;">{{ $item['item'] }}</p>
                                                                    </div>
                                                                </td>
                                                                <td class="align-middle text-center text-sm text-secondary">
                                                                    {{ !empty($item['jadwal_produksi']) && $item['jadwal_produksi'] != '-' ? \Carbon\Carbon::parse($item['jadwal_produksi'])->format('d/m/Y') : '-' }}
                                                                </td>
                                                                <td class="align-middle text-center text-sm font-weight-bold text-dark">
                                                                    {{ $item['line_produksi'] ?: '-' }}
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    @if(!empty($item['kode_material']) && $item['kode_material'] != '-')
                                                                        {{-- CHANGED: Upgraded badge text size slightly by context --}}
                                                                        <span class="badge badge-sm bg-gradient-light text-dark border text-xs" style="font-size: 0.75rem;">{{ $item['kode_material'] }}</span>
                                                                    @else
                                                                        <span class="text-secondary text-sm">-</span> {{-- text-sm --}}
                                                                    @endif
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    @if($item['needs_coa_roll'])
                                                                        @if($item['has_coa'])
                                                                            <span class="text-dark text-sm font-weight-bold">{{ $item['nomor_coa'] }}</span>
                                                                        @else
                                                                            <span class="text-secondary text-sm">-</span>
                                                                        @endif
                                                                    @else
                                                                        <span class="text-secondary text-sm">-</span>
                                                                    @endif
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    @if($item['needs_coa_roll'])
                                                                        @if($item['has_roll'])
                                                                            <span class="text-dark text-sm font-weight-bold">{{ $item['nomor_roll'] }}</span>
                                                                        @else
                                                                            <span class="text-secondary text-sm">-</span>
                                                                        @endif
                                                                    @else
                                                                        <span class="text-secondary text-sm">-</span>
                                                                    @endif
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    @if(!empty($item['nomor_jumbo']) && $item['nomor_jumbo'] != '-')
                                                                        <span class="text-dark text-sm font-weight-bold">{{ $item['nomor_jumbo'] }}</span>
                                                                    @else
                                                                        <span class="text-secondary text-sm">-</span>
                                                                    @endif
                                                                </td>
                                                                <td class="align-middle text-center text-sm text-secondary">
                                                                    {{ !empty($item['tanggal_coa']) && $item['tanggal_coa'] != '-' ? \Carbon\Carbon::parse($item['tanggal_coa'])->format('d/m/Y') : '-' }}
                                                                </td>
                                                                <td class="align-middle text-center">
                                                                    <span class="text-dark text-sm font-weight-bold">{{ $item['qc_note'] ?? '-' }}</span>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr><td colspan="9" class="text-center py-3 text-sm text-secondary">Tidak ada detail item</td></tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Cancel Sample Modal --}}
    <div class="modal fade" id="cancelSampleModal" tabindex="-1" aria-labelledby="cancelSampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-white border-bottom">
                    <h5 class="modal-title text-dark" id="cancelSampleModalLabel">
                        Cancel Sample
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="cancelSampleForm" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label font-weight-bold">ID Sample</label>
                            <input type="text" class="form-control" id="cancel_id_sample" readonly>
                            <input type="hidden" name="id_sample" id="cancel_id_sample_hidden">
                        </div>
                        <div class="mb-3">
                            <label class="form-label font-weight-bold">Customer</label>
                            <input type="text" class="form-control" id="cancel_customer" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label font-weight-bold">Alasan Pembatalan <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="note_cancelled" name="note_cancelled" rows="4" 
                                placeholder="Berikan alasan pembatalan sample ini..." required></textarea>
                            <small class="text-muted">Note pembatalan dapat dilihat kembali di Report</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Confirm Cancellation</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Reject Sample Modal (Dihapus karena diganti Swal.fire) --}}

    @push('js')
        <script>
            $(document).ready(function () {
                // Live search functionality
                $('#live-search-box').on('keyup', function() {
                    var value = $(this).val().toLowerCase();
                    $('.sample-group').filter(function() {
                        $(this).toggle($(this).data('search').indexOf(value) > -1)
                    });
                });

                // Cancel sample button click
                $(document).on('click', '.cancel-sample-btn', function() {
                    const idSample = $(this).data('id');
                    const customer = $(this).data('customer');
                    
                    $('#cancel_id_sample').val(idSample);
                    $('#cancel_customer').val(customer);
                    $('#note_cancelled').val('');
                    $('#cancelSampleForm').attr('action', '{{ url("ongsmp/api/cancel") }}');
                    $('#cancel_id_sample_hidden').val(idSample);
                    
                    $('#cancelSampleModal').modal('show');
                });

                // Handle cancel form submission
                $('#cancelSampleForm').on('submit', function(e) {
                    e.preventDefault();
                    
                    const form = $(this);
                    const actionUrl = form.attr('action');
                    const note = $('#note_cancelled').val().trim();
                    
                    if (!note) {
                        Swal.fire({ icon: 'warning', title: 'Validasi', text: 'Mohon berikan alasan pembatalan.', confirmButtonColor: '#028284' });
                        return;
                    }
                    
                    $.ajax({
                        url: actionUrl,
                        type: 'POST',
                        data: form.serialize(),
                        success: function(response) {
                            $('#cancelSampleModal').modal('hide');
                            window.location.reload();
                        },
                        error: function(xhr) {
                            let errorMsg = 'Terjadi kesalahan saat membatalkan sample.';
                            if (xhr.responseJSON && xhr.responseJSON.message) errorMsg = xhr.responseJSON.message;
                            Swal.fire({ icon: 'error', title: 'Error', text: errorMsg, confirmButtonColor: '#028284' });
                        }
                    });
                });

                // Reject sample button click (Langsung Alert + Redirect ke rjtsmp)
                $(document).on('click', '.reject-sample-btn', function() {
                    const idSample = $(this).data('id');
                    const customer = $(this).data('customer');

                    Swal.fire({
                        title: 'Reject Sample',
                        html: `Konfirmasi penolakan untuk sample <b>${idSample}</b> (${customer})? <br><small class="text-muted">Sample akan dipindahkan ke daftar Rejected Sample.</small>`,
                        icon: 'warning',
                        input: 'textarea',
                        inputPlaceholder: 'Berikan alasan penolakan di sini...',
                        inputAttributes: { 'aria-label': 'Alasan penolakan' },
                        showCancelButton: true,
                        confirmButtonText: 'Confirm Reject',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#025e04',
                        showLoaderOnConfirm: true,
                        preConfirm: (note) => {
                            if (!note || note.trim() === '') {
                                Swal.showValidationMessage('Alasan penolakan wajib diisi!');
                                return false;
                            }
                            // Wrap jQuery AJAX dalam native Promise agar Swal bisa menunggu
                            return new Promise((resolve, reject) => {
                                $.ajax({
                                    url: '{{ url("ongsmp/api/reject") }}',
                                    type: 'POST',
                                    dataType: 'json',
                                    data: {
                                        _token: '{{ csrf_token() }}',
                                        id_sample: idSample,
                                        note_rejected: note.trim()
                                    },
                                    success: function(response) {
                                        if (response.success) {
                                            resolve(response);
                                        } else {
                                            Swal.showValidationMessage(response.message || 'Terjadi kesalahan.');
                                            resolve(false);
                                        }
                                    },
                                    error: function(xhr) {
                                        console.error('Reject Error:', xhr);
                                        let msg = 'Terjadi kesalahan saat me-reject sample.';
                                        if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
                                        else if (xhr.status === 419) msg = 'Sesi telah habis, harap refresh halaman.';
                                        else if (xhr.status === 0) msg = 'Tidak dapat terhubung ke server.';
                                        Swal.showValidationMessage(msg);
                                        resolve(false);
                                    }
                                });
                            });
                        },
                        allowOutsideClick: () => !Swal.isLoading()
                    }).then((result) => {
                        if (result.isConfirmed && result.value && result.value.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil!',
                                text: result.value.message || 'Sample berhasil di-reject.',
                                timer: 2000,
                                timerProgressBar: true,
                                showConfirmButton: false,
                                allowOutsideClick: false
                            }).then(() => {
                                window.location.href = '{{ url("rjtsmp") }}';
                            });
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection