@extends('layouts.layoutMaster')

@section('title', 'Daftar Transfer Stok')

@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'
])
@endsection

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

@section('content')
<!-- Quick Actions Section -->
<div class="quick-actions-container mb-4">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title mb-3">Aksi Cepat</h5>
            <div class="d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-primary quick-action-btn" id="createTransferBtn">
                    <i class="ri-add-line me-1"></i> Transfer Baru
                </button>
                <button type="button" class="btn btn-outline-info quick-action-btn" id="checkStockBtn">
                    <i class="ri-search-line me-1"></i> Cek Stok
                </button>
                <button type="button" class="btn btn-outline-success quick-action-btn" id="batchReportBtn">
                    <i class="ri-file-chart-line me-1"></i> Laporan Batch
                </button>
                <button type="button" class="btn btn-outline-warning quick-action-btn" id="pendingTransfersBtn">
                    <i class="ri-time-line me-1"></i> Transfer Menunggu
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Daftar Transfer Stok</h5>
        <div class="d-flex gap-2">
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="transferFilterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="ri-filter-3-line me-1"></i> Filter
                </button>
                <ul class="dropdown-menu" aria-labelledby="transferFilterDropdown">
                    <li><a class="dropdown-item" href="#" data-filter="all">Semua Transfer</a></li>
                    <li><a class="dropdown-item" href="#" data-filter="Draft">Draft</a></li>
                    <li><a class="dropdown-item" href="#" data-filter="Proses">Dalam Proses</a></li>
                    <li><a class="dropdown-item" href="#" data-filter="Selesai">Selesai</a></li>
                </ul>
            </div>
            <button type="button" class="btn btn-primary" id="refreshTransfersBtn">
                <i class="ri-refresh-line me-1"></i> Refresh
            </button>
        </div>
    </div>
    <div class="card-datatable table-responsive">
        <table class="table datatables-transfers table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>No. Referensi</th>
                    <th>Status</th>
                    <th>Bahan</th>
                    <th>Gudang Asal</th>
                    <th>Gudang Tujuan</th>
                    <th>Jumlah Transfer</th>
                    <th>Tanggal Transfer</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
              @foreach($transfers as $transfer)
              <tr>
                  <td>{{$loop->index + 1}}</td>
                  <td>{{ $transfer->reference_no ?? '-' }}</td>
                  <td class="transfer-status">
                      @if($transfer->status == 'Draft')
                          <span class="badge bg-secondary">Draft</span>
                      @elseif($transfer->status == 'Proses')
                          <span class="badge bg-warning">Proses</span>
                      @elseif($transfer->status == 'Selesai')
                          <span class="badge bg-success">Selesai</span>
                      @else
                          <span class="badge bg-info">{{ ucfirst($transfer->status) }}</span>
                      @endif
                  </td>
                  <td>
                      @if($transfer->movements->isNotEmpty())
                      <ul class="mb-0 ps-3">
                        @foreach($transfer->movements as $movement)
                            <li>{{ $movement->ingredient->name }} - {{ number_format(abs($movement->quantity), 2) }}</li>
                        @endforeach
                    </ul>
                      @else
                          -
                      @endif
                  </td>
                  <td>{{ $transfer->fromWarehouse->name ?? '-' }}</td>
                  <td>{{ $transfer->toWarehouse->name ?? '-' }}</td>
                  <td>{{ $transfer->movements->count() }} item</td>
                  <td>{{ $transfer->created_at ? $transfer->created_at->format('d/m/Y H:i') : '-' }}</td>
                  <td>
                      <div class="d-inline-flex">
                          <button class="btn btn-sm btn-icon btn-text-primary rounded-pill view-transfer waves-effect me-1" data-id="{{ $transfer->id }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Lihat Detail">
                              <i class="ri-eye-line"></i>
                          </button>
                          @if(strtolower($transfer->status) != 'selesai')
                          <button class="btn btn-sm btn-icon btn-text-success rounded-pill complete-transfer waves-effect me-1" data-id="{{ $transfer->id }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Selesaikan Transfer">
                              <i class="ri-check-line"></i>
                          </button>
                          <button class="btn btn-sm btn-icon btn-text-danger rounded-pill delete-transfer waves-effect" data-id="{{ $transfer->id }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Hapus">
                              <i class="ri-delete-bin-line"></i>
                          </button>
                          @endif
                      </div>
                  </td>
              </tr>
          @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Detail Transfer Stok -->
