{{ View::make('layout.header') }}
<style>
    .table thead th {
        padding: 8px 10px !important;
    }

    a.disable {
        pointer-events: none;
    }
</style>
<!-- BEGIN: Content-->
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb mt-3">
                                <li class="breadcrumb-item">HR
                                </li>
                                <li class="breadcrumb-item ">Reports
                                </li>
                                <li class="breadcrumb-item active"><a
                                        href="{{ route('reports.attendance-sheet') }}">Attendance
                                        Sheet</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section id="dashboard-ecommerce">
                <div class="row match-height">
                    <div class="col-md-12">
                        <div class="card">

                            <div class="card-header" style="">
                              


                          
                            </div>
                            <div class="card activity filter-container"
                                style="margin: 0px 15px; background-color:#e6e5e5; padding:10px 20px 20px 20px; display:none !important;"
                                id="empleavetoday">
                        
                                <div class="row">
                        

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Date From &nbsp;:
                                        <input type="date" name="sdatefrom" id="sdatefrom"
                                            class="tcal form-control flatpickr-basic" placeholder="DD-MM-YYYY"
                                            data-dateformat="dd-mm-yy">
                                    </div>
                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Date To &nbsp;:<span class="red">*</span>&nbsp;
                                        <input type="date" name="sdateto" id="sdateto"
                                            class="tcal form-control flatpickr-basic" placeholder="DD-MM-YYYY"
                                            data-dateformat="dd-mm-yy">
                                    </div>


                                    <div class="col-sm-6 filter-form-group" style="margin-top:19px;">
                                        <input type="button" value="Apply" onclick="getfilterdata();"
                                            class="filter-apply btn btn-info" />
                                    </div>
                                </div>
                            </div>


                            <div class="p-2">
                                <h1>Download Sheet</h1>
                            </div>
                            <div class="card-body" style="padding-top:0px !important; ">
                                <table width="100%">
                                    <tr>
                                        <th width=""><strong>AL</strong> = Annual</th>
                                        <th width=""><strong>MC</strong> = Medical</th>
                                        <th width=""><strong>MT</strong> = Maternity</th>
                                        <th width=""><strong>MR</strong> = Marriage </th>
                                        <th width=""><strong>CL</strong> = Compassionate </th>
                                        <th width=""><strong>HL</strong> = Hospital </th>
                                        <th width=""><strong>EX</strong> = Examination </th>
                                    </tr>
                           
                                </table>
                                <br>

                                <table width="100%">
                                    <tr>
                                        <th width="25%"><strong>√</strong> = Present</th>
                                        <th width="25%"><strong>AB</strong> = Absent</th>
                                        <th width="25%"><strong>R</strong> = Restday</th>
                                        <th width="25%"><strong>H</strong> = Holiday </th>
                                    </tr>
                                </table>
                                <br>

                          

                                <div class="table-responsive " style="overflow-x: scroll !important;">
                                    <table class="table" id="reporttable" style=" font-size:12px;">
                                        <thead class="test-thead">
                                            <th style="width:25%"><strong>Sr no.</strong></th>
                                            <th style="width:25%"><strong>Progress</strong></th>
                                            <th style="width:25%"><strong>Status</strong></th>
                                            <th style="width:25%"><strong>Download</strong></th>
                    
                                        </thead>
                                        <tbody>
                                        @foreach ($records as $record)
                                            <tr class="date-range">
                                                <td style="width:25%"><span style="font-weight: bold;">{{ $loop->iteration }}</span></td>
                                                <td style="width:25%;padding-left: 0;">
                                                    <div class="progress" style="width: 60%;">
                                                        <div class="progress-bar" role="progressbar" style="width: {{ $record->progress }}%;" aria-valuenow="{{ $record->progress }}" aria-valuemin="0" aria-valuemax="100">{{ $record->progress }}%</div>
                                                    </div>
                                                </td>
                                                <td style="width:25%">@switch($record->status)
                                                    @case(0)
                                                        <span style="color: gray; font-weight: bold;">Not Started</span>
                                                        @break
                                                    @case(1)
                                                        <span style="color: green; font-weight: bold;">Complete</span>
                                                        @break
                                                    @case(2)
                                                        <span style="color: orange; font-weight: bold;">In Progress</span>
                                                        @break
                                                    @case(3)
                                                        <span style="color: red; font-weight: bold;">Failed</span>
                                                        @break
                                                    @default
                                                        <span style="color: black; font-weight: bold;">Unknown</span>
                                                @endswitch
                                            </td>
                                                <td style="width:25%;">
                                                @if($record->progress == 100)
                                                        <a href="{{ route('reports.download-attendance-pdf', ['id' => $record->id]) }}" title="Download PDF">
                                                            <i class="fa fa-file-pdf-o" style="font-size:20px; margin-left: 5px; color: red;"></i>
                                                        </a>
                                                        <a href="{{ route('reports.download-attendance-sheet', ['id' => $record->id]) }}" title="Download Excel">
                                                            <i class="fa fa-file-excel-o" style="font-size:20px; margin-left: 5px;"></i>
                                                        </a>
                                                    @else
                                                        <span title="Download PDF" style="cursor: not-allowed; pointer-events: none; opacity: 0.5;">
                                                            <i class="fa fa-file-pdf-o" style="font-size:20px; margin-left: 5px; color: gray;"></i>
                                                        </span>
                                                        <span title="Download Excel" style="cursor: not-allowed; pointer-events: none; opacity: 0.5;">
                                                            <i class="fa fa-file-excel-o" style="font-size:20px; margin-left: 5px; color: gray;"></i>
                                                        </span>
                                                    @endif
                                                    </td>
                                            </tr>
                                            @endforeach
                                 
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- END: Content-->
{{ View::make('layout.footer') }}
@include('E-Attendance.edit_attendance')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
     
    });

   

    // pdf download option
</script>