@extends('layouts.backend')
@section('extraCss')
<style type="text/css">
span.multiselect-native-select {
    position: relative;
    display: block;
}
.btn-group, .btn-group-vertical {
    display: block;
}
.custom-select, .dropdown-item {
    width: 100% !important;
}
</style>
@endsection
@section('mainContentArea')
    <div class="card card-default">
        <div class="card-header">
            <h4> Staff List </h4>
             <button class="btn btn-success float-right btn-sm" type="button"  data-toggle="modal" data-target="#staffModel" id="add-staff" style="float:right; margin:10px;">
              <i class="fa fas fa-plus"></i> Add Staff</button>
        </div>
        <div class="card-body">
          
         
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Department</th>
                        <th>Store</th>
                        
                        <th colspan="2">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($stafflist as $staff)
                   
                        <tr>
                            <td>{{ $staff->name }}</td>
                            <td>{{ empty($staff->email) ? 'N/A' : $staff->email }}</td>
                            <td>{{ empty($staff->phone) ? 'N/A' : $staff->phone }}</td>
                            <td>{{ empty($staff->department) ? 'N/A' : $staff->department }}</td>
                            <td>{{ empty($staff->warehouse->name) ? 'No' : $staff->warehouse->name }}</td>
                          
                            <td><a data-id="{{ $staff->id }}" id="edit-post" class="btn btn-xs btn-info btn-sm"><i class="fa fas fa-pencil"></i> Modify</a>
                            </td>
                           
                           
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @php if($stafflist->count() > 0) { @endphp {!! $stafflist->appends(request()->input())->links() !!} @php } @endphp
    </div>

<!-- Modal -->
<div class="modal fade" id="staffModel" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header" >
              <h5> Add Staff</h5>
              <button type="button" class="close" data-dismiss="modal">&times;</button> 
               
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <form role="form">
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input id="staffid" type="hidden">
                        <input type="text" class="form-control" id="inputName" placeholder="Enter your name" required />
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email" required/>
                    </div>
                    <div class="form-group">
                         <label for="Color">Phone</label>
                         <input type="text" class="form-control " id='inputphone' placeholder="Enter your phone" max='10' min='10' required> 
                     </div>
                    <div class="form-group">
                        <label for="inputMessage">Department</label>
                        <textarea class="form-control" id="inputDepart" placeholder="Enter your department" required></textarea>
                    </div>
                    <div class="form-group">
                          <label for="s">Store </label>
                          <select name="store_id" id="inputstore" class="form-control" required>
                                <option value="">select</option>
                                @foreach($allstores as $warehouse)
                                <option value="{{ $warehouse->id }}" {{ ( (!empty(request("warehouse_id")) && (request("warehouse_id") === $warehouse->id)) ? "selected" : "") }}>{{ $warehouse->warehouse_code . ' ('.$warehouse->name.')' }}</option>
                                @endforeach
                          </select>                   
                    </div>
                </form>
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary submitBtn" id="btn-save" onclick="submitContactForm()">SUBMIT</button>
            </div>
        </div>
    </div>
</div>
   
@endsection

@section('extraJs')
<script type="text/javascript">
$('body').on('click', '#add-staff', function () {       
        $('#inputName').val('');
        $('#inputEmail').val('');
        $('#inputphone').val('');
        $('#inputDepart').val('');
        $('#inputstore').val('');
        $('#staffid').val('');
        $('#staffModel .modal-dialog .modal-content .modal-header h5').html("Add Staff");
        $('#staffModel .modal-dialog .modal-content .modal-footer #btn-save').html("Submit");
});
function submitContactForm(){
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var phone = $('#inputphone').val();
    var depart = $('#inputDepart').val();
    var store = $('#inputstore').val();
    var staffid = $('#staffid').val();

    console.log(phone.length);
    if(name.trim() == '' ){
        alert('Please enter your name.');
        $('#inputName').focus();
        return false;
    }else if(email.trim() == '' ){
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    }else if(email.trim() != '' && !reg.test(email)){
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    }else if(phone.trim() == '' ){
        alert('Please enter your phone.');
        $('#inputphone').focus();
        return false;
        if(isNaN(phone)){
         alert("Please enter number only");
         $('#inputphone').focus();
         return false;
        }        
        if (phone.value.length < 10 || phone.value.length > 10) {
            alert("Mobile No. is not valid, Please Enter 10 Digit Mobile No.");
            $('#inputphone').focus();
            return false;
        }
    }else if(depart.trim() == '' ){
        alert('Please enter your department.');
        $('#inputDepart').focus();
        return false;
    }else if(store.trim() == '' ){
        alert('Please select your store.');
        $('#inputstore').focus();
        return false;
    }else{
        var _token   = $('meta[name="csrf-token"]').attr('content'); 
        $.ajax({
            type: "get",
            url: "{{ route('oc-staff-add') }}",
            data: {
            name: name,
            email: email,
            phone: phone,
            depart: depart,
            store: store,
            staffid:staffid,
            _token: _token
            },
            dataType: "json",
            beforeSend: function () {
                $('.submitBtn').attr("disabled","disabled");
               
            },           
            success: function(response) { 
                var reason = JSON.stringify(response);  
                var parsed = JSON.parse(reason);            
                console.log(parsed);
                if (parsed.status == false) {
                toastr.error(parsed.info);
                } else {
                toastr.success(parsed.info);
                $('.submitBtn').removeAttr("disabled");
                
                window.location.reload('true');
                }
            }
        });
    }
}

$('body').on('click', '#edit-post', function () {
      var post_id = $(this).data('id');
      var _token   = $('meta[name="csrf-token"]').attr('content'); 
        $.ajax({
            type: "get",
            url: "{{ route('oc-staff-edit') }}",
            data: {
            id:  post_id,        
            _token: _token
            },
            dataType: "json",                       
            success: function(data) { 
                  $('#staffModel .modal-dialog .modal-content .modal-header h5').html("Edit Staff");
                  $('#staffModel .modal-dialog .modal-content .modal-footer #btn-save').html("update");
                  $('#staffModel').modal('show');
                  $('#staffid').val(data.id);
                  $('#inputName').val(data.name);
                  $('#inputEmail').val(data.email);
                  $('#inputphone').val(data.phone); 
                  $('#inputDepart').val(data.department);                
                  $("#inputstore option[value=" + data.store + "]").attr('selected', true);                  
            }
        });
      
});
</script>
@endsection