<div class="modal fade" id="transferDetailModal" tabindex="-1" aria-labelledby="transferDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="transferDetailModalLabel">Detail Transfer Stok</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="transferDetails">
                <!-- Detail transfer stok akan diisi di sini oleh JavaScript -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" id="printTransferBtn">
                    <i class="ri-printer-line me-1"></i> Print
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Cek Stok Cepat -->
<div class="modal fade" id="quickStockCheckModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Cek Stok Cepat</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="quickWarehouseSelect" class="form-label">Pilih Gudang</label>
                    <select id="quickWarehouseSelect" class="form-select">
                        <option value="">-- Pilih Gudang --</option>
                        @foreach(\Modules\Stockist\Models\Warehouse::where('branch_id', auth()->user()->branch_id)->get() as $wh)
                            <option value="{{ $wh->id }}">{{ $wh->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label for="quickIngredientSearch" class="form-label">Cari Bahan</label>
                    <input type="text" id="quickIngredientSearch" class="form-control" placeholder="Ketik nama bahan...">
                </div>
                <div id="quickStockResult" class="border rounded p-3 bg-light" style="max-height: 200px; overflow-y: auto;">
                    <p class="text-muted mb-0">Hasil pencarian akan muncul di sini</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" id="checkStockSubmitBtn">Cek Stok</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('page-script')
@vite(['Modules/Stockist/resources/assets/js/stock-transfer.js'])
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize tooltips
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Quick Action Buttons
        document.getElementById('createTransferBtn').addEventListener('click', function() {
            window.location.href = "{{ route('stock.transfer.create') }}";
        });

        document.getElementById('checkStockBtn').addEventListener('click', function() {
            const quickStockModal = new bootstrap.Modal(document.getElementById('quickStockCheckModal'));
            quickStockModal.show();
        });

        document.getElementById('batchReportBtn').addEventListener('click', function() {
            // This could open a batch report modal or navigate to a report page
            window.location.href = "{{ route('batch.report') }}";
        });

        document.getElementById('pendingTransfersBtn').addEventListener('click', function() {
            // Filter to show only pending transfers
            $('.datatables-transfers').DataTable().column(2).search('Proses').draw();
        });

        // Refresh button
        document.getElementById('refreshTransfersBtn').addEventListener('click', function() {
            window.location.reload();
        });

        // Filter dropdown
        document.querySelectorAll('[data-filter]').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const filter = this.getAttribute('data-filter');

                if (filter === 'all') {
                    $('.datatables-transfers').DataTable().column(2).search('').draw();
                } else {
                    $('.datatables-transfers').DataTable().column(2).search(filter).draw();
                }
            });
        });

        // Quick stock check functionality
        document.getElementById('checkStockSubmitBtn').addEventListener('click', function() {
            const warehouseId = document.getElementById('quickWarehouseSelect').value;
            const searchQuery = document.getElementById('quickIngredientSearch').value;

            if (!warehouseId) {
                alert('Silakan pilih gudang terlebih dahulu');
                return;
            }

            const resultContainer = document.getElementById('quickStockResult');
            resultContainer.innerHTML = '<p class="text-center"><i class="ri-loader-4-line fa-spin"></i> Memuat data...</p>';

            // Call the API endpoint
            fetch(`/web-api/check-stock?warehouse_id=${warehouseId}&query=${searchQuery}`, {
                method: 'GET',
                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
                        resultContainer.innerHTML = `
                            <div class="alert alert-warning" role="alert">
                                <p>Sesi anda telah berakhir. Silakan login kembali.</p>
                                <a href="/login" class="btn btn-sm btn-warning mt-2">Login</a>
                            </div>
                        `;
                        return Promise.reject('Unauthorized');
                    }
                    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({
                                error: `HTTP error! Status: ${response.status}, Response: ${text.substring(0, 100)}...`
                            });
                        }
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.error) {
                    throw new Error(data.error);
                }

                if (Array.isArray(data) && data.length === 0) {
                    resultContainer.innerHTML = '<p class="text-muted">Tidak ada hasil ditemukan</p>';
                    return;
                }

                let html = '<ul class="list-group">';
                data.forEach(item => {
                    html += `
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            ${item.name}
                            <span class="badge bg-primary rounded-pill">${Number(item.quantity).toFixed(2)}</span>
                        </li>
                    `;
                });
                html += '</ul>';

                resultContainer.innerHTML = html;
            })
            .catch(error => {
                console.error('Error:', error);
                resultContainer.innerHTML = `
                    <div class="alert alert-danger" role="alert">
                        <strong>Error:</strong> ${error.message || error.error || 'Terjadi kesalahan saat memuat data'}
                    </div>
                `;
            });
        });
    });
</script>
@endsection