@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('Mesečne uplate') }}
@endsection

@section('title')
    Pregled mesečnih uplata
@endsection

@section('content')
<div class="col-12">
    <!-- table-tools -->
    <div class="table-tools">
        <div class="table-filters">
            <div class="select-holder" wire:ignore="">
                <label>Filter Godina:</label>
                <div class="dropdown bootstrap-select form-control">
                    <select class="bootstrap-select form-control" autocomplete="off" data-style="btn btn-sm btn-white" id="year" tabindex="null">
                        @for ($i = intval(date('Y')); $i >= 2019 ; $i--)
                            <option @if($year == $i) selected="selected" @endif value="{{$i}}">{{$i}}</option>
                        @endfor
                    </select>
                </div>
            </div>
        </div>
    </div>
<!-- table-tools end -->
</div>

<div class="col-12">
    <div class="h-100 bgc-white pt-0 radius-1 shadow-sm mx-auto">
        <div class="w-100 brc-info-tp2 radius-t-1"></div>
        <div class="card h-100 border-0">
            <div class="card-body h-100 d-flex flex-column justify-content-center py-3 px-3 border-0">
                <div class="table-responsive-md">
                    <table class="table table-bordered table-hover text-dark-blue custom-table">
                        <thead class="bgc-grey-l4">
                            <tr>
                                <th class="column-xs">
                                    <span>Godina</span>
                                </th>
                                <th class="column-xs">
                                    <span>Mesec</span>
                                </th>
                                <th class="column-xs">
                                    <span>Datum od</span>
                                </th>
                                <th class="column-xs">
                                    <span>Datum do</span>
                                </th>
                                <th class="column-l">
                                    <span>Iznos</span>
                                </th>
                                <th class="column-l">
                                    <span>Iznos sa PDV-om</span>
                                </th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($dates as $index => $date)
                                <!-- user tr -->
                                <tr class="bgc-h-default-l3 d-style">
                                    <td class="column-xs">{{ $date->year }}</td>
                                    <td class="column-xs">{{ App\Models\Helpers\Date::getMonthNameSr($index) }}</td>
                                    <td class="column-xs">{{ date('d.m.Y.', strtotime($date->start)) }}</td>
                                    <td class="column-xs">{{ date('d.m.Y.', strtotime($date->end)) }}</td>
                                    <td class="column-l">{{ number_format($date->amount, 2) }} rsd</td>
                                    <td class="column-l">{{ number_format($date->amount_with_pdv, 2) }} rsd</td>
                                </tr>
                                <!-- user tr -->
                            @endforeach
                            <!-- user detail-row end -->
                        </tbody>
                    </table>
                    <!-- table end -->
                </div>
                <!-- table-responsive end -->
            </div><!-- card-body end -->
        </div><!-- .card -->
    </div><!-- h-100 end -->
</div>

<div class="col-12 mt-3">
    <!-- table-tools -->
    <div class="table-tools">
        <div class="table-filters">
            <div class="select-holder">
                <h3>Ukupno: {{ number_format($sum, 2) }} rsd</h3>
                <h3>Ukupno + PDV: {{ number_format($sum_with_pdv, 2) }} rsd</h3>
            </div>
        </div>
    </div>
<!-- table-tools end -->
</div>

@endsection

@section('scripts')
    @parent
    <script>
        $(document).on('change', '#year', function(e) {
            window.location.href = route('cms.invoice-payment.monthly_payments', this.value)
        });
    </script>
@endsection