@extends('layouts.layoutMaster')

@section('title', 'Laporan Rekonsiliasi 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/apex-charts/apex-charts.scss',
  'resources/assets/vendor/libs/flatpickr/flatpickr.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/apex-charts/apexcharts.js',
  'resources/assets/vendor/libs/flatpickr/flatpickr.js',
  'resources/assets/vendor/libs/moment/moment.js'
])
@endsection

@section('content')
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Laporan Rekonsiliasi Stok</h5>
        <button class="btn btn-primary btn-sm" id="printReport">
            <i class="ri-printer-line me-1"></i> Print Laporan
        </button>
    </div>
    <div class="card-body">
        <!-- Filter Section -->
        <form id="reconciliationFilterForm" class="mb-4">
            <div class="card border">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label for="start_date" class="form-label">Tanggal Mulai</label>
                            <input type="date" class="form-control flatpickr-date" id="start_date" name="start_date" value="{{ $startDate }}">
                        </div>
                        <div class="col-md-3">
                            <label for="end_date" class="form-label">Tanggal Akhir</label>
                            <input type="date" class="form-control flatpickr-date" id="end_date" name="end_date" value="{{ $endDate }}">
                        </div>
                        <div class="col-md-3">
                            <label for="warehouse_id" class="form-label">Gudang</label>
                            <select class="form-select" id="warehouse_id" name="warehouse_id">
                                <option value="">Semua Gudang</option>
                                @foreach($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}" {{ $warehouseId == $warehouse->id ? 'selected' : '' }}>
                                        {{ $warehouse->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="material_category" class="form-label">Kategori</label>
                            <select class="form-select" id="material_category" name="material_category">
                                <option value="">Semua Kategori</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category }}" {{ $materialCategory == $category ? 'selected' : '' }}>
                                        {{ ucfirst($category) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="text-end mt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-filter-3-line me-1"></i> Terapkan Filter
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- Summary Cards -->
        <div class="row g-3 mb-4">
            <div class="col-md-3">
                <div class="card border h-100">
                    <div class="card-body">
                        <h6 class="card-subtitle text-muted mb-2">Total Stock Opname</h6>
                        <h3 class="card-title mb-0">{{ $reconciliationSummary['total_opnames'] }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border h-100">
                    <div class="card-body">
                        <h6 class="card-subtitle text-muted mb-2">Item Disesuaikan</h6>
                        <h3 class="card-title mb-0">{{ $reconciliationSummary['total_adjusted_items'] }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border h-100 text-success">
                    <div class="card-body">
                        <h6 class="card-subtitle text-muted mb-2">Nilai Surplus</h6>
                        <h3 class="card-title mb-0">{{ number_format($reconciliationSummary['total_surplus_value'], 2, ',', '.') }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border h-100 text-danger">
                    <div class="card-body">
                        <h6 class="card-subtitle text-muted mb-2">Nilai Defisit</h6>
                        <h3 class="card-title mb-0">{{ number_format($reconciliationSummary['total_deficit_value'], 2, ',', '.') }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- Chart for Adjustment Visualization -->
        <div class="row mb-4">
            <div class="col-md-8">
                <div class="card border">
                    <div class="card-header">
                        <h6 class="mb-0">Grafik Penyesuaian Stok</h6>
                    </div>
                    <div class="card-body">
                        <div id="adjustmentChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border h-100">
                    <div class="card-header">
                        <h6 class="mb-0">Dampak Finansial Bersih</h6>
                    </div>
                    <div class="card-body d-flex flex-column justify-content-center align-items-center">
                        <h3 class="mb-3 {{ $reconciliationSummary['net_adjustment_value'] >= 0 ? 'text-success' : 'text-danger' }}">
                            {{ number_format($reconciliationSummary['net_adjustment_value'], 2, ',', '.') }}
                        </h3>
                        <div class="d-flex align-items-center">
                            <span class="badge {{ $reconciliationSummary['net_adjustment_value'] >= 0 ? 'bg-success' : 'bg-danger' }} p-2">
                                {{ $reconciliationSummary['net_adjustment_value'] >= 0 ? 'Surplus' : 'Defisit' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Detailed Report Table -->
        <div class="card border">
            <div class="card-header">
                <h6 class="mb-0">Detail Rekonsiliasi</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover datatables-reconciliation">
                        <thead class="table-light">
                            <tr>
                                <th>Tanggal Opname</th>
                                <th>Referensi</th>
                                <th>Gudang</th>
                                <th>Bahan</th>
                                <th>Stok Sistem</th>
                                <th>Stok Fisik</th>
                                <th>Selisih</th>
                                <th>Harga Satuan</th>
                                <th>Nilai Penyesuaian</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($adjustmentDetails as $detail)
                            <tr>
                                <td>{{ $detail['opname_date'] }}</td>
                                <td>{{ $detail['reference_no'] }}</td>
                                <td>{{ $detail['warehouse'] }}</td>
                                <td>{{ $detail['ingredient'] }}</td>
                                <td>{{ $detail['system_quantity'] }}</td>
                                <td>{{ $detail['physical_quantity'] }}</td>
                                <td class="{{ $detail['difference'] > 0 ? 'text-success' : 'text-danger' }}">
                                    {{ $detail['difference'] }}
                                </td>
                                <td>{{ number_format($detail['unit_price'], 2, ',', '.') }}</td>
                                <td class="{{ $detail['adjustment_value'] > 0 ? 'text-success' : 'text-danger' }}">
                                    {{ number_format($detail['adjustment_value'], 2, ',', '.') }}
                                </td>
                            </tr>
                            @endforeach

                            @if(count($adjustmentDetails) == 0)
                            <tr>
                                <td colspan="9" class="text-center">Tidak ada data penyesuaian untuk periode ini</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize DataTable
    $('.datatables-reconciliation').DataTable({
        responsive: true,
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
        language: {
            search: '',
            searchPlaceholder: 'Cari...',
            paginate: {
                previous: '<i class="ri-arrow-left-s-line"></i>',
                next: '<i class="ri-arrow-right-s-line"></i>'
            }
        },
        order: [[1, 'desc']] // Sort by date by default
    });

    // Initialize Flatpickr for date inputs
    $('.flatpickr-date').flatpickr({
        dateFormat: 'Y-m-d'
    });

    // Print report button
    document.getElementById('printReport').addEventListener('click', function() {
        window.print();
    });

    // Initialize the Adjustment Chart
    if (document.getElementById('adjustmentChart')) {
        var options = {
            chart: {
                type: 'bar',
                height: 300,
                stacked: true,
                toolbar: {
                    show: false
                }
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    borderRadius: 2
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            colors: ['#28c76f', '#ea5455'],
            series: [{
                name: 'Surplus',
                data: [{{ $reconciliationSummary['total_surplus_value'] }}]
            }, {
                name: 'Defisit',
                data: [{{ $reconciliationSummary['total_deficit_value'] }}]
            }],
            xaxis: {
                categories: ['Penyesuaian Stok'],
                labels: {
                    style: {
                        fontSize: '12px'
                    }
                }
            },
            yaxis: {
                title: {
                    text: 'Nilai (Rp)'
                }
            },
            fill: {
                opacity: 1
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return 'Rp ' + val.toLocaleString('id-ID')
                    }
                }
            }
        };

        var chart = new ApexCharts(document.querySelector("#adjustmentChart"), options);
        chart.render();
    }
});
</script>
@endsection