@extends('layouts.main')

@push('page_headers')
<style>
    .salary-amount {
        font-weight: 600;
        color: #2c3e50;
        font-size: 13px;
    }
    .salary-empty {
        color: #95a5a6;
        font-style: italic;
        font-size: 12px;
    }
    .fy-total {
        background-color: #ecf0f1;
        font-weight: bold;
        color: #2c3e50;
    }
    .month-header {
        background-color: #3498db;
        color: white;
        font-weight: bold;
        text-align: center;
        padding: 8px 4px;
        font-size: 12px;
    }
    .employee-name {
        color: #2980b9;
        font-weight: 600;
    }
    .employee-code {
        color: #7f8c8d;
        font-size: 11px;
    }
</style>
<div class="row my-md-4 my-3" >
    <div class="col-sm-12 text-end" >
        <div class="btn-rgt_div mr-auto d-block">
            <div class="btn-rgt_div_container w-100 d-flex justify-content-end">
                {{-- <div class="year_pagination mx-2 d-inline text-white"></div> --}}
                <div class="btn_primary_fade dwnAs ms-2">
                    <button role="button" onclick='HomeObj.refreshItemList()' class="pt-2 align-items-center">
                        <i class="fa-solid fa-arrows-rotate text-white"></i>
                    </button>
                </div>
                <div class="btn_primary_fade dwnAs ms-2">
                    <button role="button" onclick='HomeObj.listFilterFormOpen()' class="pt-2 align-items-center">
                        <img src="public/assets/img/icn/search.svg" class="w-16" alt="Search" />
                    </button>
                </div>
                <div class="btn_primary_fade dwnAs ms-2">
                    <button role="button" onclick='EmployeeObj.addItemModalInit()' class="pt-2 align-items-center d-flex px-3 ">
                        <img src="public/assets/img/icn/plus.svg" class="w-12 plus text-white" alt="Plus" /><span class="ms-2 text-white text-nowrap">Add Employee</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endpush

@section('content')
<div class="mn-bdy_dv_tbl_container">
    <table class="table table-bordered" id="listingTblEmp">
        <thead></thead>
        <tbody></tbody>
    </table>
    <div class="col-md-12 col-sm-12 col-12 text-end">
        <ul class="pagination_link pagination-sm"></ul>
    </div>
</div>
@stop


@push('page_modals')
<div class="modal fade" id="listFilterModal" tabindex="-1" aria-labelledby="listFilterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-body-secondary rounded-0">
                <h5 class="modal-title" id="listFilterModalLabel">Search</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="listFilterForm" method="post" onsubmit="HomeObj.listFilterFormSubmitHandler(event)">
                    <div class="card bg-white border-0">
                        <div class="card-body">
                            <div class="tab row">
                                <div class="col-sm-6">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="empName" class="form-label">Employee Name</label>
                                        <input type="text" name="search_employee_name" class="form-control" autocomplete="off" placeholder="Search by employee name..." data-label="Employee Name" data-filter_type=" : ">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="empCode" class="form-label">Employee Code</label>
                                        <input type="text" name="search_employee_code" class="form-control" autocomplete="off" placeholder="Search by employee code..." data-label="Employee Code" data-filter_type=" : ">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="companyName" class="form-label">Company Name</label>
                                        <input type="text" name="search_company_name" class="form-control" autocomplete="off" placeholder="Search by company name..." data-label="Company Name" data-filter_type=" : ">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="empStatus" class="form-label">Status</label>
                                        <select name="search_status" class="form-control" data-label="Status" data-filter_type=" : ">
                                            <option value="">All Status</option>
                                            <option value="1">Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="startDate" class="form-label">Joining Date From</label>
                                        <input type="date" name="start_date" class="form-control" data-label="Joining Date From" data-filter_type=" : ">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3 frm-inp_div">
                                        <label for="endDate" class="form-label">Joining Date To</label>
                                        <input type="date" name="end_date" class="form-control" data-label="Joining Date To" data-filter_type=" : ">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-body-secondary py-2 rounded-0">
                <button type="button" onclick="HomeObj.listFilterFormClearHandler()" class="btn btn-outline-secondary">Clear Filters</button>
                <button type="submit" id="next_button" form="listFilterForm" class="btn btn-primary">Search</button>
                <button type="button" id="back_button" class="btn ms-3 btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


@endpush

@include('pages.private.employee')

@push('page_scripts')
<script type="text/javascript">

    class Home extends BaseClass {

        constructor() {
            super();

            this.listingTbl                 =   document.getElementById('listingTblEmp');
            this.listingTblThLength         =   17;
            this.listData                   =   [];
            this.listMeta                   =   null;
            this.listPageNumber             =   1;
            this.per_page                   =   50;
            this.year                       =   2025;

            this.companies                  =   [];

            this.listFilterForm             =   document.getElementById('listFilterForm');
            this.listFilterModalElem        =   document.getElementById('listFilterModal');
            this.listFilterModal            =   new bootstrap.Modal(this.listFilterModalElem, {keyboard: false, backdrop : 'static'});

            this.list_url                   =   '