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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show text-white" role="alert">
                <strong><i class="fas fa-check-circle me-1"></i> Sukses:</strong> {{ session('success') }}
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show text-white" role="alert">
                <strong><i class="fas fa-exclamation-circle me-1"></i> Gagal:</strong> {{ session('error') }}
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('info'))
            <div class="alert alert-warning alert-dismissible fade show text-white" role="alert">
                <strong><i class="fas fa-info-circle me-1"></i> Info:</strong> {{ session('info') }}
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <div class="col-md-7 col-lg-6">
                <div class="card shadow-lg">
                    <div class="card-header d-flex justify-content-between align-items-center pb-0">
                        <h5 class="mb-0">Filter Test Outsource</h5>

                        <div class="d-flex align-items-center gap-3 ms-auto text-nowrap">
                            <div class="text-end me-2">
                                <small class="text-muted d-block" style="font-size: 0.75rem;">Terakhir Sinkron:</small>
                                <span class="fw-bold text-dark" id="displayLastSync" style="font-size: 0.85rem;">
                                    {{ $last_sync_time ?? 'Belum Pernah' }}
                                </span>
                            </div>

                            <button type="button" class="btn btn-info mb-0 shadow-sm" data-bs-toggle="modal" data-bs-target="#syncModal">
                                <i class="fas fa-rotate me-1"></i> <span class="font-weight-bold">Sync Data</span>
                            </button>
                        </div>
                    </div>

                    <hr class="horizontal dark mt-3 mb-0">

                    <div class="card-body pt-3">
                        <form action="{{ url('troutp/result') }}" method="POST" id="filterForm">
                            @csrf
                            <input type="hidden" name="filter_submitted" value="1">

                            <div class="row">
                                <!-- Material Code -->
                                <div class="col-md-12 mb-3">
                                    <label for="material" class="form-label font-weight-bold text-dark">Material</label>
                                    <input type="text" class="form-control" id="material" name="v_matnr"
                                        placeholder="Ketik kode material..."
                                        value="{{ session('filter_outp_matnr', '') }}">
                                </div>

                                <!-- Batch Number -->
                                <div class="col-md-12 mb-3">
                                    <label for="batch" class="form-label font-weight-bold text-dark">Batch Number</label>
                                    <input type="text" class="form-control" id="batch" name="v_batch"
                                        placeholder="Ketik nomor batch..."
                                        value="{{ session('filter_outp_batch', '') }}">
                                </div>

                                <!-- Supplier -->
                                <div class="col-md-12 mb-3">
                                    <label for="vendor" class="form-label font-weight-bold text-dark">Supplier </label>
                                    <input type="text" class="form-control" id="vendor" name="v_lifnr"
                                        placeholder="Ketik kode supplier..."
                                        value="{{ session('filter_outp_lifnr', '') }}">
                                </div>

                                <!-- Customer -->
                                <div class="col-md-12 mb-3">
                                    <label for="customer" class="form-label font-weight-bold text-dark">Customer</label>
                                    <input type="text" class="form-control" id="customer" name="v_customer"
                                        placeholder="Ketik kode customer..."
                                        value="{{ session('filter_outp_cust', '') }}">
                                </div>

                                <!-- Status QC -->
                                <div class="col-md-12 mb-3">
                                    <label for="status_qc" class="form-label font-weight-bold text-dark">Status QC</label>
                                    <select class="form-select" id="status_qc" name="v_status">
                                        <option value="" {{ session('filter_outp_status', '') == '' ? 'selected' : '' }}>Semua Status</option>
                                        <option value="Belum Ditest" {{ session('filter_outp_status') == 'Belum Ditest' ? 'selected' : '' }}>Belum Ditest</option>
                                        <option value="Draft" {{ session('filter_outp_status') == 'Draft' ? 'selected' : '' }}>Draft</option>
                                        <option value="Pending" {{ session('filter_outp_status') == 'Pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="Approved" {{ session('filter_outp_status') == 'Approved' ? 'selected' : '' }}>Approved</option>
                                        <option value="Rejected" {{ session('filter_outp_status') == 'Rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>

                                <!-- Rentang Tanggal Posting GR -->
                                <div class="col-md-12 mb-4">
                                    <label class="form-label font-weight-bold text-dark">Rentang Tanggal Posting GR</label>
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <input type="date" class="form-control" name="v_fdate" id="v_fdate"
                                                value="{{ session('filter_outp_fdate', '') }}">
                                        </div>
                                        <div class="col-6">
                                            <input type="date" class="form-control" name="v_tdate" id="v_tdate"
                                                value="{{ session('filter_outp_tdate', '') }}">
                                        </div>
                                    </div>
                            </div>

                            <!-- Tombol Aksi -->
                            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                <button type="button" class="btn btn-outline-secondary mb-0" id="btnReset">
                                    <i class="fas fa-undo me-1"></i> Reset
                                </button>
                                <button type="submit" class="btn btn-primary mb-0 shadow-sm" id="btnApply">
                                    <i class="fas fa-filter me-1"></i> Apply Filter
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Sinkronisasi SAP GR Outsource -->
    <div class="modal fade" id="syncModal" tabindex="-1" aria-labelledby="syncModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('troutp.sync') }}" method="POST" id="syncForm">
                @csrf
                <div class="modal-content shadow-lg border-0">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title text-white font-weight-bolder" id="syncModalLabel">
                            <i class="fas fa-rotate me-2"></i> Sinkronisasi Data SAP GR Outsource
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <p class="text-sm text-muted mb-3">
                            Pilih rentang tanggal posting Goods Receipt (GR) yang akan ditarik dari SAP.
                        </p>
                        <div class="mb-3">
                            <label for="sync_start_date" class="form-label font-weight-bold text-dark">Tanggal Awal (From) <span class="text-danger">*</span></label>
                            <input type="date" id="sync_start_date" name="start_date" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label for="sync_end_date" class="form-label font-weight-bold text-dark">Tanggal Akhir (To) <span class="text-danger">*</span></label>
                            <input type="date" id="sync_end_date" name="end_date" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary mb-0" id="btnSyncCancel" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary mb-0" id="btnSyncSubmit">
                            <i class="fas fa-cloud-download-alt me-1"></i> Synchronize
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Berhasil Sinkronisasi -->
    <div class="modal fade" id="modalSyncSuccess" tabindex="-1" aria-labelledby="modalSyncSuccessLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content shadow-lg border-0" style="border-radius: 12px; overflow: hidden;">
                <div class="modal-header bg-gradient-success text-white py-3">
                    <h5 class="modal-title text-white font-weight-bolder d-flex align-items-center mb-0" id="modalSyncSuccessLabel">
                        <i class="fas fa-check-circle me-2 fs-5"></i> Sinkronisasi Berhasil
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center p-4">
                    <div class="my-3">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-circle shadow-sm" style="width: 75px; height: 75px; background-color: #d1e7dd; color: #198754;">
                            <i class="fas fa-check" style="font-size: 2.2rem;"></i>
                        </div>
                    </div>
                    <h5 class="fw-bold text-dark mb-2">Data Berhasil Disinkronkan!</h5>
                    <p class="text-secondary fs-6 mb-3" id="syncSuccessMessageText">
                        {{ session('success') ?? 'Data GR Outsource berhasil diperbarui dari SAP.' }}
                    </p>
                    <div class="badge bg-light text-dark border px-3 py-2">
                        <i class="far fa-clock me-1 text-success"></i> Terakhir Sinkron: <span id="syncSuccessTime">{{ $last_sync_time ?? 'Baru saja' }}</span>
                    </div>
                </div>
                <div class="modal-footer bg-light justify-content-center py-2">
                    <button type="button" class="btn btn-success px-4 mb-0 shadow-sm" data-bs-dismiss="modal">
                        <i class="fas fa-check me-1"></i> Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Handle Reset Filter
        const btnReset = document.getElementById('btnReset');
        if (btnReset) {
            btnReset.addEventListener('click', function () {
                document.getElementById('material').value = '';
                document.getElementById('batch').value = '';
                document.getElementById('vendor').value = '';
                document.getElementById('customer').value = '';
                document.getElementById('status_qc').value = '';
                document.getElementById('v_fdate').value = '';
                document.getElementById('v_tdate').value = '';
            });
        }

        // Handle Sync Form Submit with AJAX
        const syncForm = document.getElementById('syncForm');
        if (syncForm) {
            syncForm.addEventListener('submit', function (e) {
                e.preventDefault();
                const btnSubmit = document.getElementById('btnSyncSubmit');
                const btnCancel = document.getElementById('btnSyncCancel');
                const originalBtnHtml = btnSubmit.innerHTML;

                btnSubmit.disabled = true;
                if (btnCancel) btnCancel.disabled = true;
                btnSubmit.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Sinkronisasi SAP...';

                const formData = new FormData(syncForm);

                fetch(syncForm.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => {
                    return response.json().then(data => {
                        return { ok: response.ok, status: response.status, data: data };
                    });
                })
                .then(res => {
                    btnSubmit.disabled = false;
                    if (btnCancel) btnCancel.disabled = false;
                    btnSubmit.innerHTML = originalBtnHtml;

                    // Tutup modal form sync
                    const syncModalEl = document.getElementById('syncModal');
                    const syncModalInstance = bootstrap.Modal.getInstance(syncModalEl) || new bootstrap.Modal(syncModalEl);
                    syncModalInstance.hide();

                    if (res.ok && res.data.status === 'success') {
                        // Update teks terakhir sinkron di header card
                        if (res.data.last_sync) {
                            const lastSyncEl = document.getElementById('displayLastSync');
                            if (lastSyncEl) {
                                lastSyncEl.innerText = res.data.last_sync;
                            }
                            const syncTimeEl = document.getElementById('syncSuccessTime');
                            if (syncTimeEl) {
                                syncTimeEl.innerText = res.data.last_sync;
                            }
                        }

                        // Update pesan modal sukses
                        const msgEl = document.getElementById('syncSuccessMessageText');
                        if (msgEl && res.data.message) {
                            msgEl.innerText = res.data.message;
                        }

                        // Tampilkan modal sukses
                        const successModalEl = document.getElementById('modalSyncSuccess');
                        const successModal = new bootstrap.Modal(successModalEl);
                        successModal.show();
                    } else {
                        const message = (res.data && res.data.message) ? res.data.message : 'Terjadi kesalahan saat sinkronisasi.';
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: (res.data && res.data.status === 'info') ? 'info' : 'error',
                                title: (res.data && res.data.status === 'info') ? 'Informasi' : 'Sinkronisasi Gagal',
                                text: message,
                                confirmButtonColor: '#00878a'
                            });
                        } else {
                            alert(message);
                        }
                    }
                })
                .catch(err => {
                    btnSubmit.disabled = false;
                    if (btnCancel) btnCancel.disabled = false;
                    btnSubmit.innerHTML = originalBtnHtml;
                    console.error('Sync Error:', err);
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Koneksi Bermasalah',
                            text: 'Gagal menghubungi server atau timeout saat mengambil data dari SAP.',
                            confirmButtonColor: '#00878a'
                        });
                    } else {
                        alert('Gagal menghubungi server atau timeout saat mengambil data dari SAP.');
                    }
                });
            });
        }

        @if (session('success'))
            const successModalEl = document.getElementById('modalSyncSuccess');
            if (successModalEl) {
                const successModal = new bootstrap.Modal(successModalEl);
                successModal.show();
            }
        @endif
    });
</script>
@endpush