@extends('layouts.apex')

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

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Mutasi Stok</h1>
            <p class="page-header-subtitle">Transfer dan mutasi stok barang</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#mutasiModal">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Mutasi Baru
        </button>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div class="grid grid-cols-3" style="margin-bottom: 2rem;">
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-primary">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Total Mutasi</div>
                        <div class="summary-value" id="totalMutasi">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-success">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Total Masuk</div>
                        <div class="summary-value" id="totalMasuk">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-danger">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Total Keluar</div>
                        <div class="summary-value" id="totalKeluar">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Riwayat Mutasi Stok</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="mutasiTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>No. Bukti</th>
                            <th>Tanggal</th>
                            <th>Barang</th>
                            <th>Tipe</th>
                            <th>Dari/Tujuan</th>
                            <th>Jenis</th>
                            <th>Qty</th>
                            <th>Dibuat Oleh</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Mutasi Modal -->
<div id="mutasiModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="mutasiForm" action="{{ route('mutasi-stok.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Mutasi Stok Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="grid grid-cols-2" style="gap: 1rem;">
                        <div class="form-group">
                            <label class="form-label">Tanggal *</label>
                            <input type="date" name="tanggal" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Jenis Mutasi *</label>
                            <select name="jenis" class="form-control form-select" required>
                                <option value="">Pilih Jenis</option>
                                <option value="PEMAKAIAN SENDIRI">Pemakaian Sendiri</option>
                                <option value="TRANSFER">Transfer</option>
                                <option value="ADJUSTMENT">Adjustment</option>
                                <option value="PENYESUAIAN">Penyesuaian</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Barang *</label>
                        <select name="barang" class="form-control form-select" required>
                            <option value="">Pilih Barang</option>
                            @foreach($barangs as $barang)
                                <option value="{{ $barang->kode }}">{{ $barang->kode }} - {{ $barang->nama }} ({{ $barang->satuanRel->nama ?? 'KG' }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Tipe *</label>
                        <select name="tipe" class="form-control form-select" required>
                            <option value="">Pilih Tipe</option>
                            <option value="MASUK">MASUK</option>
                            <option value="KELUAR">KELUAR</option>
                        </select>
                    </div>

                    <div class="grid grid-cols-2" style="gap: 1rem;">
                        <div class="form-group">
                            <label class="form-label">Qty *</label>
                            <input type="number" name="qty" class="form-control" step="0.01" min="0.01" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Kolam (Opsional)</label>
                            <select name="kolam" class="form-control form-select">
                                <option value="">Pilih Kolam</option>
                                @foreach($kolams as $kolam)
                                    <option value="{{ $kolam }}">{{ $kolam }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-2" style="gap: 1rem;">
                        <div class="form-group">
                            <label class="form-label">Dari</label>
                            <input type="text" name="dari" class="form-control" placeholder="Mis: Gudang 01">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Tujuan</label>
                            <input type="text" name="tujuan" class="form-control" placeholder="Mis: Kolam A01">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    const mutasiTable = $('#mutasiTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        ajax: {
            url: '{{ route("mutasi-stok.data") }}',
            error: function(xhr, error, thrown) {
                console.log('DataTables error:', error, thrown, xhr);
                alert('Error loading data: ' + (xhr.responseJSON?.message || 'Unknown error'));
            },
            dataSrc: function(json) {
                // Update summary cards
                $('#totalMutasi').text(json.recordsTotal);
                // Calculate totals from data
                let totalMasuk = 0;
                let totalKeluar = 0;
                if (json.data) {
                    json.data.forEach(function(item) {
                        if (item.tipe === 'MASUK') totalMasuk++;
                        else totalKeluar++;
                    });
                }
                $('#totalMasuk').text(totalMasuk);
                $('#totalKeluar').text(totalKeluar);
                return json.data;
            }
        },
        columns: [
            { data: 'no_bukti' },
            { data: 'tanggal_format' },
            { data: 'barang_nama' },
            { data: 'tipe_badge' },
            { data: 'dari_tujuan' },
            { data: 'jenis' },
            { data: 'qty_format' },
            { data: 'pembuat' }
        ],
        order: [[1, 'desc']],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.7/i18n/id.json'
        }
    });

    // Update "Dari/Tujuan" based on Tipe
    $('select[name="tipe"]').change(function() {
        if ($(this).val() === 'MASUK') {
            $('input[name="dari"]').prop('required', true);
            $('input[name="tujuan"]').prop('required', false);
        } else if ($(this).val() === 'KELUAR') {
            $('input[name="dari"]').prop('required', false);
            $('input[name="tujuan"]').prop('required', true);
        }
    });

    $('#mutasiForm').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#mutasiModal').modal('hide');
                mutasiTable.ajax.reload(null, false);
                showAlert('success', 'Mutasi stok berhasil disimpan!');
            },
            error: function(xhr) {
                showAlert('error', xhr.responseJSON?.message || 'Terjadi kesalahan!');
            }
        });
    });
});

function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const alert = $(`
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `);
    $('.page-body').prepend(alert);
    setTimeout(() => alert.alert('close'), 5000);
}
</script>
@endpush
@endsection