@extends('layouts/acc_layout')
@section('title', '|  '.$pageTitle)
@section('content')
    @include('partials/layout-assets')
    <style>
        .pagination {
            margin-bottom: 0;
        }
        .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
            background-color: #485058;
            border-color: #485058;
        }
        .pagination>li>a, .pagination>li>span {
            padding: 5px 10px;
            font-size: 10px;
        }
    </style>
    <div class="row" style="display: flex; justify-content:center;">
        <div class="col-md-12 col-lg-8">
            <div class="panel panel-default">
                <div class="panel-heading" style="padding: 15px 20px !important;">
                    <div>
                        <h4>{{ $pageTitle }}</h3>
                    </div>
                    <div class="panel-options">
                        <a href="{{ route('tar.budget.config.add') }}" id="addViewBtn" class="btn btn-primary" style="margin-bottom:0;">
                            <i class="fa fa-plus" aria-hidden="true" style="padding-right: 5px;"></i>Add New Target & Achievement (TAR) Budget
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row" style="display:flex; justify-content: center;">
                        <div class="col-lg-12 col-md-12">
                            <table class="table table-striped table-bordered" style="color:black;" id="datatable">
                                <thead>
                                    <tr>
                                        <th style="width:8%; text-align:center;">SL#</th>
                                        <th style="width:37%; text-align:center;">Branch</th>
                                        <th style="width:35%; text-align:center;">Fiscal Year</th>
                                        <th style="width:20%; text-align:center;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($tarBudgetsInfos as $tarBudgetsInfo)
                                        <tr>
                                            <td style="">{{ $loop->iteration }}</td>
                                            <td style="text-align:left;">{{ $tarBudgetsInfo->branch_name }}</td>
                                            <td style="text-align:left;">{{ $tarBudgetsInfo->fiscal_year }}</td>
                                            <td style="">
                                                <a href="{{ route('tar.budget.config.add', ['view' => 'true', 'branchId' => $tarBudgetsInfo->branchId, 'fiscalYearId' => $tarBudgetsInfo->fiscalYearId ]) }}" class="btn btn-xs btn-success" style="border-radius: 2px;">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                <a href="{{ route('tar.budget.config.add', ['edit' => 'true', 'branchId' => $tarBudgetsInfo->branchId, 'fiscalYearId' => $tarBudgetsInfo->fiscalYearId ]) }}" class="btn btn-xs btn-info" style="border-radius: 2px;">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4">No Data Found !</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            {{ $tarBudgetsInfos->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection