@extends('template.desktop.app')

@section('title', 'Penyesuaian Stok')

@section('content')
    <div class="row match-height">
        <div class="col-md-6 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Penyesuaian Stok</h4>
                </div>
                <div class="card-body">
                     <div id="alert-container"></div>
                    <form id="adjustment-form">
                        @csrf
                        <input type="hidden" name="warehouse_id" id="warehouse-id-input">

                        <div class="mb-1">
                            <label class="form-label">Gudang Terpilih</label>
                            <input type="text" id="warehouse-name-display" class="form-control" readonly
                                placeholder="Belum ada gudang dipilih">
                        </div>

                        <div class="mb-1">
                            <label class="form-label">Jenis Penyesuaian</label>
                            <select name="adjustment_type" class="form-select" required>
                                <option value="in">Tambah (Masuk)</option>
                                <option value="out">Kurang (Keluar)</option>
                            </select>
                        </div>

                        <div class="mb-1">
                            <label class="form-label">Jumlah</label>
                            <input type="number" name="quantity" class="form-control" min="1" required>
                        </div>

                        <div class="mb-1">
                            <label class="form-label">Alasan</label>
                            <textarea name="reason" class="form-control" placeholder="Tuliskan alasan penyesuaian..."></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary">Simpan Penyesuaian</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4>Daftar Gudang</h4>
                    <div class="d-flex align-items-center gap-1">
                        <input type="text" id="search-input" class="form-control" placeholder="Cari gudang...">
                    </div>
                </div>
                <div class="table-responsive text-nowrap">
                    <table class="table" id="warehouse-table">
                        <thead>
                            <tr>
                                <th data-sort="code">
                                    Kode <i class="sort-icon ti tabler-arrows-sort" style="font-size: inherit;"></i>
                                </th>
                                <th data-sort="name">
                                    Nama Gudang <i class="sort-icon ti tabler-arrows-sort" style="font-size: inherit;"></i>
                                </th>
                                <th data-sort="type">
                                    Tipe <i class="sort-icon ti tabler-arrows-sort" style="font-size: inherit;"></i>
                                </th>
                                <th data-sort="stock">
                                    Stok <i class="sort-icon ti tabler-arrows-sort" style="font-size: inherit;"></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                        </tbody>
                    </table>

                    <div class="d-flex justify-content-between align-items-center mt-2 p-5">
                        <span id="pagination-info">Menampilkan 0-0 dari 0</span>
                        <ul class="pagination pagination-sm mb-0" id="pagination"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        let currentPage = 1;
        let searchQuery = '';
        let selectedWarehouseId = null;
        let debounceTimeout = null;

        let sortBy = 'id';
        let sortDir = 'desc';

        function showSkeleton() {
            const tbody = document.querySelector('#warehouse-table tbody');
            tbody.innerHTML = '';
            for (let i = 0; i < 5; i++) {
                tbody.innerHTML += `
                <tr>
                    <td colspan="4">
                        <div class="placeholder-glow">
                            <span class="placeholder col-12"></span>
                        </div>
                    </td>
                </tr>
            `;
            }
        }

        function fetchWarehouses(page = 1) {
            showSkeleton();
            axios.get("{{ route('admin.stock.adjustments.data') }}", {
                params: {
                    page: page,
                    search: searchQuery,
                    sort_by: sortBy,
                    sort_dir: sortDir
                }
            }).then(res => {
                const data = res.data;
                renderTable(data.data);
                renderPagination(data.current_page, data.last_page, data.total, data.from, data.to);
                updateSortIndicators();
            }).catch(() => {
                const tbody = document.querySelector('#warehouse-table tbody');
                tbody.innerHTML = `<tr><td colspan="4" class="text-center text-danger">Gagal memuat data</td></tr>`;
            });
        }

        function renderTable(items) {
            const tbody = document.querySelector('#warehouse-table tbody');
            tbody.innerHTML = '';
            if (items.length === 0) {
                tbody.innerHTML = `<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>`;
                return;
            }
            items.forEach(wh => {
                const row = document.createElement('tr');
                row.innerHTML = `
                <td>${wh.code}</td>
                <td>${wh.name}</td>
                <td>${wh.type}</td>
                <td>${wh.stock}</td>
            `;
                row.style.cursor = 'pointer';
                row.addEventListener('click', function() {
                    document.querySelectorAll('#warehouse-table tbody tr').forEach(r => r.classList.remove(
                        'table-active'));
                    this.classList.add('table-active');
                    selectedWarehouseId = wh.id;
                    document.getElementById('warehouse-id-input').value = wh.id;
                    document.getElementById('warehouse-name-display').value = `${wh.code} - ${wh.name}`;
                });
                tbody.appendChild(row);
            });
        }

        function renderPagination(current, totalPages, totalItems, fromItem, toItem) {
            const pagination = document.getElementById('pagination');
            const paginationInfoSpan = document.getElementById('pagination-info');
            pagination.innerHTML = '';
            paginationInfoSpan.textContent = `Menampilkan ${fromItem}-${toItem} dari ${totalItems}`;

            pagination.innerHTML += `
            <li class="page-item ${current === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="1">&laquo;</a>
            </li>
        `;

            pagination.innerHTML += `
            <li class="page-item ${current === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${current - 1}">&lt;</a>
            </li>
        `;

            if (totalPages <= 7) {
                for (let i = 1; i <= totalPages; i++) {
                    const active = i === current ? 'active' : '';
                    pagination.innerHTML += `
                    <li class="page-item ${active}">
                        <a class="page-link" href="#" data-page="${i}">${i}</a>
                    </li>
                `;
                }
            } else {
                pagination.innerHTML += `
                <li class="page-item ${current === 1 ? 'active' : ''}">
                    <a class="page-link" href="#" data-page="1">1</a>
                </li>
            `;

                if (current > 3) {
                    pagination.innerHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }

                let startPage = Math.max(2, current - 1);
                let endPage = Math.min(totalPages - 1, current + 1);

                for (let i = startPage; i <= endPage; i++) {
                    const active = i === current ? 'active' : '';
                    pagination.innerHTML += `
                    <li class="page-item ${active}">
                        <a class="page-link" href="#" data-page="${i}">${i}</a>
                    </li>
                `;
                }

                if (current < totalPages - 2) {
                    pagination.innerHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }

                pagination.innerHTML += `
                <li class="page-item ${current === totalPages ? 'active' : ''}">
                    <a class="page-link" href="#" data-page="${totalPages}">${totalPages}</a>
                </li>
            `;
            }

            // Next
            pagination.innerHTML += `
            <li class="page-item ${current === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${current + 1}">&gt;</a>
            </li>
        `;

            // Last
            pagination.innerHTML += `
            <li class="page-item ${current === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${totalPages}">&raquo;</a>
            </li>
        `;

            pagination.querySelectorAll('a[data-page]').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetPage = parseInt(this.getAttribute('data-page'));
                    if (!isNaN(targetPage) && targetPage > 0 && targetPage <= totalPages) {
                        currentPage = targetPage;
                        fetchWarehouses(targetPage);
                    }
                });
            });
        }

        function showAlert(type, message, containerSelector) {
            const container = document.querySelector(containerSelector);
            const existingAlerts = container.querySelectorAll('.alert');
            existingAlerts.forEach(a => a.remove());

            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show position-relative`;
            alertDiv.role = 'alert';
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                <div class="progress position-absolute bottom-0 start-0 w-100" style="height: 3px;">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
                </div>
            `;
            container.prepend(alertDiv);

            const progressBar = alertDiv.querySelector('.progress-bar');
            let width = 100;
            const interval = 50;
            const duration = 5000;
            const decrement = (interval / duration) * 100;

            const progressInterval = setInterval(() => {
                width -= decrement;
                if (width <= 0) {
                    clearInterval(progressInterval);
                    alertDiv.remove();
                } else {
                    progressBar.style.width = width + '%';
                }
            }, interval);
        }

        function submitAdjustment(e) {
            e.preventDefault();
            if (!selectedWarehouseId) {
                showAlert('danger', 'Pilih warehouse terlebih dahulu dari tabel', '#adjustment-form');
                return;
            }
            const form = document.getElementById('adjustment-form');
            const formData = new FormData(form);

            axios.post("{{ route('admin.stock.adjustments.store') }}", formData)
                .then(res => {
                    showAlert('success', res.data.message ?? 'Adjustment berhasil disimpan', '#adjustment-form');
                    form.reset();
                    selectedWarehouseId = null;
                    document.getElementById('warehouse-id-input').value = '';
                    document.getElementById('warehouse-name-display').value = '';
                    document.querySelectorAll('#warehouse-table tbody tr').forEach(r => r.classList.remove(
                        'table-active'));
                    fetchWarehouses(currentPage);
                })
                .catch(() => {
                    showAlert('danger', 'Terjadi kesalahan', '#adjustment-form');
                });
        }

        function updateSortIndicators() {
            document.querySelectorAll('#warehouse-table thead th[data-sort]').forEach(th => {
                const field = th.getAttribute('data-sort');
                const icon = th.querySelector('.sort-icon');
                icon.className = 'sort-icon ti tabler-arrows-sort';
                icon.style.fontSize = 'inherit';

                if (field === sortBy) {
                    if (sortDir === 'asc') {
                        icon.className = 'sort-icon ti tabler-arrow-narrow-up';
                    } else {
                        icon.className = 'sort-icon ti tabler-arrow-narrow-down';
                    }
                    icon.style.fontSize = 'inherit';
                }
            });
        }

        $(function() {
            $('#search-input').on('keyup', function() {
                clearTimeout(debounceTimeout);
                debounceTimeout = setTimeout(() => {
                    searchQuery = this.value;
                    fetchWarehouses(1);
                }, 400);
            });

            $('#refresh-btn').on('click', function() {
                fetchWarehouses(currentPage);
            });

            $('#adjustment-form').on('submit', submitAdjustment);

            document.querySelectorAll('#warehouse-table thead th[data-sort]').forEach(th => {
                th.style.cursor = 'pointer';
                th.addEventListener('click', function() {
                    const field = this.getAttribute('data-sort');
                    if (sortBy === field) {
                        sortDir = sortDir === 'asc' ? 'desc' : 'asc';
                    } else {
                        sortBy = field;
                        sortDir = 'asc';
                    }
                    fetchWarehouses(1);
                });
            });

            fetchWarehouses();
        });
    </script>
@endpush