@extends('layouts.admin')

@section('title') Staff @endsection

@section('content')
@php $auth= Auth::user(); @endphp

<div class="table_harder">
    <div class="table_head">
        <h5>List of Staff</h5>
        <p>Total Number of Staffs {{$totalRecords}}</p>
    </div>
    <div class="table_details">
        <button type="button" class="add_staff" data-bs-toggle="modal" data-bs-target="#addImportModal">
            Upload Staff Bulk
        </button>

        <button type="button" class="add_staff" data-bs-toggle="modal" data-bs-target="#addStaffModal">
            <a href="javascript:viod(0)" data-bs-toggle="modal" data-bs-target="#addStaffModal"><i
                    class="fa fa-plus"></i>Add Staff</a>
        </button>

        <!-- Modal -->
        <div class="modal fade Custom_modal" id="addImportModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog  modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Upload Staff Bulk</h1>
                        <button type="button" class="btn_close" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{route('import')}}" id="addImport" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label class="form-label" for="target" style="color: rgba(116, 131, 131, 0.7)">Site Id
                                </label>
                                <select class="form-control {{ $errors->has('target') ? ' is-invalid' : '' }}"
                                    id="target" name="site_id">
                                    <option value="">Select the Site Id</option>
                                    @foreach(getsiteid() as $key=>$siteid)
                                    <option value="{{$key}}">Site-Id/{{$siteid}}</option>

                                    @endforeach
                                </select>
                                @if($errors->has('site_id'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('site_id') }}</strong>
                                </span>
                                @endif

                            </div>
                            <!-- <div class="mb-3 form-grop">
                        <div class="uploadFile">
                                 <label class="label">
                                 <input type="file" name="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" class="custom-file-input" id="customFile">

                                    <span>Upload File</span>
                                </label>
                                <p class="bottomText">Excel,CSV File accepted</p>

                        </div>
                        </div> -->
                            <div class="custom-file text-left ">
                                <label class="form-label" for="target" style="color: rgba(116, 131, 131, 0.7)">Upload
                                    File </label>
                                <input type="file" name="file" class="custom-file-input" id="customFile">


                            </div>


                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button"  onclick="refresh()" class="nextbtn p-2 cancelBtn" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="addImportSubmit"  class="nextbtn p-2">Upload</button>
                    </div>
                    <div id="loader-wrapper">
                    <div id="loader"></div>

                    <div class="loader-section section-left"></div>
                    <div class="loader-section section-right"></div>

                </div>
                </div>

            </div>
        </div>

    </div>
</div>

<div class="row">

    <div class="col-12">
        <div class="card data-table Tablecommon staffTable">
            <!-- /.card-header -->
            <div class="card-body">
                <div class="">
                    <table id="staffsTable" class="table table-hover commonContent">
                        <thead>
                            <tr>
                                <th>Site Id</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>Phone Number</th>
                                <th>Employee ID</th>
                                <th>Clients Asigned</th>
                                <th>Member Since</th>
                                <th data-orderable="false">Status</th>
                                <th data-orderable="false">Action</th>
                            </tr>
                        </thead>

                    </table>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>



<div id="modal_parent">
    @include('admin.staff.add-staff')
</div>
<div id="parent_item_details_modal">
</div>




@push('page_script')
<script type="text/javascript">
$(document).ready(function() {
    // Extend jQuery Validation with the accept file method
    $.validator.addMethod('accept', function(value, element, param) {
        return value.match(new RegExp('.(' + param.replace(/,/g, '|') + ')$', 'i'));
    });

    // Initialize jQuery Validation Plugin
    $("#addImport").validate({

        errorElement: 'span',
        rules: {
            site_id: {
                required: true,
            },
            file: {
                required: true,
                accept: "csv,xls,xlsx" // File extensions without dots
            }
        },
        messages: {
            file: {
                required: "The file is required",
                accept: "Please select a valid CSV or Excel file (XLS, XLSX)"
            },
            site_id: {
                required: "The Site Id is required"
            }
        },
        submitHandler: function(form) {
	$("#loader-wrapper").show();
     console.log("hrhrh");
	// $(".modal-content").hide();
    // some other code
    // maybe disabling submit button
    // then:
    form.submit();
  }

    });
});


$(document).ready(function() {
    $("#addImportModal").modal({
        show: false,
        backdrop: 'static'
    });
});
</script>
@if (count($errors) > 0 && session('open_modal') == '#addImportModal')
<script type="text/javascript">
$(document).ready(function() {
    $("#addImportModal").modal('show');
});

</script>

@endif



@include('include.dataTableScripts')


<script src="{{ asset('js/pages/staffs/index.js') }}"></script>
{{-- <script src="{{ asset('js/pages/staffs/form-validation.js') }}"></script> --}}
<script>
function refresh(){
    window.location.reload();
    }
    </script>

@endpush




@endsection