@extends('admin::layouts.master')
@section('pagetitle','Employers Report')

@section('content')
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
<style>
    .calendar {
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #F8F9F9;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
}

.calendar-header button {
    background-color: #0056b3;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.calendar-header button:hover {
    background-color: #003d7a;
}

.calendar-body {
    padding: 10px;
}

.day-names, .calendar-days {
    display: flex;
    flex-wrap: wrap;
}

.day-names div, .calendar-days div {
    width: 14.28%;
    text-align: center;
    padding: 5px 0;
    
}

.calendar-days div {
    cursor: pointer;
    padding: 25px;
    border-radius: 50%;
}

table,th,td{
    
    font-size: medium;
    width: auto;
}
    
table{
    width: 100%;
    height: auto;
}

#leftcon{
    font-size: larger;
    text-align: left;
}
#rightcon{
    font-size:xx-large;
    text-align: right;
    padding-top: 20px;

}
.borde{
    border: 2px solid black;
}
.noborder{
    border: 0px solid black;

}
.bordettom {
    border-bottom: 1px solid black;
    border-left: 1px solid black ;
    border-right: 1px solid black ;
}
.bordleftright{
    border-left: 1px solid black ;
    border-right: 1px solid black ;
    
}
.bordeop{
    border-top: 1px solid black ;
}
.bordleft{
    border-left: 1px solid black ;
}
.borderbottomonly{
    border-bottom: 1px solid black;
}
p{
    padding-top: 5px;
}

.padding{
    padding-left: 10px;
}
@media print {
            body * {
                visibility: hidden;
            }
            .pay_body, .pay_body * {
                visibility: visible;
            }
            .pay_body {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                transform: scale(1.00); /* Adjust this value to fit content on A4 */
                transform-origin: top left;
            }
        }


</style>

<div>
    <div class="row container">
        <div class="col-md-3">
            <label for="employer">Select an Employer:</label>
            <select name="employer_id" id="employer" class="form-select">
                <option value="">Select</option>
                @foreach($employers as $employer)
                    <option value="{{ $employer->id }}">BT-00{{ $employer->id }} {{ $employer->employer_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label for="month">Select Month:</label>
            <select name="month" id="month" class="form-select"></select>
            
        </div>
        <div class="col-md-3">
            <label for="year">Select Year:</label>
            <select name="year" id="year" class="form-select"></select>
        </div>
        <div class="col-md-3">
            <button type="button" id="submit-btn" class="btn btn-primary mt-5">Submit</button>
        </div>
    </div>


    <div class="row mx-5 my-5">
        <div class="col-lg-5 ">
        @include('admin::report.calendar')
        </div>
        <div class="col-lg-7 ">
        @include('admin::report.gendrate_pay')
        </div>

    </div>

</div>
@include('admin::report.pay')
@endsection

@section('scripts')
<script src="{{asset('js/admin/attendance/attendance.js')}}"></script>

@endsection