@extends('layouts.app')

@section('content')
<style>
/* Detail font size ~9pt and layout tweaks */
.stock-ledger-table {
  font-size: 9pt;
  line-height: 1.2;
  min-width: 900px;
  border-collapse: collapse;
}

/* Table wrapper for scrollbars */
.table-wrapper {
  max-height: calc(100vh - 260px);
  overflow: auto;
  position: relative;
}

/* Headings: 14px, bold, underlined, centered */
.stock-ledger-table thead th {
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  position: sticky;
  top: 0;
  background: #343a40;
  color: #fff;
  z-index: 3;
}

/* Cell padding and prevent wrapping */
.stock-ledger-table thead th,
.stock-ledger-table tbody td {
  padding: 4px 8px;
  white-space: nowrap;
}

/* Emphasize opening balance row */
.tr-opening {
  font-weight: 600;
  background: #f0f8ff;
}

/* Alternating rows for readability */
.stock-ledger-table tbody tr:not(.tr-opening):nth-child(odd) {
  background: #fafafa;
}

/* Numeric right alignment */
.text-right {
  text-align: right;
}

/* Print preview adjustments */
@media print {
  /* Remove sticky header behavior for print */
  .stock-ledger-table thead th {
    position: static !important;
    background: #eee !important; /* light background */
    color: #000 !important;
  }

  /* Remove Bootstrap's .table-dark print gap issue */
  .table-dark {
    background-color: transparent !important;
  }

  /* Remove outer container margins in print */
  .container {
    margin: 0 !important;
    padding: 0 !important;
  }

  h2 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }
}
</style>

<div class="container">
    <h2 class="mb-4">Stock Ledger Report</h2>

    <form method="GET" action="{{ route('stock.ledger.generate') }}" class="row g-3 align-items-end mb-4 no-print">
        @csrf
        <div class="col-md-3">
            <label for="fromDate" class="form-label">From Date:</label>
            <input type="date" id="fromDate" name="fromDate" class="form-control"
                   value="{{ request('fromDate', \Carbon\Carbon::now()->startOfMonth()->format('Y-m-d')) }}"
                   required>
        </div>

        <div class="col-md-3">
            <label for="toDate" class="form-label">To Date:</label>
            <input type="date" id="toDate" name="toDate" class="form-control"
                   value="{{ request('toDate', \Carbon\Carbon::now()->format('Y-m-d')) }}"
                   required>
        </div>

        <div class="col-md-4">
            <label for="item_id" class="form-label d-block">Item:</label>
            <select name="item_id" id="item_id" class="form-control select2-item" required style="width:100%;">
                @if(request('item_id'))
                    @php
                        $product = \DB::table('products')->where('item_id', request('item_id'))->first();
                    @endphp
                    @if($product)
                        <option value="{{ $product->item_id }}" selected>{{ $product->name }}</option>
                    @endif
                @endif
            </select>
        </div>

        <div class="col-md-2 d-flex flex-column gap-2">
            <button type="submit" class="btn btn-primary w-100">Generate</button>
            <div class="d-flex gap-2 mt-1">
                <a href="{{ route('home') }}" class="btn btn-secondary w-100">Home</a>
                <button type="button" id="print-btn" class="btn btn-outline-success w-100" {{ isset($ledger) ? '' : 'disabled' }}>Print</button>
            </div>
        </div>
    </form>

    @isset($ledger)
        <div class="mb-3">
            <strong>Showing ledger for item:</strong>
            @if(isset($item))
                {{ $item->name }}
            @endif
            <br>
            <small>From {{ \Carbon\Carbon::parse($fromDate)->format('d M Y') }} to {{ \Carbon\Carbon::parse($toDate)->format('d M Y') }}</small>
        </div>

        <div class="table-wrapper">
            <table class="table table-bordered table-striped stock-ledger-table">
                <thead class="table-dark">
                    <tr>
                        <th>Date</th>
                        <th>P.O./D.C.</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Issue/Receive</th>
                        <th>Bonus</th>
                        <th>Amount</th>
                        <th>Balance</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($ledger as $row)
                        <tr class="{{ isset($row->is_opening) && $row->is_opening ? 'tr-opening' : '' }}">
                            <td class="text-center">{{ $row->date }}</td>
                            <td class="text-center">{{ $row->grn_dc }}</td>
                            <td class="text-right">
                                @if(!is_null($row->price))
                                    {{ number_format($row->price, 2) }}
                                @endif
                            </td>
                            <td class="text-right">{{ number_format($row->qty ?? 0, 0) }}</td>
                            <td>{{ $row->type }}</td>
                            <td class="text-right">{{ $row->bonus }}</td>
                            <td class="text-right">
                                @if(!is_null($row->amount))
                                    {{ number_format($row->amount, 0,0) }}
                                @endif
                            </td>
                            <td class="text-right">{{ number_format($row->balance,0,0) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

{{-- Totals summary --}}
<!--<div class="mt-3">
    <table class="table table-sm" style="max-width:400px;">
        <tbody>
            <tr>
                <th class="px-2">Total Received Qty (incl. bonus):</th>
                <td class="px-2 text-end">{{ number_format($totals['receive'] ?? 0, 0) }}</td>
            </tr>
            <tr>
                <th class="px-2">Total Issued Qty:</th>
                <td class="px-2 text-end">{{ number_format($totals['issue'] ?? 0, 0) }}</td>
            </tr>
        </tbody>
    </table>
</div>-->
    @endisset
</div>

<!-- Select2 CSS/JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(function(){
    $('.select2-item').select2({
        placeholder: 'Search Product',
        allowClear: true,
        ajax: {
            url: '{{ route("ajax.products") }}',
            dataType: 'json',
            delay: 250,
            data: function(params){
                return { q: params.term || '' };
            },
            processResults: function(data){
                return { results: data.results };
            },
            cache: true
        },
        minimumInputLength: 0,
        width: 'resolve'
    });

    $('#print-btn').on('click', function(){
        window.print();
    });
});
</script>
@endsection