@extends("newDashboard.index")

@section("css")
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
    <link rel="stylesheet" href="{{ asset('metronic/css/customStyleBackground.css') }}">
@endsection

@section("main-content")
<div class="content-wrapper">

    <div class="page-header">
        <h3 class="page-title">
            <span class="page-title-icon bg-gradient-primary text-white me-2">
                <i class="fa-solid fa-boxes-stacked menu-icon"></i>
            </span>
            {{ __('messages.Items Stock Report') }}
        </h3>
    </div>

    <div class="row justify-content-md-center">
        <div id="stock-report-container">
            <div id="date_error" style="color:red;"></div>
            <form class="row justify-content-center align-items-center">
                @csrf
                <input type="hidden" id="form-route" value="{{ route('Item.Stock.report.all') }}">

                <div class="form-group col-12 col-sm-6 col-md-4 col-xl-4">
                    <label>{{ __('messages.From') }}</label>
                    <input id="from_date" type="date" class="form-control" name="from_date">
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4 col-xl-4">
                    <label>{{ __('messages.To') }}</label>
                    <input id="to_date" type="date" class="form-control" name="to_date">
                </div>
                <div class="col-12 col-sm-12 col-md-4 col-xl-2 mt-3 mt-md-0">
                    <button type="submit" class="btn btn-primary btn-block">{{ __('messages.Submit') }}</button>
                </div>
            </form>
        </div>
    </div>

    <div id="stock-report-list" class="table-responsive mt-4">
        <div class="text-center">
            <h3>{{ __('messages.Items Stock Report') }}</h3>
        </div>
        <div class="row mt-3">
            <div class="col-2">
                <p>{{ __('messages.From Date') }}: <span id="From-Date"></span></p>
                <p>{{ __('messages.To Date') }}: <span id="To-Date"></span></p>
            </div>
        </div>

        <table style="width:100%; border-collapse:collapse; border:1px solid black;"
               class="text-center table mt-3">
            <thead>
                <tr class="customBackgroundColoreParentHead">
                    <th style="border:1px solid black;">{{ __('messages.Item name') }}</th>
                    <th style="border:1px solid black;">{{ __('messages.Total Received') }}</th>
                    <th style="border:1px solid black;">{{ __('messages.Total Issued') }}</th>
                    <th style="border:1px solid black;">{{ __('messages.Total Remaining') }}</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

</div>

<div class="spinner-layer d-none">
    <div class="spinner"></div>
    <p class="fs-3">{{ __('messages.Processing') }}</p>
</div>
@endsection

@section("scripts")
<script>
    var translations = {
        title:         '{{ __("messages.Items Stock Report") }}',
        TotalAlajmaliu:'{{ __("messages.Total alajmaliu") }}',
        Received:      '{{ __("messages.Total Received") }}',
        Issued:        '{{ __("messages.Total Issued") }}',
        Remaining:     '{{ __("messages.Total Remaining") }}',
    };
</script>
<script src="{{ asset('metronic/js/pages/Item-Stock-Report-All.js') }}"></script>
@endsection