@extends('layout.app')

@section('title', 'Stock Items Summary')

@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<style>
    .tally-table {
        border-collapse: collapse;
        width: 100%;
        font-family: 'Courier New', monospace;
        font-size: 15px;
        color: #000;
        border: 1px solid #4472C4;
    }

    .tally-table thead th {
        background: #36506b !important;
        color: #fff !important;
        font-weight: bold;
        text-align: center;
        padding: 8px 10px;
        border: 1px solid #4472C4 !important;
    }

    .tally-table tbody td {
        padding: 4px 8px;
        vertical-align: middle;
        border: 1px solid #c8d4ee !important;
    }

    .tally-table tbody tr:hover td {
        background: #E6EEF9 !important;
    }

    .tally-total-row td {
        background: #B4C6E7 !important;
        font-weight: bold;
        font-size: 15px;
        border-top: 2px solid #4472C4 !important;
    }

    .tally-title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        padding: 10px 0 4px;
        color: #1a3a8f;
        border-bottom: 2px solid #4472C4;
        margin-bottom: 8px;
        font-family: Arial, sans-serif;
    }

    .tally-subtitle {
        text-align: center;
        font-size: 13px;
        color: #555;
        margin-bottom: 15px;
        font-family: Arial, sans-serif;
    }

    .tally-link {
        color: #1a3a8f;
        text-decoration: none;
        font-weight: bold;
    }

    .tally-link:hover {
        text-decoration: underline;
        color: #0056b3;
    }
</style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item">
            <a href="{{ route('stock-valuation.index', ['as_of_date' => date('d-m-Y', strtotime($asOfDate))]) }}">Stock Summary</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            {{ $categoryName }}
        </li>
    </ol>
</div>

<div class="app-body">
    <div class="row gx-3 align-items-end mb-3">
        <div class="col-sm-3">
            <form action="{{ $categoryId ? route('stock-valuation.category', $categoryId) : route('stock-valuation.index') }}" method="GET" id="filterForm">
                <label class="form-label" for="as_of_date">As on Date</label>
                <div class="input-group">
                    <input type="text" id="as_of_date" name="as_of_date" class="form-control datepicker" value="{{ date('d-m-Y', strtotime($asOfDate)) }}">
                    <button type="submit" class="btn btn-primary">Filter</button>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="tally-title">Category Summary: {{ $categoryName }}</div>
                    <div class="tally-subtitle">As on Date: {{ date('d-M-Y', strtotime($asOfDate)) }}</div>

                    <table class="tally-table">
                        <thead>
                            <tr>
                                <th style="text-align: left;">Particulars</th>
                                <th style="width: 150px; text-align: right;">Quantity</th>
                                <th style="width: 150px; text-align: right;">Rate</th>
                                <th style="width: 180px; text-align: right;">Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php 
                                $grandTotalValue = 0; 
                                $unitsUsed = [];
                                $totalQty = 0;
                            @endphp
                            @forelse($items as $item)
                                @php 
                                    $grandTotalValue += $item['value'];
                                    $totalQty += $item['qty'];
                                    $unitName = strtolower(trim($item['units']));
                                    if (!in_array($unitName, $unitsUsed)) {
                                        $unitsUsed[] = $unitName;
                                    }
                                @endphp
                                <tr>
                                    <td>
                                        <a href="{{ route('stock-item-ledger.index', ['id' => $item['id'], 'as_of_date' => date('d-m-Y', strtotime($asOfDate))]) }}" class="tally-link">
                                            {{ $item['product_name'] }}
                                        </a>
                                    </td>
                                    <td class="text-end">
                                        {{ number_format($item['qty'], 2) }} {{ $item['units'] }}
                                    </td>
                                    <td class="text-end">
                                        {{ number_format($item['rate'], 2) }}
                                    </td>
                                    <td class="text-end" style="font-weight: bold;">
                                        {{ number_format($item['value'], 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">No Stock Items Available</td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot>
                            <tr class="tally-total-row">
                                <td>Grand Total</td>
                                <td class="text-end">
                                    @if(count($unitsUsed) === 1 && count($items) > 0)
                                        {{ number_format($totalQty, 2) }} {{ strtoupper(reset($unitsUsed)) }}
                                    @endif
                                </td>
                                <td></td>
                                <td class="text-end">{{ number_format($grandTotalValue, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#as_of_date').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: true,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $('#as_of_date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            $('#filterForm').submit();
        });
    });
</script>
@endpush