@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
@endpush

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Bricks Production Summary</h1>

    <div class="card">
        <div class="card mb-4">
            <div class="card-body">
                <form method="GET" id="filterForm" class="row g-3 align-items-end">
                    <div class="col-md-5">
                        <label for="start_date" class="form-label">Start Date</label>
                        <input type="date" name="start_date" id="start_date" class="form-control" value="{{ request('start_date') }}">
                    </div>
                    <div class="col-md-5">
                        <label for="end_date" class="form-label">End Date</label>
                        <input type="date" name="end_date" id="end_date" class="form-control" value="{{ request('end_date') }}">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">Filter</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card-body">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Brick Type</th>
                        <th>Open Stock Output</th>
                        <th>Closed Stock Output</th>
                        <th>Total Output</th>
                    </tr>
                </thead>
                <tbody id="summaryBody">
                    @foreach ($summary as $index => $item)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $item->brickType->name }}</td>
                            <td>{{ number_format($item->open_output) }}</td>
                            <td>{{ number_format($item->closed_output) }}</td>
                            <td>{{ number_format($item->open_output + $item->closed_output) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <h4 class="mt-5">Expected vs Actual Output</h4>
    <div class="card">
        <div class="card-body">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Brick Type</th>
                        <th>Expected Output</th>
                        <th>Actual Output</th>
                        <th>Extra/Short Output</th>
                    </tr>
                </thead>
                <tbody id="totalsBody">
                    @foreach ($totals as $index => $item)
                        @php
                            $diff = $item->actual_output - $item->expected_output;
                            $class = $diff >= 0 ? 'text-success' : 'text-danger';
                            $prefix = $diff >= 0 ? '+' : '-';
                        @endphp
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $item->brickType->name ?? 'Unknown' }}</td>
                            <td>{{ number_format($item->expected_output) }}</td>
                            <td>{{ number_format($item->actual_output) }}</td>
                            <td><span class="{{ $class }}">{{ $prefix }}{{ number_format(abs($diff)) }}</span></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const filterForm = document.getElementById('filterForm');

    filterForm.addEventListener('submit', function (e) {
        e.preventDefault();

        const start = document.getElementById('start_date').value;
        const end = document.getElementById('end_date').value;

        fetch(`{{ route('bricks-stock.summary.data') }}?start_date=${start}&end_date=${end}`)
            .then(res => res.json())
            .then(data => {
                const summaryBody = document.getElementById('summaryBody');
                const totalsBody = document.getElementById('totalsBody');

                // Populate summary table
                summaryBody.innerHTML = '';
                data.summary.forEach((item, index) => {
                    summaryBody.innerHTML += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.brick_type.name}</td>
                            <td>${Number(item.open_output).toLocaleString()}</td>
                            <td>${Number(item.closed_output).toLocaleString()}</td>
                            <td>${Number(item.open_output + item.closed_output).toLocaleString()}</td>
                        </tr>`;
                });

                // Populate totals table
                totalsBody.innerHTML = '';
                data.totals.forEach((item, index) => {
                    const diff = item.actual_output - item.expected_output;
                    const prefix = diff >= 0 ? '+' : '-';
                    const color = diff >= 0 ? 'text-success' : 'text-danger';

                    totalsBody.innerHTML += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.brick_type.name}</td>
                            <td>${Number(item.expected_output).toLocaleString()}</td>
                            <td>${Number(item.actual_output).toLocaleString()}</td>
                            <td><span class="${color}">${prefix}${Number(Math.abs(diff)).toLocaleString()}</span></td>
                        </tr>`;
                });
            });
    });
});
</script>
@endpush