@extends('layouts.master')

@section('titel', 'Salary Slips | ')

@section('content')
@include('partials.header')
@include('partials.sidebar')

<!-- Loader -->
<div id="loader" class="text-center" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;">
    <img src="{{ asset('images/loader.gif') }}" alt="Loading..." width="100">       
    <p>Loading data, please wait...</p>
</div>

<main class="app-content" id="main-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-th-list"></i> Salary Entries</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb side">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">Salary</li>
            <li class="breadcrumb-item active"><a href="#">Salary Table</a></li>
        </ul>
    </div>

    <div class="">
        <a class="btn btn-primary" href="{{ route('salaryslip.create') }}"><i class="fa fa-plus"></i> New Salary Entry</a>
    </div>

    <div class="row mt-3">
        <div class="col-md-6">
            <form method="GET" action="{{ route('salaryslip.index') }}" id="filter-form" class="form-inline">
                <label for="month" class="mr-2">Month:</label>
                <select name="month" id="month" class="form-control mr-3">
                    @foreach($months as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>

                <label for="year" class="mr-2">Year:</label>
                <select name="year" id="year" class="form-control mr-3">
                    @for($y = now()->year; $y >= 2020; $y--)
                        <option value="{{ $y }}">{{ $y }}</option>
                    @endfor
                </select>

                <button type="submit" class="btn btn-info">Filter</button>
            </form>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <table class="table table-hover table-bordered" id="sampleTable">
                        <thead>
                            <tr>
                                <th>Employee</th>
                                <th>Salary Date</th>
                                <th>Days</th>
                                <th>Wage</th>
                                <th>Advance</th>
                                <th>Loan Deduction</th>
                                <th>Conveyance</th>
                                <th>OT Hours</th>
                                <th>Total Salary</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($employees as $emp)
                                <tr>
                                    <td>{{ $emp->employee_name }}</td>
                                    <td>{{ $emp->sal_date }}</td> <!-- Add actual date if available -->
                                    <td>{{ $emp->days }}</td>
<td>{{ number_format($emp->pay, 2) }}</td>
<td>{{ number_format($emp->advance, 2) }}</td>
<td>{{ number_format($emp->loan_ded, 2) }}</td>
                                    <td>{{ $emp->conveyance }}</td>
                                    <td>{{ $emp->ot_hours }}</td>
<td>{{ number_format($emp->net_salary, 2) }}</td>
                                </tr>
                            @endforeach
                            @if($employees->isEmpty())
                                <tr>
                                    <td colspan="9" class="text-center">No records found.</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('/') }}js/plugins/jquery.dataTables.min.js"></script>
<script src="{{ asset('/') }}js/plugins/dataTables.bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('#sampleTable').DataTable();

        $('#filter-form select').on('change', function() {
            $('#main-content').hide();
            $('#loader').show();
            $('#filter-form').submit();
        });
    });
</script>
@endpush