@extends('voyager::master')

@section('page_title', 'Tariff Rate')

@section('page_header')
    <div class="page-header">
        <div class="row align-items-center py-2">
            <div class="col-sm mb-2 mb-sm-0">
                <div class="d-flex align-items-center">
                    <img class="onerror-image" data-onerror-image="{{ asset('thumb.png') }}" src="{{ asset('icon/tariff-rate.png') }}"
                        width="60" alt="ChargingStrations Image">
                    <div class="w-0 flex-grow pl-2">
                        <h1 class="page-header-title mb-0">{{__('datatable.tariff.title')}}</h1>
                        <p class="page-header-text m-0"></p>
                    </div>
                    <div>
                     <a href="{{route('tariff-rate.create')}}" class="btn btn-sm btn-success btn-add-new">
                        <i class="voyager-plus"></i> {{ __('datatable.add_new') }} </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('content')
    @include('_partials.alerts')
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-bordered">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table id="dataTable" class="table table-hover customers-table">
                            <thead>
                                <tr>
                                    <th>{{ __('datatable.sn') }}</th>
                                    <th>{{ __('datatable.station_id') }}</th>
                                    <th>{{ __('datatable.title') }}</th>
                                    <th>{{ __('datatable.description') }}</th>
                                    <th>{{ __('form.rate') }}</th>
                                    <th>{{ __('datatable.currencycode') }}</th>
                                    <th>{{ __('datatable.start_time') }}</th>
                                    <th>{{ __('datatable.end_time') }}</th>
                                    <th>{{ __('datatable.start_date') }}</th>
                                    <th>{{ __('datatable.end_date') }}</th>
                                    <th class="no-sort">{{ __('voyager::generic.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (empty($tariffs))
                                <tr>
                                    <td colspan="11" class="text-center">No data found</td>
                                </tr>
                            @else

                                @foreach ($tariffs as $item)
                                    <tr>
                                        <td>{{checkAndReturnValue($item,'id')}}</td>
                                        <td>{{checkAndReturnValue($item,'stationId')}}</td>
                                        <td>{{checkAndReturnValue($item,'title')}}</td>
                                        <td>{{checkAndReturnValue($item,'description')}}</td>
                                        <td>{{checkAndReturnValue($item,'rate')}} {{checkAndReturnValue($item,'unit')}} </td>
                                        <td>{{checkAndReturnValue($item,'currencyCode')}}</td>
                                        <td>{{checkAndReturnValue($item,'startTime')}}</td>
                                        <td>{{checkAndReturnValue($item,'endTime')}}</td>
                                        <td>{{checkAndReturnValue($item,'startDate')}}</td>
                                        <td>{{checkAndReturnValue($item,'endDate')}}</td>
                                        <td class="no-sort no-click bread-actions">
                                         <a href="{{route('tariff-rate.detail', $item['id'])}}" title="View"
                                                class="btn btn-sm btn-warning pull-right view customer-fields-btn">
                                                <i class="voyager-eye"></i> <span
                                                    class="hidden-xs hidden-sm">{{ __('voyager::generic.view') }}</span>
                                            </a>

                                          <a href="{{route('tariff-rate.edit', $item['id'])}}" title="Edit"
                                                class="btn btn-sm btn-primary pull-right edit customer-fields-btn">
                                                <i class=" voyager-edit"></i> <span
                                                    class="hidden-xs hidden-sm">{{ __('voyager::generic.edit') }}</span>
                                            </a>

                                            <a href="{{route('tariff-rate.destroy', $item['id'])}}" title="Delete"
                                                class="btn btn-sm btn-danger pull-right edit customer-fields-btn">
                                                <i class=" voyager-delete"></i> <span
                                                    class="hidden-xs hidden-sm">{{ __('voyager::generic.delete') }}</span>
                                            </a>
                                        </td>
                                    </tr>
                                 @endforeach
                                 @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop


@section('javascript')
    <script>
        $(document).ready(function() {
            $('#dataTable').DataTable({
                order: [
                    [1, 'desc']
                ],
                "fnRowCallback": function(nRow, aData, iDisplayIndex) {
                    var pageInfo = $('#dataTable').DataTable().page.info();
                    var startIndex = pageInfo.start;
                    $("td:first", nRow).html(startIndex + iDisplayIndex + 1);
                    return nRow;
                }, // Adjust based on column index for sorting
                language: {
                    search: "@lang('datatable.sSearch')",
                    lengthMenu: "@lang('datatable.sLengthMenu')",
                    info: "@lang('datatable.sInfo')",
                    infoEmpty: "@lang('datatable.sInfoEmpty')",
                    infoFiltered: "@lang('datatable.sInfoFiltered')",
                    loadingRecords: "@lang('datatable.sLoadingRecords')",
                    processing: "@lang('datatable.sProcessing')",
                    zeroRecords: "@lang('datatable.sZeroRecords')",
                    paginate: {
                        first: "@lang('datatable.oPaginate.sFirst')",
                        last: "@lang('datatable.oPaginate.sLast')",
                        next: "@lang('datatable.oPaginate.sNext')",
                        previous: "@lang('datatable.oPaginate.sPrevious')"
                    },
                    aria: {
                        sortAscending: "@lang('datatable.oAria.sSortAscending')",
                        sortDescending: "@lang('datatable.oAria.sSortDescending')"
                    }
                },
                columnDefs: [{
                        targets: 'no-sort',
                        orderable: false
                    }
                ]
            });
        });
    </script>
@endsection