@extends('layouts.layoutMaster')

@section('title', 'Laporan Batch')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection

@section('content')
<!-- Batch Report Overview Cards -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">{{ $totalBatches }}</h5>
                        <p class="text-muted mb-0">Total Batch</p>
                    </div>
                    <div class="avatar bg-primary-subtle p-2">
                        <i class="ri-stack-line fs-3 text-primary"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">Rp {{ number_format($totalValue, 0, ',', '.') }}</h5>
                        <p class="text-muted mb-0">Nilai Total</p>
                    </div>
                    <div class="avatar bg-success-subtle p-2">
                        <i class="ri-money-dollar-circle-line fs-3 text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">{{ $expiredBatches }}</h5>
                        <p class="text-muted mb-0">Batch Kadaluarsa</p>
                    </div>
                    <div class="avatar bg-danger-subtle p-2">
                        <i class="ri-error-warning-line fs-3 text-danger"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">{{ $expiringBatches }}</h5>
                        <p class="text-muted mb-0">Segera Kadaluarsa</p>
                    </div>
                    <div class="avatar bg-warning-subtle p-2">
                        <i class="ri-timer-line fs-3 text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filters and Actions -->
<div class="card mb-4">
    <div class="card-header">
        <h5 class="card-title mb-0">Filter & Aksi</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('batch.report') }}" method="GET" class="row g-3">
            <div class="col-md-3">
                <label for="warehouse_id" class="form-label">Gudang</label>
                <select id="warehouse_id" name="warehouse_id" class="form-select select2">
                    <option value="">Semua Gudang</option>
                    @foreach($warehouses as $warehouse)
                        <option value="{{ $warehouse->id }}" {{ request('warehouse_id') == $warehouse->id ? 'selected' : '' }}>
                            {{ $warehouse->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="ingredient_id" class="form-label">Bahan</label>
                <select id="ingredient_id" name="ingredient_id" class="form-select select2">
                    <option value="">Semua Bahan</option>
                    @foreach($ingredients as $ingredient)
                        <option value="{{ $ingredient->id }}" {{ request('ingredient_id') == $ingredient->id ? 'selected' : '' }}>
                            {{ $ingredient->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label for="expiry_status" class="form-label">Status Kadaluarsa</label>
                <select id="expiry_status" name="expiry_status" class="form-select">
                    <option value="all" {{ request('expiry_status', 'all') == 'all' ? 'selected' : '' }}>Semua</option>
                    <option value="active" {{ request('expiry_status') == 'active' ? 'selected' : '' }}>Aktif</option>
                    <option value="expiring" {{ request('expiry_status') == 'expiring' ? 'selected' : '' }}>Segera Kadaluarsa</option>
                    <option value="expired" {{ request('expiry_status') == 'expired' ? 'selected' : '' }}>Kadaluarsa</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="sort_by" class="form-label">Urutkan</label>
                <select id="sort_by" name="sort_by" class="form-select">
                    <option value="expiry" {{ request('sort_by', 'expiry') == 'expiry' ? 'selected' : '' }}>Tanggal Kadaluarsa</option>
                    <option value="quantity" {{ request('sort_by') == 'quantity' ? 'selected' : '' }}>Jumlah</option>
                    <option value="price" {{ request('sort_by') == 'price' ? 'selected' : '' }}>Harga</option>
                    <option value="name" {{ request('sort_by') == 'name' ? 'selected' : '' }}>Nama Bahan</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="sort_dir" class="form-label">Arah</label>
                <select id="sort_dir" name="sort_dir" class="form-select">
                    <option value="asc" {{ request('sort_dir', 'asc') == 'asc' ? 'selected' : '' }}>Naik</option>
                    <option value="desc" {{ request('sort_dir') == 'desc' ? 'selected' : '' }}>Turun</option>
                </select>
            </div>
            <div class="col-12 d-flex justify-content-between align-items-center mt-4">
                <div>
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="ri-filter-line me-1"></i> Filter
                    </button>
                    <a href="{{ route('batch.report') }}" class="btn btn-outline-secondary">
                        <i class="ri-refresh-line me-1"></i> Reset
                    </a>
                </div>
                <div>
                    <button type="button" class="btn btn-outline-success" id="exportButton">
                        <i class="ri-file-excel-line me-1"></i> Export Excel
                    </button>
                    <button type="button" class="btn btn-outline-primary" id="printButton">
                        <i class="ri-printer-line me-1"></i> Cetak
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Batch Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">Daftar Batch</h5>
        <div class="badge bg-primary">{{ $batches->total() }} Total</div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover border-top">
            <thead>
                <tr>
                    <th>Bahan</th>
                    <th>Batch ID</th>
                    <th>Gudang</th>
                    <th>Stok</th>
                    <th>Harga Unit</th>
                    <th>Nilai Total</th>
                    <th>Kadaluarsa</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($batches as $batch)
                <tr>
                    <td>{{ $batch->ingredient->name ?? 'N/A' }}</td>
                    <td>{{ $batch->id }}</td>
                    <td>{{ $batch->warehouse->name ?? 'N/A' }}</td>
                    <td>{{ number_format($batch->remaining_stock, 2) }}</td>
                    <td>Rp {{ number_format($batch->unit_price, 0, ',', '.') }}</td>
                    <td>Rp {{ number_format($batch->remaining_stock * $batch->unit_price, 0, ',', '.') }}</td>
                    <td>
                        @if($batch->expiry_date)
                            {{ \Carbon\Carbon::parse($batch->expiry_date)->format('d M Y') }}
                        @else
                            N/A
                        @endif
                    </td>
                    <td>
                        @php
                            $now = now();
                            $expiryDate = $batch->expiry_date ? \Carbon\Carbon::parse($batch->expiry_date) : null;

                            if (!$expiryDate) {
                                $status = 'active';
                                $statusText = 'Aktif';
                                $badgeClass = 'bg-success';
                            } elseif ($expiryDate->isPast()) {
                                $status = 'expired';
                                $statusText = 'Kadaluarsa';
                                $badgeClass = 'bg-danger';
                            } elseif ($expiryDate->diffInDays($now) <= 30) {
                                $status = 'expiring';
                                $statusText = 'Segera Kadaluarsa (' . $expiryDate->diffInDays($now) . ' hari)';
                                $badgeClass = 'bg-warning';
                            } else {
                                $status = 'active';
                                $statusText = 'Aktif';
                                $badgeClass = 'bg-success';
                            }
                        @endphp
                        <span class="badge {{ $badgeClass }}">{{ $statusText }}</span>
                    </td>
                    <td>
                        <div class="dropdown">
                            <button type="button" class="btn btn-sm dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                                <i class="ri-more-2-fill"></i>
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="{{ route('ingredient.detail', $batch->ingredient_id) }}">
                                    <i class="ri-eye-line me-1"></i> Detail Bahan
                                </a>
                                <a class="dropdown-item" href="javascript:void(0);" onclick="viewBatchHistory({{ $batch->id }})">
                                    <i class="ri-history-line me-1"></i> Riwayat Batch
                                </a>
                                @if($status === 'expired' || $status === 'expiring')
                                <a class="dropdown-item text-danger" href="javascript:void(0);" onclick="markForDestruction({{ $batch->id }})">
                                    <i class="ri-delete-bin-line me-1"></i> Tandai untuk Dimusnahkan
                                </a>
                                @endif
                            </div>
                        </div>
                    </td>
                </tr>
                @endforeach

                @if($batches->count() == 0)
                <tr>
                    <td colspan="9" class="text-center py-3">Tidak ada data batch ditemukan</td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <div class="d-flex justify-content-between align-items-center">
            <p class="mb-0">Menampilkan {{ $batches->firstItem() ?? 0 }} hingga {{ $batches->lastItem() ?? 0 }} dari {{ $batches->total() }} batch</p>
            <div>{{ $batches->withQueryString()->links('pagination::bootstrap-4') }}</div>
        </div>
    </div>
</div>

<!-- Batch History Modal -->
<div class="modal fade" id="batchHistoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Riwayat Batch</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menandai batch ini untuk dimusnahkan?</p>
                <p class="text-danger">Tindakan ini akan mengeluarkan batch dari persediaan dan mencatat penghapusan nilai.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDestructionButton">Tandai untuk Dimusnahkan</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Access SweetAlert2 from the global scope
    const Swal = window.Swal;

    // Initialize Select2
    $('.select2').select2();

    // Initialize Datatables
    const table = $('.datatables-basic').DataTable({
        responsive: true,
        dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center gap-2"l<"csv-export btn btn-primary btn-sm mx-2"><"pdf-export btn btn-secondary btn-sm">>><"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
    });

    // Print functionality
    document.getElementById('printButton').addEventListener('click', function() {
        window.print();
    });

    // Export functionality
    document.getElementById('exportButton').addEventListener('click', function() {
        // Create form to export data with all current filters
        const exportForm = document.createElement('form');
        exportForm.method = 'GET';
        exportForm.action = '{{ route("batch.report") }}/export';

        // Add all current query parameters
        const params = new URLSearchParams(window.location.search);
        params.forEach((value, key) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = value;
            exportForm.appendChild(input);
        });

        document.body.appendChild(exportForm);
        exportForm.submit();
        document.body.removeChild(exportForm);
    });
});

// Function to view batch history
function viewBatchHistory(batchId) {
    const modal = new bootstrap.Modal(document.getElementById('batchHistoryModal'));
    const modalBody = document.querySelector('#batchHistoryModal .modal-body');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Show loading spinner
    modalBody.innerHTML = `
        <div class="d-flex justify-content-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    `;

    modal.show();

    // Fetch batch history data
    fetch(`/web-api/batch/${batchId}/history`, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'X-Requested-With': 'XMLHttpRequest'
        },
        credentials: 'include'
    })
    .then(response => {
        if (!response.ok) {
            if (response.status === 401) {
                // Unauthorized - likely session expired
                return Promise.reject({
                    success: false,
                    message: 'Sesi anda telah berakhir. Silakan login kembali.'
                });
            }
            return response.text().then(text => {
                try {
                    // Try to parse as JSON first
                    return Promise.reject(JSON.parse(text));
                } catch (e) {
                    // If not JSON, return text with error status
                    return Promise.reject({
                        success: false,
                        message: `HTTP error! Status: ${response.status}, Response: ${text.substring(0, 100)}...`
                    });
                }
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Create timeline view of batch history
            let html = `
                <div class="p-2">
                    <h6>Detail Batch #${batchId}</h6>
                    <div class="mb-3">
                        <p class="mb-1"><strong>Bahan:</strong> ${data.batch.ingredient_name}</p>
                        <p class="mb-1"><strong>Gudang:</strong> ${data.batch.warehouse_name}</p>
                        <p class="mb-1"><strong>Stok Awal:</strong> ${data.batch.quantity}</p>
                        <p class="mb-1"><strong>Stok Saat Ini:</strong> ${data.batch.remaining_stock}</p>
                        <p class="mb-1"><strong>Harga Unit:</strong> Rp ${new Intl.NumberFormat('id-ID').format(data.batch.unit_price)}</p>
                        <p class="mb-0"><strong>Kadaluarsa:</strong> ${data.batch.expiry_date || 'N/A'}</p>
                    </div>

                    <h6 class="mt-4">Riwayat Pergerakan</h6>
                    <ul class="timeline mt-3">
            `;

            if (data.movements && data.movements.length > 0) {
                data.movements.forEach(movement => {
                    // Determine icon and color based on movement type
                    let icon, color;
                    switch(movement.movement_type) {
                        case 'purchase':
                            icon = 'ri-shopping-cart-2-line';
                            color = 'success';
                            break;
                        case 'transfer_in':
                            icon = 'ri-arrow-right-circle-line';
                            color = 'info';
                            break;
                        case 'transfer_out':
                            icon = 'ri-arrow-left-circle-line';
                            color = 'warning';
                            break;
                        case 'adjustment':
                            icon = 'ri-scales-3-line';
                            color = 'primary';
                            break;
                        case 'sell':
                        case 'usage':
                            icon = 'ri-store-2-line';
                            color = 'danger';
                            break;
                        default:
                            icon = 'ri-record-circle-line';
                            color = 'secondary';
                    }

                    html += `
                        <li class="timeline-item">
                            <span class="timeline-point timeline-point-${color}">
                                <i class="${icon}"></i>
                            </span>
                            <div class="timeline-event">
                                <div class="timeline-header">
                                    <h6 class="mb-0">${movement.movement_type_formatted}</h6>
                                    <small class="text-muted">${movement.created_at_formatted}</small>
                                </div>
                                <p class="mb-0">Kuantitas: ${movement.quantity > 0 ? '+' : ''}${movement.quantity}</p>
                                ${movement.reference ? `<p class="mb-0">Referensi: ${movement.reference}</p>` : ''}
                            </div>
                        </li>
                    `;
                });
            } else {
                html += `
                    <li class="text-center py-3">
                        <p class="text-muted mb-0">Tidak ada data pergerakan untuk batch ini</p>
                    </li>
                `;
            }

            html += `
                    </ul>
                </div>
            `;

            modalBody.innerHTML = html;
        } else {
            modalBody.innerHTML = `
                <div class="alert alert-danger" role="alert">
                    Gagal memuat data: ${data.message || 'Terjadi kesalahan'}
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        modalBody.innerHTML = `
            <div class="alert alert-danger" role="alert">
                <h5>Gagal memuat data</h5>
                <p>${error.message || 'Terjadi kesalahan saat mengambil data dari server'}</p>
            </div>
        `;
    });
}

// Function to mark batch for destruction
function markForDestruction(batchId) {
    const modal = new bootstrap.Modal(document.getElementById('confirmationModal'));
    const confirmButton = document.getElementById('confirmDestructionButton');

    // Store batch ID in the confirm button
    confirmButton.dataset.batchId = batchId;

    // Show confirmation modal
    modal.show();

    // Handle confirmation
    confirmButton.addEventListener('click', function() {
        const batchId = this.dataset.batchId;

        // Disable button and show loading state
        confirmButton.disabled = true;
        confirmButton.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Memproses...`;

        // Send request to mark batch for destruction
        fetch(`/web-api/batch/${batchId}/mark-for-destruction`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'include'
        })
        .then(response => {
            if (!response.ok) {
                if (response.status === 401) {
                    // Unauthorized - likely session expired
                    modal.hide();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Sesi Berakhir',
                        text: 'Sesi anda telah berakhir. Silakan login kembali.',
                        confirmButtonText: 'Login'
                    }).then(() => {
                        window.location.href = '/login';
                    });
                    return Promise.reject({
                        success: false,
                        message: 'Sesi anda telah berakhir'
                    });
                }
                return response.text().then(text => {
                    try {
                        // Try to parse as JSON first
                        return Promise.reject(JSON.parse(text));
                    } catch (e) {
                        // If not JSON, return text with error status
                        return Promise.reject({
                            success: false,
                            message: `HTTP error! Status: ${response.status}, Response: ${text.substring(0, 100)}...`
                        });
                    }
                });
            }
            return response.json();
        })
        .then(data => {
            // Hide modal
            modal.hide();

            if (data.success) {
                // Show success message
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: 'Batch berhasil ditandai untuk dimusnahkan',
                    showConfirmButton: false,
                    timer: 1500
                }).then(() => {
                    // Reload page
                    window.location.reload();
                });
            } else {
                // Show error message
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: data.message || 'Terjadi kesalahan saat menandai batch untuk dimusnahkan'
                });
            }
        })
        .catch(error => {
            // Hide modal
            modal.hide();
            console.error('Error:', error);

            // Show error message
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: error.message || 'Terjadi kesalahan saat menandai batch untuk dimusnahkan',
                footer: error.stack ? `<small>${error.stack}</small>` : ''
            });
        })
        .finally(() => {
            // Reset button state
            confirmButton.disabled = false;
            confirmButton.innerHTML = 'Tandai untuk Dimusnahkan';
        });
    }, { once: true }); // Ensure event listener is only called once
}
</script>
@endsection