@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Payroll Component Rate</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/payroll/components-rates">Payroll Component
                            Rate</a></li>
                    <li class="breadcrumb-item active">Edit</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-12 col-12">
        <div class='row'>
            <div class="col-12">
                <div class="form-group breadcrumb-right">
                    <a href="javascript:history.back()" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i>
                        Back</a>
                    <a href="/{!! $alias !!}/da-rate-slabs" class="btn btn-outline-primary btn-sm"><i data-feather="percent"></i>
                        DA Rate Slabs</a>    
                    <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                        class="btn btn-primary btn-sm"><i data-feather="check-circle"></i> Submit</button>
                </div>
            </div>
        </div>
    </div>
@endpush


@section('content')
    <br><br>
    <section id="column-search-datatable">
        <form method="POST" action="/{!! $alias !!}/payroll/components-rates" role="post-data"
            redirect="/{!! $alias !!}/payroll/components-rates">
            <div class="table-responsive">
                <table class="table table-bordered align-middle">
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Category</th>
                            @foreach($componentHeaders as $key=>$component)
                            <th>{{$component}}</th>
                            @endforeach
                           
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($categories as $i => $c)
                            <tr>
                                <input type="hidden" name="data[{{ $i }}][category_id]"
                                    value="{{ $c->id }}">
                                <td>
                                    {{ $i + 1 }}
                                </td>
                                <td>
                                    <input type="text" class="form-control" value="{{ $c->name }}" readonly>
                                </td>
                                @foreach($componentHeaders as $key => $component)
                                    <td>
                                        <input type="number" min="0" step="0.01" class="form-control"
                                            name="data[{{ $i }}][{{ $key }}]" value="{{ $c->rate->$key ?? '' }}">
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </form>
    </section>
@endsection

@push('footer-script')
    <script src="/js/common-script.js"></script>
@endpush