@extends('layout.app')

@section('title', 'Stock Group 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="javascript:void(0);">Stock Group Summary</a>
        </li>
    </ol>
</div>

<div class="app-body">
    <div class="row gx-3 align-items-end mb-3">
        <div class="col-sm-3">
            <form action="{{ 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">Stock Group Summary</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; @endphp
                            @forelse($categoriesData as $cat)
                                @php $grandTotalValue += $cat['total_value']; @endphp
                                <tr>
                                    <td>
                                        <a href="{{ route('stock-valuation.category', ['id' => $cat['category_id'], 'as_of_date' => date('d-m-Y', strtotime($asOfDate))]) }}" class="tally-link">
                                            {{ $cat['category_name'] }}
                                        </a>
                                    </td>
                                    <td class="text-end">
                                        @if($cat['same_unit'])
                                            {{ number_format($cat['total_qty'], 2) }} {{ $cat['unit_name'] }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        @if($cat['same_unit'] && $cat['total_qty'] > 0)
                                            {{ number_format($cat['total_value'] / $cat['total_qty'], 2) }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="text-end" style="font-weight: bold;">
                                        {{ number_format($cat['total_value'], 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">No Stock Category Data Available</td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot>
                            <tr class="tally-total-row">
                                <td>Grand Total</td>
                                <td></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