@extends('layouts.app')

@section('title', __('app.periods'))

@section('controller-data', 'common:datatable;periods:index')

@section('breadcrumb')
<li class="breadcrumb-item">
    <a href="/"><i class="fas fa-home"></i> {{ __('app.home') }}</a>
</li>
<li class="breadcrumb-item active">{{ __('app.periods') }}</li>
@endsection

@section('content')
<input type="hidden" id="records-quantity" value="{{ $paginationRecordQuantity }}" />
<input type="hidden" id="crud-route" value="{{ $route }}" />

<div class="row">
    <div class="col-md-12">
        @include('flash-message')
        
        <div class="box">
            <div class="box-body datatable-filter-container">
                <form id="index-form-filters" action="{{ route($route . '.index') }}" method="POST" autocomplete="off">
                    @method('POST')
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <select class="form-control" name="year">
                                    <option value="">-- {{ __('app.year') }} --</option>
                                    @foreach ($years as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-3">
                            <div class="form-group">
                                <select class="form-control" name="month">
                                    <option value="">-- {{ __('app.month') }} --</option>
                                    @foreach ($months as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-3 filter-buttons">
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger protip filter-btn-clean" id="clear-filters" data-pt-position="bottom" data-pt-title="{{ __('app.clean_search') }}">
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="btn btn-primary protip filter-btn-search" id="set-filters" data-pt-position="bottom" data-pt-title="{{ __('app.search') }}">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            
            @if($recordsQuantity > 0)
            <div class="box-body table-responsive no-padding datatable-table-container">
                <table id="index-table" class="table table-sm table-hover datatable-table">
                    <thead>
                        <tr>
                            <th>{{ __('app.year') }}</th>
                            <th>{{ __('app.month') }}</th>
                            <th>{{ __('app.version') }}</th>
                            <th>{{ __('app.published') }}</th>
                            <th>{{ __('app.actions') }}</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>{{ __('app.year') }}</th>
                            <th>{{ __('app.month') }}</th>
                            <th>{{ __('app.version') }}</th>
                            <th>{{ __('app.published') }}</th>
                            <th>{{ __('app.actions') }}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            @else
            <div class="box-body">
                <div class="row">
                    <div class="col-12 text-center">
                        <i class="fa-solid fa-calendar-days fa-8x"></i>
                    </div>
                    <div class="col-12 mt-3 text-center">
                        <h4>{!! __('app.empty_periods') !!}</h4>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection