@include('layouts.header')
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<style>
   .topbar{
        top:0px;
    }
   a{
        color:#000 !important;
    }
     .hbox{
        width:30%;
        height:100px;
        margin:10px;padding:10px;
        border-radius:20px;
        background-color:#F0F8FF;
        border: 1px solid rgba(191, 191, 191, 1);
        }
    .hbox span {
            display: inline-block;
            font-size: 28px;
            font-weight: 700;
            position: relative;
            left: 60px;
            bottom: 45px;
        }
        .btn-dark{
             background-color:#5F9EA0;
             border-color:#5F9EA0;
        }
</style>
<div class="card">
     <!-- Overall Statistics -->
     <div class="col-12">
      <!-- Button to trigger the modal -->
       <div class="section-title">Overall</div>

        <div class="grid-box">
            <div class="hbox">
                <p>Total</p>
                <i class="icon active_icon"> </i><span>{{ $overall->employee_number }}</span>
            </div>
            <div class="hbox">
                <p>Male</p>
                <i class="icon m_icon"></i><span>{{ $overall->Male }}</span>
            </div>
            <div class="hbox">
                <p>Female</p>
                <i class="icon f_icon"></i><span>{{ $overall->Female }}</span>
            </div>
            <div class="hbox">
                <p>Departments</p>
                <i class="icon dept-icon"></i> <span>{{ $overall->Department }}</span>
            </div>
        </div>
   
    <!-- Employee statistics by location -->
    @foreach($byLocation as $data)
        <h6>{{ ucwords(strtolower($data->WorkingLocation)) }}</h6>
        <div class="grid-box">
            <div class="hbox">
                <p>Total</p>
                <i class="icon active_icon"></i><span>{{ $data->employee_number }}</span>
            </div>
            <div class="hbox">
                <p>Male</p>
                <i class="icon m_icon"></i><span>{{ $data->Male }}</span>
            </div>
            <div class="hbox">
                <p>Female</p>
                <i class="icon f_icon"></i><span>{{ $data->Female }}</span>
            </div>
            <div class="hbox">
                <p>Departments</p>
                <i class="icon dept-icon"></i><span>{{ $data->Department }}</span>
            </div>
        </div>
    @endforeach

    <div class="row">
        <table class="table table-striped" border="1">
        <tr>
            <th width="8%" colspan="6%">Department Wise</th>
        </tr>

        <tr>
            <th width="8%" rowspan="2">Department</th>
            <th width="10%" colspan="2">Chennai</th>
            <th width="10%" colspan="2">Vellore</th>
            <th width="10%" rowspan="2">Total</th>
        </tr>

        <tr>
            <th width="8%">Male</th>
            <th width="8%">Female</th>
            <th width="8%">Male</th>
            <th width="8%">Female</th>
        </tr>

        @foreach ($byDepartmentLocation as $data)
        <tr>
            <td>{{ ucwords(strtolower($data->Department)) }}</td>
            <td>{{ $data->Chennai }}</td>
            <td>{{ $data->FChennai }}</td>
            <td>{{ $data->Vellore }}</td>
            <td>{{ $data->FVellore }}</td>
            <td>{{ $data->Chennai + $data->Vellore + $data->FChennai + $data->FVellore }}</td>
        </tr>
        @endforeach
    </table>
</div>

<div class="row mt-2">
    <table class="table table-striped" border="1">
        <tr>
            <th width="8%" colspan="6%">ReportingManager Wise</th>
        </tr>

        <tr>
            <th width="8%" rowspan="2">Working Location</th>
            <th width="10%" rowspan="2">Reporting Manager</th>
            <th width="10%" colspan="2">Reporting Employee's</th>
            <th width="10%" rowspan="2">Total</th>
        </tr>

        <tr>
            <th width="8%">Male</th>
            <th width="8%">Female</th>
        </tr>

        @foreach ($byManager as $data)
        <tr>
            <td>{{ ucwords(strtolower($data->WorkingLocation)) }}</td>
            <td>{{ ucwords(strtolower($data->ReportingManager)) }}</td>
            <td>{{ $data->Male }}</td>
            <td>{{ $data->Female }}</td>
            <td>{{ $data->Male + $data->Female }}</td>
        </tr>
        @endforeach
    </table>
</div>

<div class="row mt-2">
    <table class="table table-striped" border="1">
        <tr>
            <th width="8%" colspan="6%">ShiftTiming Wise</th>
        </tr>
        
        <tr>
            <th width="8%" rowspan="2">ShiftTiming</th>
            <th width="10%" colspan="2">Chennai</th>
            <th width="10%" colspan="2">Vellore</th>
            <th width="10%" rowspan="2">Total</th>
        </tr>
            <tr>
                <th width="8%">Male</th>
                <th width="8%">Female</th>
                <th width="8%">Male</th>
                <th width="8%">Female</th>
             </tr>
      
        @foreach ($byShift as $data)
        <tr>
            <td>{{ $data->ShiftTiming }}</td>
            <td>{{ $data->Chennai }}</td>
            <td>{{ $data->FChennai }}</td>
            <td>{{ $data->Vellore }}</td>
            <td>{{ $data->FVellore }}</td>
            <td>{{ $data->Chennai + $data->FChennai +$data->Vellore +$data->FVellore }}</td>
        </tr>
        @endforeach
    </table>
</div>
<button type="button" class="btn btn-dark" id="showModalBtn">Birthday Alert</button>

<!-- Birthday Reminder Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel">Birthday Reminder</h6>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                <tr>
                    <th>User</th>
                     <th>Date Of Birth</th>
                     <th>Reminder</th>
                     <th>Mobile Number</th>
                     <th>Birthday</th>
                </tr>
                 @foreach($birthdayReminders as $data)
                    <tr>
                    <td><img src="{{ asset('storage/Images/Emp_Photo/'.$data->EmployeePhoto) }}" alt="" width="40px" height="40px"/>
                          {{ ucwords(strtolower($data->FirstName)) }}
                        <span>{{ ucwords(strtolower($data->EmployeeCode)) }}</span> </td>
                          <td>{{ date("d-M-Y", strtotime($data->DateOfBirth)) }}</td>
                          <td>Wish {{ ucwords(strtolower($data->FirstName)) }} a Happy Birthday!</td>
                          <td>{{ $data->MobileNumber }}</td>
                          <td>{{ $data->DateOfBirth == date('m-d') ? 'Today' : 'Coming Soon' }}</td>
                    </tr>
                 @endforeach
             </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>


<script>
    document.getElementById('showModalBtn').addEventListener('click', function() {
        var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
        myModal.show();  // Open the modal
    });
</script>
    @include('layouts.footer')