@extends('layouts.app')

@php

$action = Request::segments()[1];

$moduleName = __('lang.attendance');

$createItemName = __('lang.bulk_upload') . $moduleName;
$breadcrumbCurrentName = __('lang.bulk_upload');

$breadcrumbMainName = $moduleName;

$breadcrumbMainIcon = 'account_balance_wallet';
$breadcrumbCurrentIcon = 'add_box';

@endphp

@section('title') 
    {{ $moduleName }}->{{ $createItemName }} 
@stop

@section('top-bar') 
    @include('includes.top-bar') 
@stop 

@section('left-sidebar') 
    @include('includes.left-sidebar') 
@stop 

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <br>
                <div class="body">
                    <div class="" style="background-color: #24576A; height:40px">
                        <h4 class="text-center" style="color:#fff; padding:10px;font-weight: 100">{{ __('lang.instructions_for_bulk_upload') }} {{ $moduleName }}</h4>
                    </div>
                    <br>
                    <ul>
                        <li>{{ __('lang.employee_name_entered_in_excel_file_should_exist_in_the_system')}}</li>
                        <li>{{ __('lang.date_format_entered_in_excel_file_should_be_like_01_feb_2021') }}</li>
                        <li>{{ __('lang.check_sample_excel_file_format_mentioned_below_and_put_your_data_accordingly') }}</li>
                    </ul>
                    <br>
                </div>
            </div>
            <br>
            <div class="card">
                <br>
                <div class="body">
                    <div class="" style="background-color: #24576A; height:40px">
                        <h4 class="text-center" style="color:#fff; padding:10px;font-weight: 100">{{ __('lang.bulk_import_attendance') }}</h4>
                    </div>
                    <br>
                    <form name="excel-import" action="{{ route('attendance.bulk.import') }}" id="frmFileUpload" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="dz-message text-center">
                            <input onchange="checkfile(this);" accept=".xlsx, .xls" required name="file" type="file" class="form-control">
                            <br>
                            <button type="submit" class="btn btn-primary">{{ __('lang.proceed') }}</button>
                        </div>
                    </form>
                    <hr>
                    <p class="text-center">{{ __('lang.please_check_sample_file') }} <a href="{{url('/downloads/sample-attendance.xlsx')}}" target="_self" download>{{ __('lang.download') }}</a> </p>
                    <hr>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    @if (count($data ?? []) > 0)
                    <div class="card">
                        <form name="data-import" class="actionForm" action="{{ route('attendance.bulk_store') }}" method="POST">
                            <div class="row body">
                                <div class="margin-bottom-0 col-md-2 col-lg-2 col-sm-2">
                                    <div class="form-group">
                                        <input class="btn btn-sm btn-info waves-effect" type="submit" style="margin-top: 12px" value="{{ __('lang.create_selected_vouchers') }}" id="confirmButton" name="ApplyButtom">
                                    </div>
                                </div>
                            </div>
                            <div class="body table-responsive" style="overflow-x: scroll;">
                                {{ csrf_field() }}
                                <table class="table table-hover table-bordered table-sm ">
                                    <thead>
                                        <tr>
                                            <th class="checkbox_custom_style text-center">
                                                <input name="selectTop" type="checkbox" id="md_checkbox_p" class="chk-col-cyan" />
                                                <label for="md_checkbox_p"></label>
                                            </th>
                                            <th>{{ __('lang.employee_name') }}</th>
                                            <th>{{ __('lang.phone_no') }}</th>
                                            <th>{{ __('lang.date') }}</th>
                                            <th>{{ __('lang.check_in_time') }}</th>
                                            <th>{{ __('lang.check_out_time') }}</th>
                                            <th>{{ __('lang.present_absent') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php  unset($data[0]) @endphp
                                        @foreach ($data as $item)
                                            @php
                                                $employee_name  = $item[0];
                                                $phone_no       = $item[1];
                                                $date           = $item[2];
                                                $in             = $item[3];
                                                $out            = $item[4];
                                                $status         = $item[5];

                                                $data_arr = [
                                                    'row'           => $loop->iteration + 1,
                                                    'employee_name' => $employee_name,
                                                    'phone_no'      => $phone_no,
                                                    'date'          => $date,
                                                    'in'            => $in,
                                                    'out'           => $out,
                                                    'status'        => $status,
                                                ];
                                            @endphp
                                            <tr>
                                                <th class="text-center">
                                                    <input name="items[]"  type="checkbox" value="{{ json_encode($data_arr)}}" class="chk-col-cyan selects " id="md_checkbox_{{ $loop->iteration }}" />
                                                    <label for="md_checkbox_{{ $loop->iteration }}"></label>
                                                </th>
                                                <td> {{ $employee_name }} </td>
                                                <td> {{ $phone_no }} </td>
                                                <td> {{ $date }} </td>
                                                <td> {{ $in }} </td>
                                                <td> {{ $out }} </td>
                                                <td> {{ $status }} </td>
                                            </tr>
                                        @endforeach
                                        
                                        <thead>
                                            <tr>
                                                <th class="checkbox_custom_style text-center">
                                                    <input name="selectBottom" type="checkbox" id="md_checkbox_footer" class="chk-col-cyan" />
                                                    <label for="md_checkbox_footer"></label>
                                                </th>
                                                <th>{{ __('lang.employee_name') }}</th>
                                                <th>{{ __('lang.phone_no') }}</th>
                                                <th>{{ __('lang.date') }}</th>
                                                <th>{{ __('lang.check_in_time') }}</th>
                                                <th>{{ __('lang.check_out_time') }}</th>
                                                <th>{{ __('lang.present_absent') }}</th>
                                            </tr>
                                        </thead>
                                    </tbody>
                                </table>
                                
                            </div>
                        </form>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@push('include-css')
    <!-- Wait Me Css -->
    <link href="{{ loadAsset('asset/plugins/waitme/waitMe.css') }}" rel="stylesheet" />

    <!-- Colorpicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" rel="stylesheet" />

    <!-- Dropzone Css -->
    <link href="{{ loadAsset('asset/plugins/dropzone/dropzone.css') }}" rel="stylesheet">

    <!-- Multi Select Css -->
    <link href="{{ loadAsset('asset/plugins/multi-select/css/multi-select.css') }}" rel="stylesheet">

    <!-- Bootstrap Spinner Css -->
    <link href="{{ loadAsset('asset/plugins/jquery-spinner/css/bootstrap-spinner.css') }}" rel="stylesheet">

    <!-- Bootstrap Tagsinput Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet">

    <!-- Bootstrap Select Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" /> 
@endpush 

@push('include-js')
    <script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>

    <!-- Moment Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>

    <!-- Bootstrap Material Datetime Picker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>

    <script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>

    <script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>
    <!-- Autosize Plugin Js -->

    <script src="{{ loadAsset('asset/js/dataTable.js')  }}"></script>

    <script>
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": 0,
            "extendedTimeOut": 0,
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut",
            "tapToDismiss": false
        }

        @if(Session::has('success'))
            toastr.success('{{ Session::get('success') }}')
        @endif
        
        @if (Session::has('error'))
            toastr["error"]('{{ Session::get('error') }}');
        @endif
        
        @if($errors->any())
             @foreach($errors->all() as $error)
                 toastr.error('{{ $error }}')
             @endforeach
        @endif
    </script>

    <script>
        let action =  "{{$action}}";

        function checkfile(sender) {
            var validExts = new Array(".xlsx", ".xls", ".csv");
            var fileExt = sender.value;
            fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
            if (validExts.indexOf(fileExt) < 0) {
                alert("Invalid file selected, valid files are of " +
                    validExts.toString() + " types.");
                return false;
            } else return true;
        }
        $(document).ready(function() {
            var boxes = $('.chk-col-cyan');
            boxes.on('change', function() {
                $('#confirmButton').prop('disabled', !boxes.filter(':checked').length);
            }).trigger('change');

            $('.dropdown-submenu a.test').on("click", function(e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });
        });
    </script>
   
    <script>
        BaseController.init();
    </script>
@endpush