@extends('admin.layout.master')
@section('content')
<style>
    label {
        margin-bottom: 1px;
    }
    .form-group {
        margin-bottom: 9px;
    }
    .table-responsive {
        height: calc(100vh - 200px);
    }
    th {
        background: #007bff;
        color: white !important;
        position: sticky;
        top: 0;
        text-align: center;
    }
    table {
        position: relative;
        text-align: center;
    }
    .table-bordered td, .table-bordered th {
        border: 1px solid #aaabab;
        padding: 5px;
    }
</style>
<style>
     select {
            height: 30px !important;
        }
    label {
        margin-bottom: 1px;
    }
    
    @media print{
            @page{
                size: A4 portrait;
                /* size: legal landscape; */
              
            }
            body {
                zoom:50%; /*or whatever percentage you need, play around with this number*/
                font-family: serif;
                font-size:17px;
                font-weight: bold;
                background-color: #FFFFFF !important;
            }

        }
 </style>
    <div class="row">
        <div class="col-xs-12">
            <h4 class="page-title"></h4>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header" style="padding: 0 10px">
                    <div class='row'>
                        <div class='col-md-10 text-left' pt-2>
                            <h3>{{__('obs.guest_in')}}/{{__('obs.out_data')}}</h3>
                        </div>
                        @if(count($in_out_data) >0)
                        <div class='col-md-1 text-right'>
                          
                            <div class="form-group">
                                <button type="button" class="btn btn-sm btn-info text-right" onclick="PrintDiv();">{{__('obs.print')}}</button>
                            </div>
                         
                        </div>
                        <div class='col-md-1 text-right'>
                           
                            @include('payroll.includes.printAndExcel')
                           
                        </div>
                        @endif

                    </div>
                </div>
                <div class="card-body">
                   
                    <form action="{{route('payroll.hrm.guest.guest_in_out_data')}}" method="get">
                     <input type="hidden" name="search" value="true">

                        <div class='row'>
                            <div class='col-lg-2 col-md-2 col-sm-6 '>
                                <div class="form-group">
                                    <label>{{__('obs.date_from')}}</label>
                                    <input type="text" class="datepicker form-control input-sm"
                                           name="from_date" id="from_date" value="{{ request()->get('from_date') ? request()->get('from_date') : date('01-m-Y') }}">
                                </div>
                            </div>
                            <div class='col-lg-2 col-md-2 col-sm-6 '>
                                <div class="form-group">
                                    <label>{{__('obs.date_to')}}</label>
                                    <input type="text" class="datepicker form-control input-sm"
                                           name="to_date" id="to_date" value="{{ request()->get('to_date') ? request()->get('to_date') : date('d-m-Y') }}">   
                                </div>
                            </div>
                          
                            <div class='col-lg-1 col-md-1  col-sm-4  mt-4'>
                                <button class='btn btn-sm btn-danger'>{{__('obs.search')}}</button>
                            </div>
                           
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
       
    @if(count($in_out_data) >0)
     <div id="divTableDataHolder" class="table2excel">
        <style>
            table th, table td{
                vertical-align: middle !important; 
              
            }
           
            @media print {
                table th, table td{
                    font-size: 18;
                 }
                 .no-print{
                    display: none;
                 }
                  .pagebreak { page-break-after: always; } 

                @page{
                    size: A4 Portrait;
                    margin: 5mm 2mm 5mm 0;
                   
                }
            }
        </style>
        @php
        $i=1;
        @endphp
       @foreach (collect($in_out_data)->chunk(30) as $chunk_data)
            <div class="row" >
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body" style="padding: 0">
                            <h4 class="card-title text-center m-2">Guest In/Out Data For The Date  Of ({{$from_date}} - {{$to_date}})</h4>
                       
                            <div class="col-lg-12 col-md-12 col-sm-12 " style="">
                                <table class="table table-stripped table-bordered text-center" style="width:100%">
                                    <thead>
                                        <tr>
                                            <input type="hidden" name="em_code" id="em_code" value="">
                                        </tr>
                                        <tr>
                                            <th style="width:5%">{{__('obs.sl')}}</th>
                                            <th style="width:10%">{{__('obs.date')}}</th>
                                            <th style="width:20%">{{__('obs.name')}}</th>
                                            <th style="width:10%">{{__('obs.phone')}}</th>
                                            <th style="width:20%">{{__('obs.address')}}</th>
                                            <th style="width:20%">{{__('obs.purpose')}}</th>
                                            <th style="width:10%">{{__('obs.in_time')}}</th>
                                            <th style="width:10%">{{__('obs.out_time')}}</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody_data">
                                            @foreach ($chunk_data as $data )
                                          
                                            <tr style="height: 35px">
                                                <td>{{$i++}}</td>
                                                <td style="white-space: nowrap">{{$data['date']}}</td>
                                                <td class="text-left" style="white-space: nowrap">{{$data['name']}}</td>
                                                <td style="white-space: nowrap">{{$data['phone']}}</td>
                                                <td class="text-left">{{$data['address']}}</td>
                                                <td class="text-left">{{$data['purpose']}}</td>
                                                <td style="white-space: nowrap">{{$data['in_time']}}</td>
                                                <td style="white-space: nowrap">{{$data['out_time']}}</td>
                                               
                                            </tr>
                                            @endforeach
                                        
                                        </tbody>   
                                </table>
                            </div>                         
                        </div>
                     </div>
                    </div>
                </div>
                <div style="page-break-before: always;"></div>
            @endforeach
     </div>
     @else
     @if(request()->get('search') !=null)
     <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="text-center">{{__('obs.no_data_found')}}</h4>
                </div>
           </div>
        </div>
    </div>
    @endif
     @endif




     <script>
        $(document).ready(function () {
            $('.select_2').select2();
        }); 
    </script>

    @endsection